flutterdartbuttoniconsflutter-appbar

My button is not moving with my Icon | Flutter | Dart


I pressed a button and it is looking wierd

I'm encountering an issue in my Flutter app where I'm trying to add padding to an IconButton in the AppBar. However, when I add padding to the IconButton, the icon moves to the right, but the button stays in the same place. I want the icon to remain in its original position while adding padding to the button. Here is a code:



   `leading: Padding(
         padding:
             const EdgeInsets.only(left: 45.0), 
         child: IconButton(
           icon: const Icon(
             Icons.menu,
             color: Colors.white,
           ),
           onPressed: () {},
         ),
       ),
       actions: [
         Padding(
           padding: const EdgeInsets.only(
               right: 45.0), 
           child: IconButton(
             onPressed: () {},
             icon: const Icon(Icons.notifications, color: Colors.white),
           ),
         ),
       ],
     ),
`

I've tried wrapping the IconButton with a Container and applying padding to it, but the issue persists. How can I add padding to the IconButton without moving the icon itself? Any help would be appreciated. Thank you!


Solution

  • That's because leading have limited space in your AppBar widget. You can use Row to align actions in your AppBar, something like this:

    AppBar(
          automaticallyImplyLeading: false,
          backgroundColor: Colors.black,
          actions: [
            SizedBox(
              width: MediaQuery.of(context).size.width,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(
                        left: 45.0), // устанавливаем отступ слева
                    child: IconButton(
                      icon: const Icon(
                        Icons.menu,
                        color: Colors.white,
                      ),
                      onPressed: () {
                        print('123');
                      },
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(
                        right: 45.0), // устанавливаем отступ справа
                    child: IconButton(
                      onPressed: () {},
                      icon:
                          const Icon(Icons.notifications, color: Colors.white),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
    

    Hope this will help