Tabbar with image in flutter - Mobile Coding Hub

Good day, readers A few weeks ago, one of the readers who left a comment on my story requested that I write a piece regarding the TabBar and TabBarView widgets.

So here it is: in addition to addressing these two widgets, we will also speak about the DefaultTabBarController and TabController.

If you dont know how to implement basic Tabbar in Flutter you can check this post of the Simple Tabbar in Flutter.

You might concur with me that designing a tabbed layout in Android is more difficult than it is in Flutter if you are an Android developer.

The basic Syntax of the Tabbar is given below:

TabBar(           
  indicatorColor: Colors.white,
  indicatorWeight: 2.0,
  indicatorPadding: EdgeInsets.zero,
  indicatorSize: TabBarIndicatorSize.label,
  indicator: BoxDecoration(),
  labelColor: Colors.white,
  labelStyle: TextStyle(),
  labelPadding: EdgeInsets.only(top: 10.0),
  unselectedLabelColor: Colors.grey,
  unselectedLabelStyle: TextStyle(),
  isScrollable: false,
  controller: _tabController,  // only  if DefaultTabContoller is not used.
  dragStartBehavior: DragStartBehavior.start,
  mouseCursor: SystemMouseCursors.noDrop,
  physics: ScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
  onTap: (){},
  tabs: [Tab(),]                 // @required list of Tabs

Here is the example of Image on Tabbar in Flutter Implementation.

Open the lib/main.dart file in your project directory and replace the code with the following:

class TabbarDisplay extends StatefulWidget {
  @override
  TabbarDisplayState createState() =&gt; TabbarDisplayState();
}

class TabbarDisplayState extends State<tabbardisplay> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3, // Number of tabs
        child: Scaffold(
          appBar: AppBar(
            title: Text('Tech Android Hub'),
            bottom: TabBar(
              tabs: [
                Tab(
                  icon: Icon(Icons.add), // Image or Icon you can add 
                  text: 'Tab 1',
                ),
                Tab(
                  icon: Icon(Icons.access_alarm),
                  text: 'Tab 2',
                ),
                Tab(
                  icon: Icon(Icons.ac_unit_rounded),
                  text: 'Tab 3',
                ),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Icon(Icons.add),),
              Center(child: Icon(Icons.access_alarm)),
              Center(child: Icon(Icons.ac_unit_rounded)),
            ],
          ),
        ),
      ),
    );
  }
}</tabbardisplay>

By using the icon attribute, we have modified the previous code in this example to add Icon widgets to each Tab. Alternatively, if you like, you can use a custom icon or any other icon from the Icons class.

The tabbed interface should now appear, with three tabs and an image on each one. Each tab’s associated image will appear in the centre of the screen when it is touched.

For creating complex user interfaces, Flutter offers a flexible and user-friendly framework. You are welcome to try different things, like as changing the graphics on the tabs or including new features in the app.

Related Posts

Simple Tabbar in Flutter

Progress Bars Example in Flutter

Creating a Splash Screen in Flutter

Remove DEBUG Banner in the Flutter app

Rounded Corners Image in Flutter