Flutter : Can anybody help making custom TabController in flutter? - dart

Question

I am making an app using flutter(dart). I need to make a tab controller with gradient background colour. I have used the DefaultTabController but couldn't get the way to add decoration or any gradient for App bar.Please find my code below:
import 'package:flutter/material.dart';
import 'package:vtech/CustomAppBar.dart';
class Policy extends StatefulWidget {
#override
_PolicyState createState() => _PolicyState();
}
class _PolicyState extends State<Policy> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.pink,
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
title: Center(child:Text('POLICY')),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
),
);
}
}

Answer 1

The AppBar and TabBar widgets do not allow to set a gradient, just a color.
To achieve what you need you can create a custom widget GradientAppBar or GradientTabBar built with a Stack that integrates a Container with a gradient and an AppBar or TabBar.
You create the GradientAppBar with parameters that would go to the Container and to the AppBar itself.
Here is a working example for Gradient AppBar. Below is a similar example just for the TabBar.
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new Policy(),
);
}
}
class Policy extends StatefulWidget {
#override
_PolicyState createState() => _PolicyState();
}
class _PolicyState extends State<Policy> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: GradientAppBar(
colors: [Colors.white, Colors.black],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
elevation: 4.0,
bottom: TabBar(
indicatorColor: Colors.white,
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
title: Center(child: Text('POLICY')),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
),
);
}
}
class GradientAppBar extends StatefulWidget implements PreferredSizeWidget {
// Gradiente properties
final AlignmentGeometry begin;
final AlignmentGeometry end;
final List<Color> colors;
// Material property
final double elevation;
// AppBar properties - Add all you need to change
final Widget title;
final PreferredSizeWidget bottom;
#override
final Size preferredSize;
GradientAppBar({
Key key,
#required this.colors,
this.begin = Alignment.centerLeft,
this.end = Alignment.centerRight,
this.elevation,
this.title,
this.bottom,
}) : preferredSize = new Size.fromHeight(
kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0)),
super(key: key); //appBar.preferredSize;
#override
_GradientAppBarState createState() => _GradientAppBarState();
}
class _GradientAppBarState extends State<GradientAppBar> {
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Material(
elevation: widget.elevation,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: widget.begin,
end: widget.end,
colors: widget.colors,
)),
),
),
AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
bottom: widget.bottom,
title: widget.title,
),
],
);
}
}
And here the example for the gradient TabBar.
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new Policy(),
);
}
}
class Policy extends StatefulWidget {
#override
_PolicyState createState() => _PolicyState();
}
class _PolicyState extends State<Policy> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: GradientTabBar(
colors: [Theme.of(context).primaryColor, Colors.green],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
tabBar: TabBar(
//indicatorColor: Colors.white,
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
title: Center(child: Text('POLICY')),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
),
);
}
}
class GradientTabBar extends StatefulWidget implements PreferredSizeWidget {
// Gradiente properties
final AlignmentGeometry begin;
final AlignmentGeometry end;
final List<Color> colors;
final TabBar tabBar;
GradientTabBar({
Key key,
#required this.colors,
this.begin = Alignment.centerLeft,
this.end = Alignment.centerRight,
this.tabBar,
}) : super(key: key);
#override
Size get preferredSize => tabBar.preferredSize;
#override
_GradientTabBarState createState() => _GradientTabBarState();
}
class _GradientTabBarState extends State<GradientTabBar> {
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
height: widget.preferredSize.height,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: widget.begin,
end: widget.end,
colors: widget.colors,
)),
),
widget.tabBar,
],
);
}
}

Answer 2

you can try this
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.red,
Colors.blue
],
),
),
),
In Appbar
appBar: AppBar(
title: Center(child: Text("Add Student",),),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
darkblue,
darkpurple
],
),
),
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.account_circle,color: Colors.white,),),
],
),