DefaultTabIndicator In Flutter :
there are many DefaultTabIndicator in flutter. today We will Discuss about All The DefaultIndicatorTab available In Flutter.
Screenshot 1 :
Screenshot 2 :
DefaultTabIndicator In Flutter :
import 'package:flutter/material.dart';
import 'tabbar_animation.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: ''),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.redAccent,
elevation: 0,
bottom: TabBar(
labelColor: Colors.redAccent,
unselectedLabelColor: Colors.white,
indicatorSize: TabBarIndicatorSize.label,
indicator: ShapeDecoration(
color: Colors.white,
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(
color: Colors.white,
))),
/*BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10)),
color: Colors.white),*/
tabs: [
Tab(
child: Align(
alignment: Alignment.center,
child: Text("Flutter"),
),
),
Tab(
child: Align(
alignment: Alignment.center,
child: Text("Java"),
),
),
Tab(
child: Align(
alignment: Alignment.center,
child: Text("Android"),
),
),
]),
),
body: TabBarView(children: [
Icon(Icons.apps),
Icon(Icons.movie),
Icon(Icons.games),
]),
)),
);
}
}
Round Corners
In here we are going to add a round corner style to the tab indicator. First of all, I will give a brief description of the param which we are going to modify.
Round corner style can be done by adding BoxDecoration with borderRadius 50.
Then I will add a red colour border to each tab headers. When you selected the tab It will fill with the red colour. If you are not interested in the border, you can just remove the border adding the part and keep it simple.
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),
]),
))
Round Corners with Gradient
In here I removed the style which I was added to each tab. After that added a gradient to BoxDecoration. In here I used LinearGradient with two colours. You can change the gradient-based on your preferences.
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),
]),
)
)
Diamond Style
Diamond tab style can be done by adding ShapeDecoration with BeveledRectangleBorder for the shape parameter.BeveledRectangleBorder will allow you to add flatten corner instead of round corners.
DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0,
bottom: TabBar(
unselectedLabelColor: Colors.redAccent,
indicatorPadding: EdgeInsets.only(left: 30, right: 30),
indicator: ShapeDecoration(
color: Colors.redAccent,
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(
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),
]),
)
)
Diamond Style 2
Likewise, by changing the borderRadius of the BeveledRectangleBorder, you can achieve different styles. In here I used borderRadius as 20. You can try different styles by changing this borderRadius value.
DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0,
bottom: TabBar(
unselectedLabelColor: Colors.redAccent,
indicatorPadding: EdgeInsets.only(left: 30, right: 30),
indicator: ShapeDecoration(
color: Colors.redAccent,
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(20),
side: BorderSide(
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),
]),
)
)
The flutter tutorial is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application
For more information about Flutter. visit www.fluttertutorial.in
