luisfilipels
luisfilipels

Reputation: 107

Flutter - Padding on AppBar

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.

Upvotes: 8

Views: 18951

Answers (1)

Miguel Ruivo
Miguel Ruivo

Reputation: 17746

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

Just set the primary property of it to false.

AppBar(
   primary: false,
   ...
)

Upvotes: 11

Related Questions