TabBar in Flutter

Create Free Backend With Appwrite

TabBar In Flutter

TabBar is a widget that displays a row of tabs at the top or bottom of the app, allowing users to switch between different views or pages by tapping on them.

Example 1: Courier Tracking App

In this example, you will learn how to create a simple courier tracking app using TabBar. The app will have three tabs (In Transit, Delivered, and Pending) to display the status of the courier.

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      title: Text('Courier Tracking'),
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.directions_car), text: 'In Transit'),
          Tab(icon: Icon(Icons.check), text: 'Delivered'),
          Tab(icon: Icon(Icons.access_time), text: 'Pending'),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        Center(child: ListView(children: [Text('Parcel 21'), Text('Parcel 22')])),
        Center(child: ListView(children: [Text('Parcel 23'), Text('Parcel 24')])),
        Center(child: ListView(children: [Text('Parcel 26'), Text('Parcel 27')])),
      ],
    ),
  ),
)
Info

Note: When you run online, this code is slightly modified to enhance the presentation of the parcels.

Run Online

Example 2: Todo App

In this example below, you will learn how to create a Todo App with a TabBar that has two tabs (Active and Completed) to display the tasks based on their status. Use the TabBarView to display the list of tasks for each tab.

DefaultTabController(
  length: 2,
  child: Scaffold(
    appBar: AppBar(
      title: Text('Todo App'),
      bottom: TabBar(
        tabs: [
          Tab(text: 'Active'),
          Tab(text: 'Completed'),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        Center(child: ListView(children: [
            ListTile(title: Text('Task 1'), leading: Icon(Icons.info)),
            ListTile(title: Text('Task 2'), leading: Icon(Icons.info)),
        ])),
        Center(child: ListView(children: [
            ListTile(title: Text('Task 3'), leading: Icon(Icons.info)),
            ListTile(title: Text('Task 4'), leading: Icon(Icons.info)),
        ])),
      ],
    ),
  ),
)
Run Online

Challenge

Look at the example 2 and add trailing icons to move tasks between tabs. For example, when you tap on the trailing icon of a task in the Active tab, it should move to the Completed tab. Similarly, when you tap on the trailing icon of a task in the Completed tab, it should move to the Active tab.