How to get AppBar height in Flutter

Question

How can I get the height of an AppBar in Flutter?
I am using the MarialApp Widget ('package:flutter/material.dart').

I have the height of my Context and would like to deduct the height of the appbar.

final double height = MediaQuery.of(context).size.height;

You can get the height of any `Widget` in Flutter and `AppBar` is a regular `Widget`. — creativecreatorormaybenot, May 29 '18 at 20:25
@creativecreatorormaybenot OP asked HOW to get the height of the `AppBar` and you just said you can get height of the `AppBar`. — CopsOnRoad, May 25 '19 at 18:28

score 87 · Accepted Answer · edited Jun 08 '18 at 21:23

87

This is not an ideal way, I think, but it will work.

Firstly declare the AppBar widget that you will use in your Scaffold.

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

Now you can get the height of your appBar using its preferredSized:

double height = appBar.preferredSize.height;

You can use this height to reduce from the screen height.

final double height = MediaQuery.of(context).size.height;

edited Jun 08 '18 at 21:23

creativecreatorormaybenot

114,516
58
291
402

answered Jun 02 '18 at 08:23

ap14

4,393
1
15
30

4

I don't really get how to reduce appBar.preferredSize.height. Is that possible? thanks a lot. I tried to change the value of `kToolbarHeight`, but failed due to it's a const var. – sgon00 Jul 28 '18 at 02:41
I figured it out how to. By extending AppBar class `class MyAppBar extends AppBar` and then set `preferredSize` manually. – sgon00 Jul 28 '18 at 06:05
4

You can simply use `AppBar().preferredSize.height` If you find it to be neater. It will produce the same result as the above but will be creating another instance of AppBar – nonybrighto Sep 10 '18 at 14:09
27

bonus knowledge:- deduct the height of status bar by using MediaQuery.of(context).padding.top – Avnish Nishad Aug 03 '19 at 17:46
it worded nice. but can we know exactly how to get height from media query? – Prabudda Fernando Apr 19 '20 at 08:13
12

`appBar.preferredSize.height` = `kToolbarHeight ` = `56.0` but `MediaQuery.of(context).padding.top + kToolbarHeight` is exactly what I want to get. – capu Jul 06 '20 at 03:51
2

Just remember that if you are inside a scaffold, it might override MediaQuery.padding - so you'll just get 0. Instead use : Scaffold.of(context).appBarMaxHeight; credits go to @na2axl ! – Mr MT Aug 29 '21 at 15:01

score 64 · Answer 2 · edited Feb 08 '20 at 15:38

64

you can use this :

var height = AppBar().preferredSize.height;

this way is very sample and easy

edited Feb 08 '20 at 15:38

vitaminwater

6,934
3
19
23

answered Oct 01 '19 at 17:43

Majid Soltani

688
7
5

1

I like this answer. Thanks! – DYS Apr 13 '22 at 09:22

score 64 · Answer 3 · answered Apr 14 '20 at 13:32

64

There is no need to store the AppBar instance, or to create a dummy one to get the height. Also, AppBar.preferredSize will always return the same value of 56.0, which is the standard of Material Design, and this value will not be always usable for some cases (it lacks the height of the status bar for example).

Since an AppBar is surely used with a Scaffold, IMHO, the smarter way to get the real AppBar height (the distance between the top of the device and the top of the Scaffold body) is to use:

double height = Scaffold.of(context).appBarMaxHeight;

With this, the computed height will include (independently of the platform):

The status bar height
The app bar height
The bottom app bar widget height if any (ex. TabBar)

Hope this will help!

answered Apr 14 '20 at 13:32

na2axl

1,778
11
15

How does that help you get the bottom bar height as well? I don't think my bottom bar and app bar are the same height. – Graham Jun 24 '20 at 02:36
Hi @Graham, by "bottom app bar widget", I mean the widget who is placed at the bottom of the AppBar (with the Appbar.bottom property), a TabBar for exemple. I don't mean the BottomAppBar widget who is placed at the bottom of the Scaffold. – na2axl Jun 25 '20 at 13:57
For me this just returns 56 which is not the appbar+statusbar. – progNewbie Nov 05 '20 at 13:49
This is the only viable solution. Scaffold will override MediaQuery, and you will keep getting padding.top == 0 all the time. – Mr MT Aug 29 '21 at 15:02
May i ask how u reach scafold when ur building appBar as separate class/widget? – petras J Sep 17 '21 at 10:37

score 38 · Answer 4 · answered Aug 23 '19 at 11:05

38

There is a constant for the normal toolbar height: kToolbarHeight

answered Aug 23 '19 at 11:05

Daniel Illescas

5,346
3
17
23

4

it says 56, and it's too short – Alireza Akbari Jan 31 '20 at 16:06
1

@AlirezaAkbari Because you need to also deduct MediaQuery.of(context).padding.top thanks to Avnish Kumar – Abdelrahman Sherif Aug 25 '21 at 20:58

score 35 · Answer 5 · answered Jun 06 '20 at 21:03

35

Just watch in AppBar

