Press "Enter" to skip to content

Creating Scrollable Tabs on Flutter Apps

Tabs on Software are import on mobile as well as desktop applications. Herelet’s learn how to create tabs on Flutter Applications.

There are many ways to create tabs, here we use DefaultTabController, which is more simple and dynamic.

Inside the app build widget, you have to add TabBar on AppBar section and add TabBarView as tab contents inside the App body section.

Core Code:

Widget build(BuildContext context) {
  return new DefaultTabController(
    length: 2,
    child:  Scaffold(
      appBar: new AppBar(
        title: new Text("Flutter Tabs"),
        elevation: 0,
        bottom: TabBar(
          tabs: <Widget>[
            Tab(text: "Tab 1"),
            Tab(text: "Tab 2"),
          ],
        )
      ),
      body: TabBarView(
          children: <Widget>[
            Center(child: Text("Tab1 Content")),
            Center(child: Text("Tab2 Content"))
          ]
      )
   ),
  );
}

Where

  • length is the number tabs that you want to insert on your flutter app.
  • TabBar contains the text on each tab.
  • TabBarView is the contents on each tab.
Adding Tabs on Flutter Apps

Note: You have to ensure that the number of tabs, number of tab bar and thenumber of tab contents should be same. If you make difference, then you will get error.

Sample Output:

Tabs on Flutter

More Structured Code:

You can structure the code by separating ‘build child’, ‘tab bar’ and ‘tab contents’ as different widgets like below:
(Tab bar names are similar to WhatsApp messenger and full app codes are included)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return new DefaultTabController(
      length: 3,
      child: buildScaffold()
    );
  }

  Widget buildScaffold(){
    return Scaffold(
        appBar: new AppBar(
          title: new Text("Students Details"),
          elevation: 0,
          bottom: buildTabBar(),
        ),
        body: buildTabBody()
    );
  }

  Widget buildTabBar() {
    return TabBar(
      tabs: <Widget>[
        Tab(text: "CHATS"),
        Tab(text: "STATUS"),
        Tab(text: "CALLS"),
      ],
    );
  }

  Widget buildTabBody() {
    return TabBarView(
        children: <Widget>[
          Center(child: Text("Messages")),
          Center(child: Text("Friends' status")),
          Center(child: Text("Call List")),
        ]
    );
  }
}

Sample Output:

WhatsApp like three tabs on flutter

How to Create Scrollable Tabs

It is simple to add scrollable on flutter. Just create SingleChildScrollView widget as a TabBarView and put all the contents as it’s child.

Example:

TabBarView(
              children: <Widget>[
                  SingleChildScrollView(
                     child: Column(
                       children: <Widget>[
                         Container(
                           height: 125,
                           child: Text("hello"),
                         ),
                         Container(
                           height: 125,
                           child: Text("hello"),
                         ),
                         Container(
                           height: 125,
                           child: Text("hello"),
                         ),
                         Container(
                           height: 125,
                           child: Text("hello"),
                         ),
                         Container(
                           height: 125,
                           child: Text("hello"),
                         ),
                       ],
                     ),
                  ),

                Center(child: Text("Tab2 Content"))
              ]
          )

Tab Without AppBar

It is possible to create Tab without a AppBar text or appbar text’s space. For this just replace AppBar title content with TabBar.

return Scaffold(
        appBar: new AppBar(
          elevation: 0,
          title: buildTabBar(),
        ),
        body: buildTabBody()
    );

Be First to Comment

Leave a Reply