Appbar Size Flutter: Setting the Height

When developing an app using flutter we mostly use the AppBar widget which can be used for navigation, etc. In this article, we will use different ways to set the flutter AppBar size.

toolbarHeight Property

The AppBar widget has toolbarHeight property which can be used to set the height of the app bar.

AppBar(
   toolbarHeight: 120,
),

In the above code, we change the height of the AppBar to 120 by using toolbarHeight property.

preferredSize Property

The AppBar Widget has a type of PreferredSizeWidget which can be used to customize the app bar size.

PreferredSize(
   preferredSize: Size.fromHeight(120),
   child: AppBar(),
),

In the above code, we wrap the AppBar widget using the PreferredSize widget which has preferredSize property that can be used to change the height of the AppBar.

Custom Widget

Most developers create a separate widget for the app bar because the same app bar is being used on the different screens of the app.

Scaffold(
   appBar: CustomAppBarWidget(),
),

In the below code, we created our own app bar widget CustomAppBarWidget().

class CustomAppBarWidget extends StatelessWidget implements PreferredSizeWidget {
const CustomAppBarWidget({
      super.key,
});

@override
Widget build(BuildContext context) {
       return AppBar();
}

@override
Size get preferredSize => Size.fromHeight(100);
}

We access the preferredSize method to set the height of the app bar to 100 of the class PreferredSizeWidget with the help of the implements keyword that can be used to access the interface of the class.

Conclusion

We discussed the 3 ways for changing the size of the app bar in a flutter, you can use the one that best satisfies your need.