Flutter – Set the Height of the AppBar
In Flutter, the AppBar widget has a default height of 56 logical pixels. If you want to increase the height of the AppBar, you can use the toolbarHeight property.
How to Use?
Dart
AppBar( toolbarHeight: 120, title: // tittle of the appbar ), |
Step By Step Implementation
Step 1: Create a New Project in Android Studio or in vs code
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the material package
A material package gives us the essential functions and Parameters, Now call the runApp method that needs an Application in the main function.
import 'package:flutter/material.dart'; void main() { runApp(RunMyApp()); }
In the above code, runApp method calls the class RunMyApp, Now we have to create it.
Step 3: Creating Stateless Widget
Now we have to make a stateless widget because our application does not go to change its state and then return the MaterialApp widget which allows us the set the title and theme and many more of the application.
Shortcut: For creating a stateless or Stateful widget, you can create a stateless or stateful widget by just typing three alphabets ‘stl’ and you can see a stateless widget and then hit enter.
class RunMyApp extends StatelessWidget { const RunMyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData(primarySwatch: Colors.green), home: ); } }
Step 4: Working with Scaffold Widget
Give the home property and there can be a scaffold widget with AppBar and body property. AppBar allows us to give the title of AppBar, color, leading, and trailing icon.
Scaffold( appBar: AppBar( toolbarHeight: 100, title: Text('Custom Height of the AppBar'), ), ),
In the code above, the toolbarHeight property is set to 100 (default 56 logical pixels), which will increase the height of the AppBar to 80 logical pixels.
Note: Increasing the height of the AppBar may affect the layout of your app, so be sure to test your app on different devices and screen sizes to ensure that it looks good on all of them.
Code Example
Dart
import 'package:flutter/material.dart' ; void main() { runApp(RunMyApp()); } class RunMyApp extends StatelessWidget { const RunMyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false , theme: ThemeData(primarySwatch: Colors.green), home: Scaffold( appBar: AppBar( toolbarHeight: 100, title: Text( 'Custom Height of the AppBar' ), ), ), ); } } |
Output
Here, you will see the AppBar height is increased by 100 logical pixels(default 56 logical pixels).
Contact Us