App Bar Flutter With Customization
This article explains you how to customize app bar in flutter applications. App Bar is a widget which contains toolbar in flutter applications.
App Bar displays different widgets such as title, leading, actions etc. We can also set bottom property to display tabs in app bar in flutter applications.
title is main widget in app bar. We need to give text widget to this title parameter. leading is a widget which is displayed before the title. actions widgets are displayed after title widget. We can perform operations using these actions widgets.
App Bar is displayed at the top of the screen. It is auto fixed height widget. We can display app bar widget using appBar property of scaffold widget.
App Bar Flutter Customization
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘AppBar Sample’)),
body: SingleChildScrollView(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 15,
),
RaisedButton(
textColor: Colors.white,
color: Colors.red,
child: Text(“Simple”, style: TextStyle(fontSize: 22)),
onPressed: () {
Navigator.push( context, MaterialPageRoute(builder: (context) => MySimpleAppBar()));
},
),
SizedBox(
height: 15,
),
RaisedButton(
textColor: Colors.white,
color: Colors.deepPurple,
child: Text(“Center Title”, style: TextStyle(fontSize: 22)),
onPressed: () {
Navigator.push( context, MaterialPageRoute( builder: (context) => MyAppBarCenterTitle()));
},
),
SizedBox(
height: 15,
),
RaisedButton(
textColor: Colors.white,
color: Colors.amberAccent,
child: Text(“BG Color”, style: TextStyle(fontSize: 22)),
onPressed: () {
Navigator.push( context, MaterialPageRoute( builder: (context) => MyAppBarBGColor()));
},
),
SizedBox(
height: 15,
),
RaisedButton(
textColor: Colors.white,
color: Colors.blue,
child: Text(“Actions”, style: TextStyle(fontSize: 22)),
onPressed: () {
Navigator.push( context, MaterialPageRoute(builder: (context) => MyAppBarActions()));
},
),
SizedBox(
height: 15,
),
RaisedButton(
textColor: Colors.white,
color: Colors.green,
child: Text(“Leading”, style: TextStyle(fontSize: 22)),
onPressed: () {
Navigator.push( context, MaterialPageRoute( builder: (context) => MyAppBarLeading()));
},
),
SizedBox(
height: 15,
),
RaisedButton(
textColor: Colors.white,
color: Colors.pink,
child: Text(“Brightness”, style: TextStyle(fontSize: 22)),
onPressed: () {
Navigator.push( context, MaterialPageRoute(builder: (context) => MyAppBarBrightness()));
},
),
SizedBox(
height: 15,
),
RaisedButton(
textColor: Colors.white,
color: Colors.deepOrange,
child: Text(“Elevation”, style: TextStyle(fontSize: 22)),
onPressed: () {
Navigator.push( context, MaterialPageRoute(builder: (context) => MyAppBarElevation()));
},
),
SizedBox(
height: 15,
),
RaisedButton(
textColor: Colors.white,
color: Colors.teal,
child: Text(“Shape”, style: TextStyle(fontSize: 22)),
onPressed: () {
Navigator.push( context, MaterialPageRoute( builder: (context) => MyAppBarShape()));
},
),
SizedBox(
height: 15,
),
],
),
),
),
);
}
}
Simple App Bar Flutter
AppBar widget is part of Scaffold widget. To create app bar, we have to integrate it in Scaffold widget. We can implement app bar as below.
appBar: AppBar(
title: Text(‘CodingWithDhrumil’),
),
);
Center Title
Normally title is displayed on left side in app bar. To align title to center, we need to use centerTitle property of appBar widget.
appBar: AppBar(
title: Text(‘CodingWithDhrumil’),
centerTitle: true,
),
);
Change Background Color
We can also change background color of app bar widget. We need to just give value of Colors class.
appBar: AppBar(
title: Text(‘CodingWithDhrumil’),
backgroundColor: Colors.pinkAccent,
),
);
App Bar Flutter With Actions
We can perform some actions in flutter using actions widget in app bar. If we want to display more items then we can display more icon in actions widget to open menu.
appBar: AppBar(
title: Text(‘CodingWithDhrumil’),
actions: <Widget>[
Icon(Icons.search),
SizedBox(width: 15),
Icon(Icons.more_vert),
],
),
);
Leading in App Bar Flutter
We can create menu in app bar using leading widget. It is displayed before the title of the app bar. We can display in flutter applications as below.
appBar: AppBar(
title: Text(‘CodingWithDhrumil’),
leading: Icon(Icons.menu),
),
);
Change Brightness
appBar: AppBar(
title: Text(‘CodingWithDhrumil’),
brightness: Brightness.dark,
),
);
Change Elevation
appBar: AppBar(
title: Text(‘CodingWithDhrumil’),
elevation: 50,
),
);
Change Shape of App Bar Flutter
child: Scaffold(
appBar: AppBar(
title: Text(‘CodingWithDhrumil’),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(50)),
),
));
Pingback: SliverAppBar Flutter Example - CodingWithDhrumil