Search code examples
flutterstatusbarappbar

Flutter: subtract status bar height from AppBar


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:

enter image description here

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)


Solution

  • Is this what you are looking for?

    enter image description here

    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")),
            ],
          ),
        ),
      );
    }