Search code examples
flutterfrontendiconspadding

How to center icons in Flutter


I am working on the camera part in the Flutter application. On the bottom, there are two icons. One for the flash and one for the camera button. I would like for them to be centered on the screen. I was trying to make the red camera button appear in the center and the yellow flash icon would appear close to the camera button on the left side.

Widget controlRow() {
    return Ink(
        color: Colors.black,
        child: Row(
          //mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            const IconButton(
             
              onPressed: null,
              
              icon: Icon(
              
                //Icons.margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
                Icons.flash_auto,
                color: Colors.yellow,
              ),
              iconSize: 50,
            ),

            IconButton( // circle button
                // padding: new EdgeInsets.all(0.0),
                onPressed: takePicPressed,
                icon: const Icon( // icon: const Icon( 
                  Icons.lens_outlined,
                  color: Colors.red,

                  
                  
                
                ),
                iconSize: 90),

            const SizedBox(width: 50, height: 25) // 50 and 25
          ],
        ));
  }

I tried with the padding and Edge Insets but I do not understand what exactly Edge Insets do. Below I have listed some pieces of code that I have tried down below.

/Icons.margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
// padding: new EdgeInsets.all(0.0),

Solution

  • Changed your code and attached a screenshot of what it looks like:

     Widget controlRow() {
        return Ink(
            color: Colors.black,
            child: Center(
              heightFactor: 1,
              child: Wrap(
                crossAxisAlignment: WrapCrossAlignment.center,
                children: <Widget>[
                  const IconButton(
                    padding: EdgeInsets.only(top: 30),
                    onPressed: null,
                    icon: Icon(
                      Icons.flash_auto,
                      color: Colors.yellow,
                    ),
                    iconSize: 50,
                  ),
                  IconButton(
                      onPressed: () {},
                      icon: const Icon(
                        Icons.lens_outlined,
                        color: Colors.red,
                      ),
                      iconSize: 90),
                  const SizedBox(width: 50, height: 25)
                ],
              ),
            ));
      }
    

    enter image description here

    The main idea was to just center these buttons, and I did this with the Wrap and Center widgets.

    If my answer helped, then don't forget to mark it as correct (tick).