How to Easily Change Flutter Appbar Default Height

Flutter Appbar default Height

In this Flutter post, we both will be going through the customization of Flutter appbar default height. We will be using an easy Flutter example to understand how to change Flutter appbar default height. So let’s get right into it.

What is Flutter Appbar Default Height?

It is the height of the Flutter appbar widget that is automatically defined for it. We will first see what the Flutter appbar default height looks like and then we will customize its height with a practical Flutter example.

Flutter Appbar Default Height

To see the default height of Flutter appbar widget, we have to use the appbar constructor of Flutter scaffold and pass it the appbar widget. See the below code:

Scaffold(
      appBar: AppBar()
    )
Flutter Appbar Default Height
This is the Flutter appbar default height as seen in the above image. Let’s now change that default height of appbar.

Change Flutter Appbar Default Height

To change the default height of Flutter appbar, we have to use the toolbar height constructor of the Flutter appbar widget. It takes a double(decimal) value but passing it integer value will also work(automatically converted).

For demonstration, we will pass a value of 100 to that constructor. See below code:

AppBar(
      toolbarHeight: 100
    )
Flutter Appbar Height
You can see that we have successfully changed the Flutter appbar default height.
By following this guide, you can easily customize the height of Flutter appbar widget in your Flutter apps. You can now increase or decrease the height of Flutter appbar widget. Don’t hesitate to ask questions related to the customization of Flutter appbar height. I would glad to answer all.
The complete source code is given in the next section in which the custom Flutter appbar default height is implemented.

Flutter Appbar Default Height Customization Source Code

Flutter Appbar custom Height

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            appBar: AppBar(
      toolbarHeight: 100,
      centerTitle: true,
      title: Text('Flutter Appbar Custom Height'),
    )));
  }
}

Conclusion

In conclusion, I have covered how to practically change the Flutter appbar default height. Do feel welcome to leave a comment regarding this article. Thanks you for reading this post.

2 thoughts on “How to Easily Change Flutter Appbar Default Height”

Leave a Comment

Your email address will not be published.