flutterdart

How to remove extra padding around AppBar leading icon in Flutter


In my Flutter app, I have this AppBar

Widget setAppBar() {
  return 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 Container(
    height: 25.0,
    width: 25.0,
    padding: EdgeInsets.zero,
    margin: EdgeInsets.zero,
    child: Stack(
      alignment: AlignmentDirectional.center,
      children: <Widget>[
        Image.asset(Constant.iconNotification, width: 25.0, height: 25.0),
        FlatButton(
          onPressed: () {
            onLeadingShowCategoryClick();
          },
        ),
      ],
    ),
  );
}

it looks like:

enter image description here

As you can see on the AppBar, there is some extra padding around the leading icon. How can I remove this extra padding.


Solution

  • 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.