Flutter: Material UI Create TabBar with ListView (Round Corners)
Flutter provides a convenient way to create a tab layout. To add tabs to the app, we need to create a TabBar and TabBarView and attach them with the TabController. The controller will sync both so that we can have the behavior which we need.When we use TabBar and TabBarView, we should use a TabController to handle various aspects of a tab. In this tutorial, we shall use DefaultTabController, which makes our job easy for now. You can also use a custom TabController, but that requires additional inputs
Let us see step by step to create a tab bar in Flutter application.
import 'package:flutter/material.dart';
import 'package:tabbarwithlist/screen/home/home.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Home(),
);
}
}Before Create Home stateful widget create home.dart file in home folder, then inside of it with the following code:
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.pink,
elevation: 1,
title: Text("Tab Bar", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),),
),
body:DefaultTabController(
length: 3,
child: Column(
children: [
Material(
child: Container(
height: 70,
color: Colors.white,
child: TabBar(
physics: const ClampingScrollPhysics(),
padding: EdgeInsets.only(top: 10, left: 10, right: 10, bottom: 10),
unselectedLabelColor: Colors.pink,
indicatorSize: TabBarIndicatorSize.label,
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.pinkAccent
),
tabs: [
Tab(
child: Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
border: Border.all(color: Colors.pinkAccent, width: 1)
),
child: Align(
alignment: Alignment.center,
child: Text("Chat"),
),
),
),
Tab(
child: Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
border: Border.all(color: Colors.pinkAccent, width: 1)
),
child: Align(
alignment: Alignment.center,
child: Text("Status"),
),
),
),
Tab(
child: Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
border: Border.all(color: Colors.pinkAccent, width: 1)
),
child: Align(
alignment: Alignment.center,
child: Text("Call"),
),
),
)
],
),
),
),
Expanded(
child: TabBarView(
children: [
ListView.separated(
padding: EdgeInsets.all(15),
itemCount: 20,
separatorBuilder: (BuildContext context, int index) => const Divider(),
itemBuilder: (context, index){
return ListTile(
onTap: () {},
title: Text("Chat List $index"),
subtitle: Text("Tab bar ui"),
trailing: Icon(Icons.arrow_circle_right_sharp),
);
},
),
ListView.separated(
padding: EdgeInsets.all(15),
itemCount: 20,
separatorBuilder: (BuildContext context, int index) => const Divider(),
itemBuilder: (context, index){
return ListTile(
onTap: () {},
title: Text("Status List $index"),
subtitle: Text("Tab bar ui"),
trailing: Icon(Icons.arrow_circle_right_sharp),
);
},
),
ListView.separated(
padding: EdgeInsets.all(15),
itemCount: 20,
separatorBuilder: (BuildContext context, int index) => const Divider(),
itemBuilder: (context, index){
return ListTile(
onTap: () {},
title: Text("Call List $index"),
subtitle: Text("Tab bar ui"),
trailing: Icon(Icons.arrow_circle_right_sharp),
);
},
),
],
),
)
],
),
)
);
}
}
DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.flight)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_car)),
],
),
title: Text('Tabs Demo'),
),
body: TabBarView(
children: [
Icon(Icons.flight, size: 350),
Icon(Icons.directions_transit, size: 350),
Icon(Icons.directions_car, size: 350),
],
),
),
);To implement TabBar in your Flutter app, complete the following steps:
- Wrap the
Scaffoldwidget inside theDefaultTabController. This should be used for most simple use cases. If you want to control the tabs programmatically, you should use TabController and avoid this step - Place the
TabBarwidget as the bottom property ofAppBar - Provide
TabBarViewin the body of theAppBar.TabBarViewis likePageView, which is used mostly with TabBar because it shows the widget based on the currently selected tab
Tab color & size
To alter the color of a tab:
TabBar(
indicatorColor: Colors.amberAccent,indicatorSize: TabBarIndicatorSize.label,
tabs: [],
)TabBarIndicatorSize.tab.Tab height
To change the height of a tab:
TabBar(
indicatorWeight: 10,
tabs: [],
)Change the indicator
You can change the indicator itself, as shown below:
TabBar(
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(50), // Creates border
color: Colors.pinkAccent), //Change background color from here
tabs: [],
)Flutter TabBar background color
Changing the background color of tab is as easy as changing the color: Colors.pinkAccent.
Horizontally scrollable tabs
The TabBar widget has a property dedicated to configuring horizontally scrollable tabs. Set the isScrollable to True, and the job is done. You’ll have to set it explicitly because it defaults to False.
TabBar(
isScrollable: true,
tabs: [
...
],
)Output:
