How to remove extra padding around AppBar leading icon in Flutter
DartFlutterFlutter LayoutDart Problem Overview
In my Flutter app, I have this AppBar
Widget setAppBar(){
return new AppBar(
title: addAppBarTextWidget('Explore'),
elevation: 0.0,
leading: addLeadingIcon(),
actions: <Widget>[
addAppBarActionWidget(Constant.iconNotification, 22.0, 16.0, 8.0),
addAppBarActionWidget(Constant.iconProfile, 30.0, 30.0, 15.0)
],
);
}
Widget addLeadingIcon(){
return new Container(
height: 25.0,
width: 25.0,
padding: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
margin: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
child: new Stack(
alignment: AlignmentDirectional.center,
children: <Widget>[
new Image.asset(
Constant.iconNotification,
width: 25.0,
height: 25.0,
),
new FlatButton(
onPressed: (){
onLeadingShowCategoryClick();
}
)
],
),
);
}
it looks like:
> As you can see on the AppBar, there is some extra padding around the > leading icon. How can I remove this extra padding.
Dart Solutions
Solution 1 - Dart
Just add a property called titleSpacing,
Sample
appBar: AppBar(
leading: Icon(Icons.android),
titleSpacing: 0,
title: Text(widget.title),
),
Solution 2 - Dart
You can't do this because it is a predefined widget. You can, however, do this:
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.
Solution 3 - Dart
Short answer:
AppBar(
leadingWidth: 8, // <-- Use this
centerTitle: false, // <-- and this
leading: Icon(Icons.android),
title: Text('Title'),
)
More customizations:
AppBar(
leading: Transform.translate(
offset: Offset(-15, 0),
child: Icon(Icons.android),
),
titleSpacing: -30,
centerTitle: false,
title: Text("Title"),
)
and if you don't want to use any leading widget:
AppBar(
title: Text('Title'),
centerTitle: false,
titleSpacing: 0,
)
Solution 4 - Dart
just set titleSpacing
and automaticallyImplyLeading
for remove space
like
AppBar(
titleSpacing: 0,
automaticallyImplyLeading: false,
)
Solution 5 - Dart
Complete working workaround with some input from Adrian.
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
titleSpacing: 0.0,
title: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
IconButton(
icon: Icon(Icons.menu),
onPressed: () => _scaffoldKey.currentState.openDrawer(),
),
Stack(
alignment: Alignment.center,
children: <Widget>[
IconButton(
icon: Icon(Icons.mail_outline),
onPressed: _onClickNotification,
),
Positioned(
top: 12.0,
right: 10.0,
width: 10.0,
height: 10.0,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColors.notification,
),
),
)
],
),
Expanded(
child: Center(child: Text('test')),
)
],
),
automaticallyImplyLeading: false,
centerTitle: true,
actions: <Widget>[
Row(
children: <Widget>[
Text('Online'),
Switch(
value: true,
onChanged: (bool value) {},
)
],
)
],
),
drawer: Drawer(
child: _buildDrawer(),
),
body: Container(
color: Colors.orange,
),
);
Solution 6 - Dart
You can try this, this works fine. when you set the leading = null then extra space of leading widget will remove.
appBar: new AppBar(
leading: null,
titleSpacing: 0.0,
title: new Text("title"),
),
Solution 7 - Dart
Adding Title Spacing will solve this.
AppBar(
centerTitle: false,
automaticallyImplyLeading: false,
titleSpacing: 0
)
Solution 8 - Dart
If you just need to move the icon a bit to the left like I did, you can still use the leading property and just set the alignment on the IconButton:
leading: Builder(
builder: (BuildContext context) {
return IconButton(
onPressed: () => Navigator.pop(context),
icon: MyIcon(),
alignment: Alignment(-0.5, 0.0), // move icon a bit to the left
);
},
),
Solution 9 - Dart
If you use Widgets from Material package, they are defined respecting Material Design specification document. So if your modification violates this spec, you have to build your own Widget instead of using the Material Widgets.
Solution 10 - Dart
For the Sliver Appbar Padding
sliver: SliverAppBar(
pinned: true,
expandedHeight: 400.0,
flexibleSpace: FlexibleSpaceBar(
centerTitle: false,
titlePadding: EdgeInsets.zero,
title: Text('Appbar'),
),
),