Flutter - Padding on AppBar

5,423

That's because AppBar automatically includes a SafeArea whenever treated as primary.

Just set the primary property of it to false.

AppBar(
   primary: false,
   ...
)
Share:
5,423
Admin
Author by

Admin

Updated on December 23, 2022

Comments

  • Admin
    Admin over 1 year

    The app I'm developing must be in full screen mode at all times, however, the time/date must also be shown at all times, as well as a certain Hardware ID. We found the following way to present said information:

    Screenshot of the app with debug paint on

    However, as you may see above, I marked in red a Padding widget that is always above my AppBar, and we would like to remove that padding. Is such a thing possible?

    Below I have the code for the custom AppBar we're using.

    @override
    Widget build(BuildContext context) {
    return PreferredSize(
      preferredSize: Size.fromHeight(45),
      child: AppBar(
        centerTitle: true,
        title: Column(
          children: <Widget>[
            Text(pageName,
              style: TextStyle(
                  fontSize: pageNameFontSize
              ),
            ),
            SizedBox(
              height: 8,
            )
          ],
        ),
        actions: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
              SizedBox(
                height: 6,
              ),
              Row(
                children: <Widget>[
                  AppBarClock(
                    style: TextStyle(
                        fontSize: 20
                    ),
                  ),
                  SizedBox(
                    width: 5,
                  )
                ],
              ),
              Row(
                children: <Widget>[
                  Text(this.trailText,
                    textAlign: TextAlign.right,
                  ),
                  SizedBox(
                    width: 5,
                  )
                ],
              ),
            ],
          )
        ],
      ),
    );
    

    We are using SystemChrome.setEnabledSystemUIOverlays([]); to make the app full screen.