Switching Widgets…

Hello Flutter learners,

I have been working on mocking an existing app(Futbin) in Android and iOS to Flutter. For that, I am learning on how I can make the individual components. And once all the individual components are being made, I will integrate them in the single app.

Today, I was thinking of trying out how I would switch between widgets based on the selection of the buttons above. I am not talking about App bar with Tabs and the BottomAppBar. Have a look at the below image.

It’s crystal clear from above image that, on click of each of the three buttons Graph, Stats, Info the widget that loads below is different.

Demo

What you will achieve at the end…

Video Tutorial

Let’s code…

Take a stateless widget.

Need not to take the whole screen as Stateful as we will take the only body of the scaffold as Stateful

class WidgetSwitchDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("WidgetSwitchDemo"),
        ),
        body: BodyWidget(),
      ),
    );
  }
}

class BodyWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => BodyWidgetState();
}

class BodyWidgetState extends State<BodyWidget>  {
  
}

Design the static layout first

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          FlatButton(
            onPressed: () {

            },
            child: Text("Graph", style: TextStyle(color: Colors.black12),),
          ),
          FlatButton(
            onPressed: () {
              
            },
            child: Text("Stats", style: TextStyle(color: Colors.black12),),
          ),
          FlatButton(
            onPressed: () {
              
            },
            child: Text("Info", style: TextStyle(color: Colors.black12),),
          ),
        ],
      ),
      Container(
        height: 200,
        color: Colors.red
      )
    ],
  );
}

Widgets highlighted in bold are the core widgets of this layout. A Column having Row and Container as children.

• Row will have three FlatButton — Graph, Stats, Info
• Container , let’s call it parent container, will have a custom child container as it’s child, whenever one of three buttons are pressed.

Add a Dynamic Parent Container

Which container to put in the parent container is the real question here? Well, this can be solved by using an enum.

enum WidgetMarker { graph, stats, info }

and define a variable of WidgetMarker type in BodyWidgetState class, that will hold the currently selected child.

class BodyWidgetState extends State<BodyWidget> {
  WidgetMarker selectedWidgetMarker = WidgetMarker.graph; 
}

Now, it is the time to put the come code under setState of each button.

children: <Widget>[
  FlatButton(
    onPressed: () {
      setState(() {
        selectedWidgetMarker = WidgetMarker.graph;
      });
    },
  ),
  FlatButton(
    onPressed: () {
      setState(() {
        selectedWidgetMarker = WidgetMarker.stats;
      });
    },
  ),
  FlatButton(
    onPressed: () {
      setState(() {
        selectedWidgetMarker = WidgetMarker.info;
      });
    },
  ),
]

Whenever setState is invoked, widget rebuilds itself

Now, parent container has to decide which child container to build based on the selectedWidgetMarker

Create 3 child containers

Widget getGraphWidget() {
  return Container(
    height: 200,
    color: Colors.red,
  );
}

Widget getStatsWidget() {
  return Container(
    height: 300,
    color: Colors.green,
  );
}

Widget getInfoWidget() {
  return Container(
    height: 500,
    color: Colors.blue,
  );
}

Parent container’s child will be one of the three above child containers. Let’s return one of these containers based on the selectedWidgetMarker using simple and effective switch statement.

Widget getCustomContainer() {
  switch (selectedWidgetMarker) {
    case WidgetMarker.graph:
      return getGraphWidget();
    case WidgetMarker.stats:
      return getStatsWidget();
    case WidgetMarker.info:
      return getInfoWidget();
  }

  return getGraphWidget();
}

Link Child Container to Parent Container

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      Row(
        
      ),
      Container(
        child: getCustomContainer(),
      )
    ],
  );
}

That’s how our static layout becomes dynamic by building the widget on pressing any button.

This is it, for the scope of this article. But, please do check out the complete video tutorial step by step, that has some animations andFutureBuilder added to this scenario.

If you liked the article, hit the clap and follow me for more articles on Flutter. Comment for any questions or feedback.

Other Articles

Blend it Like… Anything!!

Flutter: #WidgetOfTheWeek — Page View

#WidgetoftheWeek — AnimatedContainer Widget

The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.