Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 297
luisfilipels Avatar asked Aug 04 '20 15:08

luisfilipels


People also ask

How do I get rid of padding in AppBar Flutter?

How to Remove Extra Padding Around AppBar Leading Icon In Flutter ?? appBar: AppBar( automaticallyImplyLeading: false, // Don't show the leading button title: Row( mainAxisAlignment: MainAxisAlignment. start, crossAxisAlignment: CrossAxisAlignment. center, children: <Widget>[ IconButton( onPressed: () => Navigator.

How do I remove leading from AppBar Flutter?

Step 1: Open the next/second page. Step 2: Inside the AppBar, add the automaticallyImplyLeading parameter and set it to false .

What is leading in AppBar Flutter?

In Flutter, the AppBar's layout mainly comprises three components: leading , title , and actions . leading is placed at the leftmost position of the AppBar; title and actions appear to its right.


1 Answers

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

Just set the primary property of it to false.

AppBar(
   primary: false,
   ...
)
like image 104
Miguel Ruivo Avatar answered Oct 21 '22 03:10

Miguel Ruivo