Flutter: subtract status bar height from AppBar

Question

I have moved my AppBar downwards but now it's height is too big. I want to know how I can subtract the status bar's height from my AppBar's height. Here is what it looks like at the moment:

Here is how you can set the AppBar's height:

Flutter: Setting the height of the AppBar

Here is how you can get the status bar height:

How or where do I change the system status bar Flutter framework

final double statusBarHeight = MediaQuery.of(context).padding.top;
return new Padding(
      padding: new EdgeInsets.only(top: statusBarHeight),
      child: content
);

I just don't know how to put these pieces together (I am very new to Flutter so please explain the answer well)

@PhaniRithvij Because you use nested Scaffords, you can try this code MediaQueryData.fromWindow(window).padding.top — Hoang, Jul 18 '23 at 04:04

score 14 · Accepted Answer · answered Jun 01 '19 at 17:48

Is this what you are looking for?

Widget build(BuildContext context) {
  return SafeArea(
    child: Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            height: 70,
            alignment: Alignment.center,
            color: Colors.red,
            child: Text(
              "ADVERTISE HERE!",
              style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 24),
            ),
          ),
          AppBar(title: Text("Main page")),
        ],
      ),
    ),
  );
}

This is perfect thank you. I battle with the fact that my object are positioned differently in the tree and then it comes out weird haha. — Paul Kruger, Jun 02 '19 at 05:36

score 0 · Answer 2 · answered Jan 18 '22 at 07:35

0

now you can easily set primary: false and subtract the status bar's height from your AppBar's height (Doc)

 AppBar(
     primary: false,
     ...
  ),

answered Jan 18 '22 at 07:35

Sajjad

2,593
16
26

Flutter: subtract status bar height from AppBar

2 Answers2