Flutter change custom AppBar height

Question

I tried this link and it didn't work.

In this code when I try to change height of AppBar, but it doesn't any change.

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.transparent,
    body: Container(
      height: double.infinity,
        child: Column(
          children: <Widget>[
            PreferredSize(
              preferredSize: Size.fromHeight(150.0),
              child: AppBar(
                backgroundColor: Colors.white.withOpacity(0.9),
                title: Container(height: 150.0,),
              ),
            )
          ],
        )),
  );
}

Note: My AppBar(...) isn't used in appBar:

CopsOnRoad · Accepted Answer · 2021-01-03T08:34:47.553

Just use toolbarHeight:

appBar: AppBar(
  toolbarHeight: 150, // This is your height!
  title: Text('AppBar'),
)

However, if you don't want to use appBar property

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.transparent,
    body: Container(
      height: double.infinity,
      child: Column(
        children: <Widget>[
          Container(
            height: 150, // height of AppBar
            child: AppBar(
              backgroundColor: Colors.blue.withOpacity(0.9),
              title: Text("AppBar"),
            ),
          )
        ],
      ),
    ),
  );
}

Amit Prajapati · Answer 2 · 2019-08-29T08:53:14.007

1

   class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
            primarySwatch: Colors.blue,
        ),
        home: new Scaffold(
            body: Stack(
            children: <Widget>[
            Container(
                color: Colors.blue,
            ),
            new Positioned(
                top: 0.0,
                left: 0.0,
                right: 0.0,
                child: AppBar(
                title: Text('App Bar'),
                backgroundColor: Colors.green,
                ),
            ),
            ],
        )),
        );
    }
    }

edited Aug 29 '19 at 08:53

answered Aug 29 '19 at 08:32

Amit Prajapati

13,525
8
62
84

1

my `appBar` is not in `Scaffold` widget – DolDurma Aug 29 '19 at 08:40
1

could you read again my post carefully? my `appbar` is not into `Scaffold` widget – DolDurma Aug 29 '19 at 08:44
Whats problem to add appbar into Scaffold, why into body ? – Amit Prajapati Aug 29 '19 at 08:49
because of i want to use `AppBar` into another widgets – DolDurma Aug 29 '19 at 08:52

Kab Agouda · Answer 3 · 2021-02-08T12:13:27.400

For more controls , Use the PreferedSize widget to create your own appBar

Example :

appBar: PreferredSize(
     preferredSize: Size(100, 80), //width and height 
          // The size the AppBar would prefer if there were no other constraints.
     child: SafeArea(
       child: Container(
         height: 100,
         color: Colors.red,
         child: Center(child: Text('Fluter is great')),
       ),
     ),
),

Don't forget to use a SafeArea widget if you don't have a safeArea

Output :

Flutter change custom AppBar height

3 Answers3