MediaQuery.of(context).padding.top + kToolbarHeight

answered Jun 06 '20 at 21:03

Hellomik U

496
5
12

score 22 · Answer 6 · answered Oct 21 '20 at 07:17

22

Get body height:

MediaQuery.of(context).size.height - (MediaQuery.of(context).padding.top + kToolbarHeight)

I hope, this solution will also help you. Thanks to ask this question.

answered Oct 21 '20 at 07:17

Kamlesh

5,233
39
50

1

awesome, smart solution for get height of body. thankyou brother! – Alauddin Afif Cassandra Jul 09 '21 at 15:57
MediaQuery.of(context).padding.top -> it gives status bar height, kToolbarHeight -> it gives toolbar height, Thanks :) – Balaji Jun 30 '22 at 13:54

score 6 · Answer 7 · answered Jan 07 '20 at 14:49

AppBar has a fixed height of 56.

You should create your own appbar implementing PreferredSizeWidget

class TestAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text('TEST'),
      centerTitle: true,
    );
  }

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

score 2 · Answer 8 · answered Jun 29 '18 at 13:43

2

You can get height of AppBar by using:

double height = appBar.preferredSize.height;

Make sure you have declared AppBar widget.

answered Jun 29 '18 at 13:43

goops17

1,152
10
18

Jamirul islam · Answer 9 · 2022-09-06T11:43:40.587

1

AppBer hight increase . You use PreferredSize and set height

appBar: PreferredSize(
            preferredSize: Size.fromHeight(70),
            child: AppBar(
              child : Text(" ");
            ),
          ),

edited Sep 06 '22 at 11:43

answered Aug 28 '22 at 07:58

Jamirul islam

502
6
10

1

There's a lot of code in this answer. Please [edit] to explain how it answers the question. – General Grievance Sep 01 '22 at 20:45
`Size.fromHeight` is offered in 3 other solutions. – Trenton McKinney Sep 05 '22 at 17:45
This answer was reviewed in the [Low Quality Queue](https://stackoverflow.com/help/review-low-quality). Here are some guidelines for [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). Code only answers are **not considered good answers**, and are likely to be downvoted and/or deleted because they are **less useful** to a community of learners. It's only obvious to you. Explain what it does, and how it's different / **better** than existing answers. – Trenton McKinney Sep 05 '22 at 17:45

score 1 · Answer 10 · answered Sep 28 '22 at 16:16

Within the Widget build you need to get the height and width of a standard AppBar, then use the values to declare a Size object and then input the height and width as arguments.

You can do so as follows for a custom AppBar that I have called MyAppBar()

Widget build(BuildContext context) {
//get the height and width of a standard appBar to use with custom Appbar

var appBarWidth = MediaQuery.of(context).size.width;
var appBarHeight = AppBar().preferredSize.height;

return Scaffold(
  appBar: PreferredSize(
    preferredSize: Size(appBarWidth, appBarHeight),
    child: MyAppBar(),
  ),

score 1 · Answer 11 · answered May 25 '23 at 07:05

kToolbarHeight is default Appbar's height

kBottomNavigationBarHeight is default bottom navigation height

this will perfectly center align your progress indicator

    SizedBox(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height - (kToolbarHeight + kBottomNavigationBarHeight),
            child: const Center(child: CircularProgressIndicator()));

score 0 · Answer 12 · answered May 24 '20 at 13:52

0

You can use this:

  @override
  final Size preferredSize; // default is 56.0

  WidgetAppBar({@required this.appBarTitle, @required this.appBarColor, Key key}) : preferredSize = Size.fromHeight(40), super(key: key);

answered May 24 '20 at 13:52

Mehmet Emre Öz

1

Welcome to Stack Overflow! While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. [From Review](/review/late-answers/26217297) – double-beep May 24 '20 at 15:20

score 0 · Answer 13 · answered Aug 23 '21 at 06:46

0

This will give height of appbar or statusbar

var height = MediaQuery.of(context).padding.top;

However, this will work only in mobile devices, other devices don't have status bar

answered Aug 23 '21 at 06:46

Hardik Hirpara

2,594
20
34

score 0 · Answer 14 · answered Nov 25 '22 at 08:09

0

Use preferred size of appBar to get height of AppBar.

var appBarHeight = AppBar().preferredSize.height;

answered Nov 25 '22 at 08:09

Rajesh Kumar Sahil

39
3

score 0 · Answer 15 · answered Dec 05 '22 at 08:07

0

Value of AppBar height is 56.0 but

You can get with code

double height = AppBar().preferredSize.height;

answered Dec 05 '22 at 08:07

smebes

241
3
2

score -1 · Answer 16 · edited Jun 02 '19 at 17:25

Use preferred size

//defined as
Size preferredSize

preferred size is a size whose height is the sum of kToolbarHeight and the bottom widget's preferred height.

Scaffold uses this size to set its app bar's height.

It is defined like below in app bar class which implement PreferredSizeWidget

 preferredSize = new Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0))

a link for example ...

https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/app_bar.dart

How to get AppBar height in Flutter

16 Answers16

Linked