Started developing with Java on Android Studio. Have done a little loads of work before it turned boring. Conventional methods have that effect on people. You’d agree, right? So I switched to using Flutter.

For my first time, I’d assume that you’re already aware of the basics required for you to understand the code and I’ll guide you to building a layout like this:

To start, we’d write this code in the main.dart of your project. It has a default class MyApp that extends StatelessWidget. We’d make this return a MaterialApp and as its child, a Scaffold.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   
    return new MaterialApp(
      color: Colors.yellow,
      home: new Scaffold(
      ),
    );
  }

You need the Scaffold to create appbars and BottomNavigationBar. If you want to create a tabbed layout with the tabs just under the appbar, you will use the appBar’s bottom: tag.

I have worked the layout using the BottomNavigationBar class but I would encourage you to try it out using the BottomAppBar class. (I did not do that because I found out about it just while I was writing this article. Guess I did not really read the catalog well enough.)

For building a layout like the ViewPager of Android, you will need the TabBarView class. This implements swipe views. Go ahead and give it some containers.

child: new Scaffold(
  body: TabBarView(
    children: [
      new Container(
        color: Colors.yellow,
      ),
      new Container(
        color: Colors.orange,
      ),
      new Container(
        color: Colors.lightGreen,
      ),
      new Container(
        color: Colors.red,
      ),
    ],
  ),
  backgroundColor: Colors.black,
),

Read the TabBarView class documentation and you’ll discover that this class requires a TabController.

If a TabController is not provided, then there must be a DefaultTabController ancestor.

So we’ll enclose the Scaffold within a DefaultTabController, like this:

return new MaterialApp(
  color: Colors.yellow,
  home: DefaultTabController(
    length: 4,
    child: new Scaffold(...),
  ),
 );

This gives us something like this:

Swipe implementation completed!

This might be enough for some projects, but I’ll also add the bottom tabs. the bottomNavigationBar takes one widget as a child. We’ll give it a TabBar and add some customizations to it. Now because TabBar and the TabBarView will be using the same DefaultTabController , swiping on the screen will also reflect on the tabs. Add the following code and you’ll have what it is in the top gif of this article:

bottomNavigationBar: new TabBar(
  tabs: [
    Tab(
      icon: new Icon(Icons.home),
    ),
    Tab(
      icon: new Icon(Icons.rss_feed),
    ),
    Tab(
      icon: new Icon(Icons.perm_identity),
    ),
    Tab(icon: new Icon(Icons.settings),)
  ],
  labelColor: Colors.yellow,
  unselectedLabelColor: Colors.blue,
  indicatorSize: TabBarIndicatorSize.label,
  indicatorPadding: EdgeInsets.all(5.0),
  indicatorColor: Colors.red,
),

You can find the complete code here.

Remember, everything in Flutter is a widget. Even these tabs within the TabBar. If you build a function to return another widget, it might work out and replace the default tab.

You go and understand what you learnt from this article and explore other tags in these widgets while I go and give the flutter catalog another look.