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: flutter tab bar bottom bar
int _selectedIndex = 0;
static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
Example 5: tabbar flutter
indicatorSize
Example 6: 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), ]), ) )