Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

How to Set Height of AppBar on Flutter

In this example, we are going to show you the easiest way to set the height of AppBar on Flutter app. We will use PreferredSize() widget to set the Height of AppBar. See the example below:

How to Set Height of AppBar Widget on Flutter:

PreferredSize( //wrap with PreferredSize
      preferredSize: Size.fromHeight(20), //height of appbar
      child: AppBar(
        title:Text("AppBar Height"), //appbar title
        backgroundColor: Colors.redAccent //appbar background color
      )
)

Full Code Example:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp( 
      home: MyApp()
    )
  );
}

class MyApp extends StatefulWidget{
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: PreferredSize( //wrap with PreferredSize
                preferredSize: Size.fromHeight(20), //height of appbar
                child: AppBar(
                  title:Text("AppBar Height"), //appbar title
                  backgroundColor: Colors.redAccent //appbar background color
                )
          ),
          body: Container(
            alignment:Alignment.topCenter,
            padding: EdgeInsets.all(35),
             child: Text("AppBar Height")
          )
      );
  }
}

Output Screenshot:

In this way, you can set AppBar Height in Flutter App.

No any Comments on this Article


Please Wait...