AppBar Widget is the main widget in any flutter app. It sits at the top of the application and mostly controls major action items. So in today’s article, we will go through how to create a Custom AppBar Widget.
How to Create a Custom AppBar Widget?
User can create a custom widget using the below code snippet:
Widget build(BuildContext context) { return new Scaffold( appBar: setAppBar(), body: new Container() // add rest of the UI ); } Widget setAppBar() { return new AppBar( //backgroundColor: Colors.blue, //automaticallyImplyLeading: true elevation: 0.0, // for elevation titleSpacing: 0.0, // if you want remove title spacing with back button title: UtilCommonWidget.addTextMedium('About US', Colors.white, 20.0, 1), actions: <Widget>[ addAppBarActionWidgetProfile(icon, 30.0, 30.0, 15.0) // add your custom action widget ],//Action icon search as search icon, notification icon leading: new Material( //Custom leading icon, such as back icon or other icon color: Colors.transparent, child: new InkWell( onTap: () { Navigator.of(context).pop(); }, splashColor: UniQueryColors.colorGradientEnd.withOpacity(.5), child: new Container( padding: const EdgeInsets.fromLTRB(12.0, 16.0, 16.0, 16.0), child: UtilCommonWidget.addImage(Constant.iconBack, 19.0, 10.0)) ), ) ); }
Custom AppBar widget will look like the below:
import 'package:flutter/material.dart'; class CustomAppBar extends StatefulWidget implements PreferredSizeWidget { CustomAppBar({Key key}) : preferredSize = Size.fromHeight(kToolbarHeight), super(key: key); @override final Size preferredSize; // default is 56.0 @override _CustomAppBarState createState() => _CustomAppBarState(); } class _CustomAppBarState extends State<CustomAppBar>{ @override Widget build(BuildContext context) { return AppBar( title: Text("Sample App Bar") ); } }
You can also give try to below code snippet
class AppBars extends AppBar { AppBars():super( iconTheme: IconThemeData( color: Colors.black, //change your color here ), backgroundColor: Colors.white, title: Text( "this is app bar", style: TextStyle(color: Color(Constant.colorBlack)), ), elevation: 0.0, automaticallyImplyLeading: false, actions: <Widget>[ IconButton( icon: Icon(Icons.notifications), onPressed: () => null, ), IconButton( icon: Icon(Icons.person), onPressed: () => null, ), ], ); }
AppBar implements the class PreferredSize Widget which means that AppBar must have a preferred size.
The preferred size variable is overridden as it is implemented from PreferredSizeWidget.
So here is how you can set the height of your wish.
class CustomAppBar extends StatefulWidget implements PreferredSizeWidget { CustomAppBar({Key key}) : preferredSize = Size.fromHeight(60.0), super(key: key); @override final Size preferredSize; @override _CustomAppBarState createState() => _CustomAppBarState(); } class _CustomAppBarState extends State<CustomAppBar>{ @override Widget build(BuildContext context) { return AppBar( title: Text('App Bar'), actions: <Widget>[ IconButton( icon: Icon(Icons.add, color: Colors.white,), ), ], ); } }
Use it like a below:
class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return new Scaffold( appBar: CustomAppBar() ); }
So the above code will give us output like this:

We can extend AppBar with your widget. Then pass the parameters to the superclass like below:
class CustomAppBar extends AppBar { CustomAppBar() : super( title: Text('MyApp'), actions: [ IconButton(icon: Icon(Icons.search), onPressed: () {}), ], ); }
Conclusion:
Thanks for being with us on a Flutter Journey !!!
So in this article, we have been through how to create a custom AppBar Widget in flutter.
Keep Learning !!! Keep Fluttering !!!
Do let us know in the comments below if you have any doubts regarding Flutter Development!! We’d love to assist you 馃檪
FlutterAgency.com聽is our portal Platform dedicated to Flutter Technology and聽Flutter Developers. The portal is full of cool resources from Flutter like聽Flutter Widget聽Guide,聽Flutter Projects,聽Code libs聽and etc.
FlutterAgency.com is one of the most popular online portals dedicated to聽Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of聽Flutter.