Question 218296 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to add padding to the leading and action icons on the AppBar?

I want to add padding to the icons on the AppBar.

I tried wrapping icons with Padding() but that only squeezes them to the allocated space–not the one I give it.

Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(left: 10),
      child: const Icon(
        image: Icon(""),
        width: 50,
        height: 50,
      ),
    );
  }

My app bar currently looks like this

enter image description here

With the code:

  Widget build(BuildContext context) {
    return AppBar(
      leading: RedBlock(),
      actions: [YellowBlock()],
      backgroundColor: Theme.of(context).primaryColor,
    );
  }
}

I want to push the two icons a little to the center like so:
enter image description here

Whats the best to way to accomplish this?

Tags:

2

Answers


  1. 0

    You can implement the PreferredSizeWidget to create custom appBar.

    class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
  const MyAppBar({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(left: 10,right:10),//adjust the padding as you want
      child: AppBar(), //or row/any widget
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}

    Now you can use MyAppBar in place appBar:MyAppBar().

    Login or Signup to reply.
  2. 0

    you can wrap the icons with a Padding widget and adjust the padding values accordingly. Additionally, you can use the Row widget to align the leading and action icons horizontally.

        appBar: AppBar(
      title: Text('My App'),
      leading: Padding(
        padding: EdgeInsets.only(left: 16.0),
        child: Icon(
          Icons.menu,
          size: 24,
        ),
      ),
      actions: [
        Padding(
          padding: EdgeInsets.only(right: 16.0),
          child: Icon(
            Icons.search,
            size: 24,
          ),
        ),
        Padding(
          padding: EdgeInsets.only(right: 16.0),
          child: Icon(
            Icons.more_vert,
            size: 24,
          ),
        ),
      ],
    ),

    You can adjust the padding values as needed to achieve the desired spacing.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search