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: 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), ]), ) )