How to Set Height of appbar in Flutter ??

3 min read
How to setup Height of a AppBar in Flutter
How to setup Height of a 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鈥檚 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 Widget with a Custom Height like a below:

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

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鈥檚 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.

Leave a Reply