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() )
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 Default Height Customization Source Code
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.
Εxcellent article! We are linkіng to this particularly great content on our
website. Keep uⲣ the great ѡrіting.
Do visit ny other posts as well. Thanks for the support.