How to Remove Extra Padding Around AppBar Leading Icon In Flutter?

AppBar Widget is the main widget in any Flutter app. It sits at the top of the application and mostly controls major action items. So in today’s article, We will learn about How to Remove Extra Padding Around AppBar Leading Icon In 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.pop(context),
        icon: Icon(Icons.arrow_back, color: Colors.white),
      ),
      // Your widgets here
    ],
  ),
),

Where automaticallyImplyLeading: true hides the leading IconButton so you can add your own widgets.

Just add a property called tile spacing,

appBar: AppBar(
        leading: Icon(Icons.android),
        titleSpacing: 0,
        title: Text(widget.title),
      ),

You can also try the below way:

AppBar(
  leadingWidth: 8, // <-- Use this
  centerTitle: false, // <-- and this
  leading: Icon(Icons.android),
  title: Text('Title'),
)

We will get output like the below:

AppBar Widget

More customizations:

AppBar(
  leading: Transform.translate(
    offset: Offset(-15, 0),
    child: Icon(Icons.android),
  ),
  titleSpacing: -30,
  centerTitle: false,
  title: Text("Title"),
)

If you don’t want to use any leading widget:

AppBar(
  title: Text('Title'),
  centerTitle: false,
  titleSpacing: 0,
)

AppIcon Flutter

Just set titleSpacing and automaticallyImplyLeading to remove space like below:

AppBar(
        titleSpacing: 0,
        automaticallyImplyLeading: false,
)

When you set the leading = null then the extra space of the leading widget will remove.

Conclusion:

Thanks for Reading!!!

In this article, we have learned about How to Remove Extra Padding Around AppBar Leading Icon in Flutter ??

Do you any Flutter requirements for us? Drop us a requirement

flutteragency.com is an online community dedicated to learning Flutter projects, development tips, issue resolution, news & industry updates. Consult our developer to turn your business idea into an amazing application and grow your business.

Article source: https://flutteragency.com/how-to-remove-extra-padding-around-appbar-leading-icon-in-flutter/