How To Easily Change 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.

Outline

What is Flutter Appbar Default Height?
Flutter Appbar Default Height
Change Flutter Appbar Default Height
Flutter Appbar Default Height Customization Source Code
Conclusion

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()
    )

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
    )

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.

I would also love to see you visit my other posts on Flutter app development, Flutter templates with complete source code, Flutter widgets, amazing Flutter books, Flutter web, custom Flutter animations and many more.

The below section has a list of some amazing topic links related to Flutter app development as well as other topics found on this site. For other articles, you can use the search function on this site or browse through this site’s drop-down menu. Thanks you for reading this post.

Flutter app articles you might like to read: flutter appbar title center, why learn react native framework, react native jobs, react native elements, unique flutter development. beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter basics for beginners, explanation of widgets in flutter, flutter architecture, flutter vs native, flutter sliverappbar customization, mobile app marketing tips, flutter bottom navigation bar, flutter appbar actions,

Share this post:

Comments (2)

Εxcellent article! We are linkіng to this particularly great content on our
website. Keep uⲣ the great ѡrіting.

ZeeshanAli says:
August 4, 2022 at 2:33 am
Do visit ny other posts as well. Thanks for the support.
Reply

Comments (2) on “How to Easily Change Flutter Appbar Default Height”

aimed says:
August 3, 2022 at 9:46 pm
Εxcellent article! We are linkіng to this particularly great content on our
website. Keep uⲣ the great ѡrіting.
1. ZeeshanAli says:
  August 4, 2022 at 2:33 am
  Do visit ny other posts as well. Thanks for the support.