194

How can I simply set the height of the AppBar in Flutter?

The title of the bar should be staying centered vertically (in that AppBar).

3
  • 2
    @Mans It's about 'getting' the height of the AppBar, not 'setting' it. Jun 28, 2018 at 19:57
  • 1
    Did you took a look at this? You could also create your own widget as an AppBar and set it's height.
    – Bostrot
    Jun 28, 2018 at 21:26
  • @Leviathlon my bad. check my answer for (hopefully) some better help
    – Mans
    Jun 29, 2018 at 15:15

16 Answers 16

306

You can use PreferredSize:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(50.0), // here the desired height
          child: AppBar(
            // ...
          )
        ),
        body: // ...
      )
    );
  }
}
9
  • 8
    This increases the size of the AppBar, but doesn't centre the text. Sep 22, 2018 at 7:29
  • 5
    You can use centerTitle property to center it.
    – CopsOnRoad
    Sep 30, 2018 at 9:39
  • 17
    @CopsOnRoad That centers it horizontally but does not center it vertically.
    – Giraldi
    Apr 11, 2019 at 7:10
  • 1
    @CopsOnRoad I know, but I was just pointing out what the OP is asking for.
    – Giraldi
    Jul 26, 2019 at 14:15
  • 1
    @user482594 you can make a separate class for app bar and use it everywhere u want Jul 27, 2020 at 19:49
68

Use toolbarHeight:

enter image description here


There's no longer a need to use PreferredSize. Use toolbarHeight with flexibleSpace.

AppBar(
  toolbarHeight: 120, // Set this height
  flexibleSpace: Container(
    color: Colors.orange,
    child: Column(
      children: [
        Text('1'),
        Text('2'),
        Text('3'),
        Text('4'),
      ],
    ),
  ),
)
2
  • 2
    This should be the correct answer. It solves the problem directly from the widget's parameters. Mar 23 at 15:47
  • Much better solution. Far simpler.
    – SqueezeOJ
    yesterday
54

You can use PreferredSize and flexibleSpace for it:

appBar: PreferredSize(
  preferredSize: Size.fromHeight(100.0),
  child: AppBar(
    automaticallyImplyLeading: false, // hides leading widget
    flexibleSpace: SomeWidget(),
  )
),

This way you can keep the elevation of AppBar for keeping its shadow visible and have custom height, which is what I was just looking for. You do have to set the spacing in SomeWidget, though.

0
24

The easiest way is to use toolbarHeight property in your AppBar Example :

AppBar(
   title: Text('Flutter is great'),
   toolbarHeight: 100,
  ),

You can add flexibleSpace property in your appBar for more flexibility

Output:

enter image description here

For more controls , Use the PreferedSize widget to create your own appBar

Example :

appBar: PreferredSize(
     preferredSize: Size(100, 80), //width and height 
          // The size the AppBar would prefer if there were no other constraints.
     child: SafeArea(
       child: Container(
         height: 100,
         color: Colors.red,
         child: Center(child: Text('Fluter is great')),
       ),
     ),
),

Don't forget to use a SafeArea widget if you don't have a safeArea

Output :

enter image description here

1
  • I already provided toolBarHeight solution, second "For more controls , Use the PreferedSize " -- Not necessarily, toolbarHeight does the job well.
    – CopsOnRoad
    Jun 1, 2021 at 5:54
16

At the time of writing this, I was not aware of PreferredSize. Cinn's answer is better to achieve this.

You can create your own custom widget with a custom height:

import "package:flutter/material.dart";

class Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Column(children : <Widget>[new CustomAppBar("Custom App Bar"), new Container()],);
  }
}


class CustomAppBar extends StatelessWidget {

  final String title;
  final double barHeight = 50.0; // change this for different heights 

  CustomAppBar(this.title);

