Question 79242 in Flutter Question posted in
The official Flutter documentation can be found here.

how to change between multi widgets in flutter?

I have a line contains 4 outlinedbuttons and i have 4 widgets ( listview , ListWheelScrollView ,image png and svg image ) i want to display one widget only when i pressed at one outlinedbutton . what should i use for do this in flutter?
provide some code will be helpfull

Container(
             padding: EdgeInsets.all(8.0),
             height: 100,
             child: Row(
               children: [
                 Expanded(
                   child: OutlinedButton(
           onPressed: () =>
              //show widget1
       
                 )),
            Expanded(
                   child: OutlinedButton(
           onPressed: () =>
              //show widget2
       
                 )),
 Expanded(
                   child: OutlinedButton(
           onPressed: () =>
              //show widget3
       
                 )),
 Expanded(
                   child: OutlinedButton(
           onPressed: () =>
              //show widget4
       
                 )),
               ],
             ),
           )
Tags:

3

Answers


  1. 0

    You can do it in different ways.. A simple one would be creating 4 boolean variables for each widget. On pressing button true value for particular widget and false other 3 values. On the otherside, use if(isthiswidget) to display widget if value is true. some demo of code

    bool widget1, widget2, widget3, widget4 = false;

    onpressing widget1

    onPressed: (){
widget1 = true;
widget2, widget3, widget4 = false;}

    onpressing widget2

    onPressed: (){
   setState(() {
     widget2 = true;
     widget1, widget3, widget4 = false;
   });
   }

    do same for other functions

    in UI set condition before every widget

    if(widget1)
Container(), //display widget1
if(widget2)
Container() //display widget2
if(widget3)
Container(), //display widget3
if(widget4)
Container() //display widget4

    note: use setstate, provider or any other statemanagement method to update realtime values and UI

    Login or Signup to reply.
  2. 0

    create this var to identify which widget to show, it will get value from 0 to 3

    int widgetNum = 0;

    and in onPressed of each button add this, don’t forget to add correct num

    onPressed: () =>setState(() {
      //for example 
      widgetNum = 2; //for first btn will be = 0 etc..
    });

    and use visibility to show widget

    Column(
   children:[
     Visibility(
       visible: widgetNum==2, // for first widget will be ==0 etc..
       child: Container(
      // your widget 
     ))]
)
    Login or Signup to reply.
  3. 0

    Create enum

    enum WidgetEnum { LISTVIEW, LIST_WHEEL_SCROLLVIEW, IMAGE, SVG_IMAGE }

    Global variable for updating the value.

    //set the default value.
var isEnumValue = WidgetEnum.LISTVIEW;

    Widget

    //place this method or place those widget in build method
Widget getVisibleWidget() {
return Container(
  padding: EdgeInsets.all(8.0),
  child: Column(
    children: [
      Row(
        children: [
          //1
          Expanded(
            child: OutlinedButton(
              onPressed: () {
                setEnumValue(WidgetEnum.LISTVIEW);
              },
              child: Text("Button LISTVIEW"),
            ),
          ),
          //2
          Expanded(
            child: OutlinedButton(
              onPressed: () {
                setEnumValue(WidgetEnum.LIST_WHEEL_SCROLLVIEW);
              },
              child: Text("Button LIST_WHEEL_SCROLLVIEW"),
            ),
          ),
          //3
          Expanded(
            child: OutlinedButton(
              onPressed: () {
                setEnumValue(WidgetEnum.IMAGE);
              },
              child: Text("Button IMAGE"),
            ),
          ),
          //4
          Expanded(
            child: OutlinedButton(
              onPressed: () {
                setEnumValue(WidgetEnum.SVG_IMAGE);
              },
              child: Text("Button SVG_IMAGE"),
            ),
          ),
        ],
      ),

      //1
      Visibility(
        visible: isEnumValue == WidgetEnum.LISTVIEW,
        child: Text("LISTVIEW"),
      ),
      //2
      Visibility(
        visible: isEnumValue == WidgetEnum.LIST_WHEEL_SCROLLVIEW,
        child: Text("LIST_WHEEL_SCROLLVIEW"),
      ),
      //3
      Visibility(
        visible: isEnumValue == WidgetEnum.IMAGE,
        child: Text("IMAGE"),
      ),
      //4
      Visibility(
        visible: isEnumValue == WidgetEnum.SVG_IMAGE,
        child: Text("SVG_IMAGE"),
      ),
    ],
  ),
);

    }

    Set the enum value for updating Widget visibility.

    void setEnumValue(var enumValue){
    isEnumValue = enumValue;
    setState(() {

    });
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search