Flutter dart – How to make a custom TabBar
In this flutter dart tutorial, I am sharing how to make a custom TabBar and set the color of the tab. Like in Tabbar, your tab shows at the top of the screen with a simple UI. So Now I have customized the UI and changed the ti tab like the toggle button in the flutter. like seen
Table of Contents
Tabbar with custom TabBar UI and color and on-click on-screen UI change. Also, Removing the drop shadow from a Scaffold AppBar in Flutter?
So Let’s Start to create a flutter App and open your main. dart file. if you have an existing project open the file where you want to add this and follow the below code.
Flutter custom TabBar
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
bottom: PreferredSize(
preferredSize: Size.fromHeight(
AppBar().preferredSize.height),
child: Container(
height: 60,
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 5,
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
10,
),
color: Colors.grey[200],
),
child: TabBar(
labelColor: Colors.white,
unselectedLabelColor: Colors.black,
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(
10,
),
color: Colors.pink,
),
tabs: const [
Tab(
text: 'Basic',
),
Tab(
text: 'Advanced',
)
],
),
),
),
),
),
),
);
Now you can handle the tab and click and change the Screen UI class on the tab click. for that create two new dart files for custom TabBar with the name of IncomingPage and OutgoingPage.
body: TabBarView(
children: [
IncomingPage(),
OutgoingPage(),
],
),
Flutter dart – How to make a custom TabBar Full Souce code
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'IncomingPage.dart';
import 'OutgoingPage.dart';
class StatisticScreenView extends StatefulWidget {
const StatisticScreenView({Key? key}) : super(key: key);
@override
_StatisticScreenViewState createState() => _StatisticScreenViewState();
}
class _StatisticScreenViewState extends State<StatisticScreenView> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
bottom: PreferredSize(
preferredSize: Size.fromHeight(
AppBar().preferredSize.height),
child: Container(
height: 60,
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 5,
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
10,
),
color: Colors.grey[200],
),
child: TabBar(
labelColor: Colors.white,
unselectedLabelColor: Colors.black,
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(
10,
),
color: Colors.pink,
),
tabs: const [
Tab(
text: 'Basic',
),
Tab(
text: 'Advanced',
)
],
),
),
),
),
),
body: TabBarView(
children: [
IncomingPage(),
OutgoingPage(),
],
),
),
);
}
}
Create IncomingPage. dart file add code below
import 'package:flutter/material.dart';
class IncomingPage extends StatefulWidget {
@override
_IncomingPageState createState() => _IncomingPageState();
}
class _IncomingPageState extends State<IncomingPage> {
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Text("Basic")
),
);
}
}
Create OutgoingPage. dart the file and add the code below.
import 'package:flutter/material.dart';
class OutgoingPage extends StatefulWidget {
@override
_OutgoingPageState createState() => _OutgoingPageState();
}
class _OutgoingPageState extends State<OutgoingPage> {
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Text("Advanced")
),
);
}
}
Read More:-