  @override
  Widget build(BuildContext context) {
    final double statusbarHeight = MediaQuery
        .of(context)
        .padding
        .top;

    return new Container(
      padding: new EdgeInsets.only(top: statusbarHeight),
      height: statusbarHeight + barHeight,
      child: new Center(
        child: new Text(
          title,
          style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}
13

In addition to @Cinn's answer, you can define a class like this

class MyAppBar extends AppBar with PreferredSizeWidget {
  @override
  get preferredSize => Size.fromHeight(50);

  MyAppBar({Key key, Widget title}) : super(
    key: key,
    title: title,
    // maybe other AppBar properties
  );
}

or this way

class MyAppBar extends PreferredSize {
  MyAppBar({Key key, Widget title}) : super(
    key: key,
    preferredSize: Size.fromHeight(50),
    child: AppBar(
      title: title,
      // maybe other AppBar properties
    ),
  );
}

and then use it instead of standard one

12

You can simply use toolbarHeight, as follows:

        appBar: AppBar(
        toolbarHeight: 70.0, // add this line
        centerTitle: true,   // add this line
        title: Text('your title'),
        ),

but if you have any actions the code above doesn't work as you want you can use this code

AppBar(
    centerTitle: true,
    title: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Stack(
        alignment: Alignment.center,
        children: [
          Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Chats', style: TextStyle(color:Colors.black),),
              Icon(Icons.add, color: Colors.black,),
            ],
          ),
          Align(
            alignment: Alignment.centerRight,
            child: Icon(Icons.add, color: Colors.black,),
          ),
        ],
      ),
    ),
  )
4
  • This only changes the height of the toolbar component. It won't work if you use other components too and want everything centered. Sep 13, 2022 at 18:47
  • Can you explain the problem that appeared to you when you used this method?
    – Omar
    Sep 14, 2022 at 19:38
  • If an AppBar contains "leading" or "actions" widgets, they are not affected by the toolbar height. Sep 15, 2022 at 18:18
  • Yes, you are right, but he did not mention that. I provided another solution that fits what you said
    – Omar
    Sep 16, 2022 at 19:45
5

Cinn's answer is great, but there's one thing wrong with it.

The PreferredSize widget will start immediately at the top of the screen, without accounting for the status bar, so some of its height will be shadowed by the status bar's height. This also accounts for the side notches.

The solution: Wrap the preferredSize's child with a SafeArea

appBar: PreferredSize(
  //Here is the preferred height.
  preferredSize: Size.fromHeight(50.0),
  child: SafeArea(
    child: AppBar(
      flexibleSpace: ...
    ),
  ),
),

If you don't wanna use the flexibleSpace property, then there's no need for all that, because the other properties of the AppBar will account for the status bar automatically.

2
  • but SafeArea is to reduce status bar height, yet you added it again with MediaQuery.of(context).padding.top? I think SafeArea is not needed here.
    – Ryde
    Jul 4, 2020 at 23:11
  • @Ryde The SafeArea is important so that the app bar doesn't overlap with the status bar, but the MediaQuery.of(context).padding.top is not needed actually. I've edited the answer, thanks.
    – Tayan
    Jul 5, 2020 at 21:38
5

simply use toolbar height ...

AppBar(
 title: Text("NASHIR'S APP"),
 toolbarHeight: 100,
),
1
  • Please ensure that your code has no syntax errors before submitting. Sep 16, 2021 at 0:48
3

You can use the toolbarHeight property of Appbar, it does exactly what you want.

2
class AppBarWidget extends StatelessWidget with PreferredSizeWidget {
  final String title;
  const AppBarWidget({Key? key, required this.title}) : super(key: key);

  @override`enter code here`
  Widget build(BuildContext context) {
   return AppBar(

  title: Text(title),
  centerTitle: true,
  elevation: 0,
  actions: [
    Padding(
      padding: const EdgeInsets.only(right: 10),
      child: IconButton(
        icon: const FaIcon(FontAwesomeIcons.language),
        onPressed: () {},
      ),
    ),
    
  ],
);
  }

 @override

  Size get preferredSize => const Size.fromHeight(40);// change
 }
1

You can use PreferredSize, by this use can set multiple children widget inside their

 appBar: PreferredSize(
    preferredSize: Size(MediaQuery.of(context).size.width, 75),
    child: Column(children: [
      AppBar(
        centerTitle: true,
        toolbarHeight: 74,
        backgroundColor: Colors.white,
        elevation: 0,
        title: Column(
          children: [
            Text(
              viewModel.headingText,
              style: sfDisplay16500Text,
            ),
            SizedBox(
              height: 8.0,
            ),
            Text(
              viewModel.url.toString(),
              style: sfDisplay10400LightBlackText,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            )
          ],
        ),
      ),
    ]),
  ),

or just directly use toolbarHeight property for only increase hight of appBar.

appBar: AppBar(
          title: Text('AppBar Texr'),
          toolbarHeight: 200.0, // double
        ), 
1

toolbarHeight Property

AppBar(
   toolbarHeight: 120,
),

Source: Appbar Size Flutter - AmmarJaved

0

Extend AppBar class and override preferredSize

class AppBarCustom extends AppBar {
  @override
  Size get preferredSize => Size.fromHeight(100);
}

then use it as you would use AppBar class

class MyHomePage extends StatelessWidget {
 @override
   Widget build(BuildContext context) {
     return MaterialApp(
       home: Scaffold(
       appBar: AppBarCustom(),
       body:
       ),
     );
   }
 }
0

This is simplest and easiest way to change appbar height without changing original theme.


class AppBarSectionView extends StatefulWidget implements PreferredSizeWidget {
 const AppBarSectionView({Key? key}) : super(key: key);

 @override
 _AppBarSectionViewState createState() => _AppBarSectionViewState();

 @override
 Size get preferredSize => const Size.fromHeight(kToolbarHeight + 20);
}

class _AppBarSectionViewState extends State<AppBarSectionView> {
 @override
 Widget build(BuildContext context) {
   return AppBar(
     toolbarHeight: widget.preferredSize.height ,
     backgroundColor: Colors.red,
     leading: const Icon(Icons.arrow_back_ios_rounded),
     title: const Text("This Is Title"),
   );
 }
}
-14

If you are in Visual Code, Ctrl + Click on AppBar function.

Widget demoPage() {
  AppBar appBar = AppBar(
    title: Text('Demo'),
  );
  return Scaffold(
    appBar: appBar,
    body: /*
    page body
    */,
  );
}

And edit this piece.

app_bar.dart will open and you can find 
    preferredSize = new Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0)),

Difference of height!

sample image

sample image

6
  • 1
    This is not what he asked for. He want the title to be vertically centered Jun 28, 2018 at 21:43
  • centerTitle:true; can be used to do it.
    – goops17
    Jun 29, 2018 at 13:39
  • vertical center, not horizontal Jun 29, 2018 at 13:44
  • So it doesn't read new height. I don't think tinkering source file like app_bar.dart, for changing it, would be good idea though.
    – goops17
    Jun 29, 2018 at 13:49
  • 8
    It's a very bad idea to ever edit sources of a framework. It will break your app if you update the framework.
    – Konstantin
    Oct 16, 2019 at 3:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.