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( 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, )
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.
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.