Quick Tip – Custom AppBar height with PreferedSize in Flutter

What is an AppBar in Flutter?

An AppBar in Flutter is a top container that displays the app’s title, actions, and other important widgets. It’s typically located at the top of the app, and it’s used to display important information and provide easy access to key actions.

appBar: AppBar(
  title: Text('flutterassets.com'),
  actions: [
    IconButton(
      icon: Icon(Icons.search), // displays a search icon
      onPressed: () {
        // do something when the icon is pressed
      },
    ),
  ],
),

The AppBar widget supports many other features, such as the ability to set the background colour, add a leading widget (such as a back button), and display a bottom widget (such as a tab bar).

What is the PreferedSize widget in Flutter?

PreferredSize is a widget in Flutter that allows you to set the preferred size of a widget. It’s commonly used to set the size of the AppBar, but it can also be used with other widgets that support the preferredSize property.

Here’s an example of how you can use the PreferredSize widget to set the size of an AppBar:

appBar: AppBar(
  title: Text('flutterassets.com'),
  bottom: PreferredSize(
    preferredSize: Size.fromHeight(50.0),
    child: Container(
      height: 50,
      color: Colors.yellow,
    ),
  ),
),

PreferredSize(
  preferredSize: Size.fromHeight(40.0),
  child: AppBar(
    title: Text('flutterassets.com'),
  ),
),

Use PreferedSize to change AppBar size in Flutter

To change the height of the AppBar we use PreferedSize. The examples below show how to use PreferedSize.

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

appBar: PreferredSize(
        preferredSize: Size.fromHeight(100.0),
        child: AppBar(
          title: Text("Title"),
        ),
      ),

This code creates an AppBar with a preferred size of 100 pixels in height. The PreferredSize widget allows you to specify the preferred size of the AppBar, which is then used by the parent widget (in this case, the Scaffold) to layout the AppBar. The code below will create AppBar with a preferred size of 30 pixels in height.

appBar: PreferredSize(
        preferredSize: Size.fromHeight(30.0),
        child: AppBar(
          title: Text("Title"),
        ),
      ),

Use the flexibleSpace and Image in Flutter.

The flexibleSpace property allows you to specify a widget that will be displayed behind the AppBar and will resize itself based on the scroll offset of the app.

You can read more about the images in Flutter in this post: Flutter Basics – How to use an image in Flutter

appBar: PreferredSize(
          preferredSize: Size.fromHeight(100.0),
          child: AppBar(
            automaticallyImplyLeading: false, // hides leading widget
            flexibleSpace: Image.asset('assets/FlutterAssets_logo.png',
              fit: BoxFit.fitHeight,
            ),
          )
      ),

appBar: PreferredSize(
        preferredSize: Size(100, 70), //width and height
        // The size the AppBar would prefer if there were no other constraints.
        child: SafeArea(
          child: Container(
            height: 100,
            color: Colors.redAccent,
            child: Center(child: Text('TITLE',
              style: TextStyle(
                fontWeight: FontWeight.w900,
                fontSize: 50,
                color: Colors.white
              ),
            ),
            ),
          ),
        ),
      ),

AppBar(
  title: Text('My App'),
  flexibleSpace: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [Colors.blue, Colors.purple],
      ),
    ),
  ),
  leading: Image.asset(
    'assets/images/logo.png',
    width: 30,
    height: 30,
  ),
),

The flexibleSpace property allows you to specify a widget that will be displayed behind the AppBar and will resize itself based on the scroll offset of the app. In this example, we’re using a Container widget with a BoxDecoration that specifies a gradient background.

The leading property allows you to specify a widget that will be displayed in the leading edge of the AppBar, typically used for a back button or a menu button. In this example, we’re using an Image widget to display an image.

Note that you can customize the AppBar further by using other properties such as backgroundColor, elevation, and actions, among others. For more information about the AppBar widget, you can check out the official Flutter documentation here.