Open In App

Flutter – Set the Height of the AppBar

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 15 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads