How to Get AppBar Height In Flutter ?

· 2 min read
How to Get AppBar Height In Flutter
How to Get AppBar Height In Flutter

AppBar Widget is the main widget in any flutter app. It sits at the top of the application and mostly controls major action items. In today’s article, we will learn about how to get AppBar Height in Flutter ??

How to Get AppBar Height In Flutter?

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 preferred size:

double height = appBar.preferredSize.height;

You can use this height to reduce the screen height.

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

You can use this :

var height = AppBar().preferredSize.height;

Just watch in AppBar

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

So now, You can get the height of AppBar by using:

double height = appBar.preferredSize.height;

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);
}

Conclusion:

So now we hope you learned from this article !!! you can always let us know in the comments if you are still confused about something in flutter???

Keep Learning!!! Keep fluttering!!!

So in this article, we have been through how to get AppBar Height in flutter???

Do not forget to drop your valuable suggestions/feedback. We would love to assist you.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply