Quick Tip – Custom AppBar height with toolbarHeight in Flutter

What is toolbarHeight in Flutter?

In Flutter, the toolbarHeight is a property of the AppBar class that specifies the height of the app bar in logical pixels. The app bar is a customizable bar that appears at the top of the screen and can contain various actions and navigation options.

Here is an example of how you might use toolbarHeight to specify the height of an app bar:

AppBar(
  toolbarHeight: 120, // Set this height
  title: Text('flutterassets.com'),
),

The value of toolbarHeight must be a double. By default, the toolbarHeight is set to kToolbarHeight, which is a constant defined in the Flutter framework with a value of 56.0 logical pixels. You can customize the value of toolbarHeight to suit the needs of your app.

Keep in mind that the toolbarHeight property only affects the height of the app bar, and not its width. To control the width of the app bar, you can use the preferredSize property.

Use toolbarHeight to change AppBar size in Flutter

The toolbarHeight property of the AppBar class in Flutter allows you to customize the height of the app bar. By default, the app bar has a height of 56.0 logical pixels, but you can use the toolbarHeight property to specify a different height.

There are a few reasons why you might want to use the toolbarHeight property to customize the height of the app bar:

1. To accommodate more actions or navigation options: If you have a lot of actions or navigation options that you want to include in the app bar, a higher app bar might be necessary to provide enough space for all of these elements.
2. To create a visual hierarchy: A higher app bar can help create a visual hierarchy in your app, making it more obvious to the user that the app bar is a distinct and important part of the interface.
3. To match the design of the app: In some cases, a higher app bar might be necessary to match the design of the app. For example, if you are creating an app with a large, prominent header image, a higher app bar might be necessary to ensure that the app bar and the header image are properly aligned.

Using the toolbarHeight property allows you to easily customize the size of the app bar to suit the needs of your app. Keep in mind that you should consider the design and layout of your app, as well as the available screen space, when deciding on an appropriate value for the toolbarHeight property.

You can read more about AppBar in this post: Flutter Basics – How to Customize AppBar in Flutter

appBar: AppBar(
        toolbarHeight: 120, // Set this height
        flexibleSpace: SafeArea(
          child: Container(
            color: Colors.orange,
            child: Column(
              children: [
                Icon(Icons.insert_emoticon,size: 30.0, color: Colors.blue,),
                Icon(Icons.insert_emoticon,size: 30.0, color: Colors.green,),
                Icon(Icons.insert_emoticon,size: 30.0, color: Colors.red,),
                Icon(Icons.insert_emoticon,size: 30.0, color: Colors.white,),
              ],
            ),
          ),
        ),
      ),

appBar: AppBar(
        toolbarHeight: 120, // Set this height
        title: Text('Title'),
      ),

Flutter AppBar with two rows of action buttons

To create a Flutter app bar with two rows of action buttons, arranged in a single column, you can use the actions property of the AppBar class to specify a list of widgets to be displayed as action buttons. You can then use a Column widget and the Row widget to create two rows of action buttons.

Here is an example of how you might create a Flutter app bar with two rows of action buttons, arranged in a single column, and a toolbarHeight of 100.0 logical pixels:

AppBar(
  toolbarHeight: 100.0, // Custom toolbar height
  title: Column(
    children: [
      Text('flutterassets.com'),
      Text('subtitle'),
    ],
  ),
  actions: [
    Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () { /* Search action */ },
            ),
            IconButton(
              icon: Icon(Icons.more_vert),
              onPressed: () { /* More options action */ },
            ),
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: () { /* Settings action */ },
            ),
          ],
        ),
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            IconButton(
              icon: Icon(Icons.favorite),
              onPressed: () { /* Favorite action */ },
            ),
            IconButton(
              icon: Icon(Icons.share),
              onPressed: () { /* Share action */ },
            ),
            IconButton(
              icon: Icon(Icons.bookmark),
              onPressed: () { /* Bookmark action */ },
            ),
          ],
        ),
      ],
    ),
  ],
),

In this example, the actions property is set to a single Column widget containing two Row widgets, each with three action buttons. This creates a two-row app bar with six action buttons in total, arranged in a single column. You can customize the action buttons to suit the needs of your app.

Keep in mind that you might need to adjust the toolbarHeight property of the app bar if you have a large number of action buttons, in order to ensure that there is enough space