How to Create a Custom AppBar Widget?

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.