How to Set Height of appbar in Flutter ??

How to Set Height of appbar in Flutter ??

Different Applications have different types of AppBar Widget. Generally, it sits at the top of the application and mostly controls major action items. AppBar Widget or top AppBars is a collection of widgets located at the top of the app, for wrapping our app’s title, icon, and action link. In this article, we will walk through How to Set Height of appbar in Flutter.

How to Set Height of appbar in Flutter ??

Users can make use of PreferredSize class. Users can set the desired height using the below code snippet.

appBar: PreferredSize(
         preferredSize: Size.fromHeight(50.0), // here the desired height
         child: AppBar(
           // ...
         )
       ),

You can use PreferredSize and flexibleSpace for it like below:

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

This way users can keep the elevation of AppBar Widget for keeping its shadow visible and have custom height.

Users can also create their own Custom AppBar widget with a Custom Height like a below:

Widget build(BuildContext context) {
    double barHeight = 80.0;
    final double statusbarHeight = MediaQuery.of(context).padding.top;
    return Scaffold(
      body: Column(
        children: [
          Container(
            padding: EdgeInsets.only(top: statusbarHeight),
            height: statusbarHeight + barHeight,
            color: Colors.black12,
            child: const Center(
              child: Text(
                "Custom App Bar",
                style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
              ),
            ),
          ),
        ],
      ),
    );
}

Output:

Custom App Bar Final Output

So stay connected for articles like flutter get appbar height, flutter custom appbar, flutter appbar flexible space, appbar shape flutter, flutter appbar vertical center, etc.

Conclusion:

So in this article, we have been through How to Set Height of appbar in flutter.

That’s it for today. Hope you got what you were looking for… 🙂

Still, need support for Flutter Development? We Would love to assist you with Flutter.

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 Guide, Flutter Projects, Code 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.