CODEWITHSUNDEEP
flutterdartwidget
Nour Mira
Nour Mira

Reputation: 17

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
       
                 )),
               ],
             ),
           )

Upvotes: 1

Views: 374

Answers (3)

Imtiyazaehmad Parasara
Imtiyazaehmad Parasara

Reputation: 41

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(() {

    });
}

Upvotes: 2

Ahmed Elsarag
Ahmed Elsarag

Reputation: 241

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 
     ))]
)

Upvotes: 0

Muhammad Waqas
Muhammad Waqas

Reputation: 207

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

Upvotes: 0

Related Questions