tab bar flutter code example

Example 1: tabs flutter example

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.directions_car)),
          Tab(icon: Icon(Icons.directions_transit)),
          Tab(icon: Icon(Icons.directions_bike)),
        ],
      ),
    ),
  ),
);

Example 2: tab design in flutter

DefaultTabController(      length: 3,      child: Scaffold(        appBar: AppBar(          backgroundColor: Colors.white,          elevation: 0,          bottom: TabBar(              unselectedLabelColor: Colors.redAccent,              indicatorSize: TabBarIndicatorSize.label,              indicator: BoxDecoration(                  borderRadius: BorderRadius.circular(50),                  color: Colors.redAccent),              tabs: [                Tab(                  child: Container(                    decoration: BoxDecoration(                        borderRadius: BorderRadius.circular(50),                        border: Border.all(color: Colors.redAccent, width: 1)),                    child: Align(                      alignment: Alignment.center,                      child: Text("APPS"),                    ),                  ),                ),                Tab(                  child: Container(                    decoration: BoxDecoration(                        borderRadius: BorderRadius.circular(50),                        border: Border.all(color: Colors.redAccent, width: 1)),                    child: Align(                      alignment: Alignment.center,                      child: Text("MOVIES"),                    ),                  ),                ),                Tab(                  child: Container(                    decoration: BoxDecoration(                        borderRadius: BorderRadius.circular(50),                        border: Border.all(color: Colors.redAccent, width: 1)),                    child: Align(                      alignment: Alignment.center,                      child: Text("GAMES"),                    ),                  ),                ),              ]),        ),        body: TabBarView(children: [          Icon(Icons.apps),          Icon(Icons.movie),          Icon(Icons.games),        ]),      ))

Example 3: flutter tab

import 'package:flutter/material.dart';

void main() {
  runApp(TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

Example 4: tabbar flutter

indicatorSize

Example 5: tab design in flutter

DefaultTabController(        length: 3,        child: Scaffold(          appBar: AppBar(            backgroundColor: Colors.white,            elevation: 0,            bottom: TabBar(                unselectedLabelColor: Colors.redAccent,                indicatorSize: TabBarIndicatorSize.tab,                indicator: BoxDecoration(                    gradient: LinearGradient(                        colors: [Colors.redAccent, Colors.orangeAccent]),                    borderRadius: BorderRadius.circular(50),                    color: Colors.redAccent),                tabs: [                  Tab(                    child: Align(                      alignment: Alignment.center,                      child: Text("APPS"),                    ),                  ),                  Tab(                    child: Align(                      alignment: Alignment.center,                      child: Text("MOVIES"),                    ),                  ),                  Tab(                    child: Align(                      alignment: Alignment.center,                      child: Text("GAMES"),                    ),                  ),                ]),          ),          body: TabBarView(children: [            Icon(Icons.apps),            Icon(Icons.movie),            Icon(Icons.games),          ]),        )     )

Example 6: tab design in flutter

DefaultTabController(        length: 3,        child: Scaffold(          appBar: AppBar(            backgroundColor: Colors.redAccent,            elevation: 0,            bottom: TabBar(                labelColor: Colors.redAccent,                unselectedLabelColor: Colors.white,                indicatorSize: TabBarIndicatorSize.label,                indicator: BoxDecoration(                    borderRadius: BorderRadius.only(                        topLeft: Radius.circular(10),                        topRight: Radius.circular(10)),                    color: Colors.white),                tabs: [                  Tab(                    child: Align(                      alignment: Alignment.center,                      child: Text("APPS"),                    ),                  ),                  Tab(                    child: Align(                      alignment: Alignment.center,                      child: Text("MOVIES"),                    ),                  ),                  Tab(                    child: Align(                      alignment: Alignment.center,                      child: Text("GAMES"),                    ),                  ),                ]            ),          ),          body: TabBarView(children: [            Icon(Icons.apps),            Icon(Icons.movie),            Icon(Icons.games),          ]),        )     )