flutter how to get rid of a icon padding?

Question

I did eveything solution on Stackoverflow

but it still has a space horizontally

I want to set these icons very closely each other

my code is this

     Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          MediaQuery.removePadding(
            context: context,
            removeLeft: true,
            removeRight: true,
            child: GestureDetector(
              onTap: () {},
              child: Container(
                padding: const EdgeInsets.all(0.0),
                width: 30.0,
                child: IconButton(
                  icon: Icon(
                    Icons.keyboard_arrow_right,
                    color: Color(0xff60B906),
                  ),
                  color: Color(0xff60B906),
                  iconSize: 30,
                ),
              ),
            ),
          ),
          MediaQuery.removePadding(
            context: context,
            removeLeft: true,
            removeRight: true,
            child: GestureDetector(
              onTap: () {},
              child: Container(
                padding: const EdgeInsets.all(0.0),
                width: 30.0,
                child: IconButton(
                  icon: Icon(
                    Icons.keyboard_arrow_right,
                    color: Color(0xff60B906),
                  ),
                  color: Color(0xff60B906),
                  iconSize: 30,
                ),
              ),
            ),
          ),
        ],
      ),

any solution that difference to mine please?

current image

and I want it to be very close

Answer 1

Icon(
  Icons.keyboard_double_arrow_right,
  color: Colors.blue,
  size: 18,
),

Answer 2

Stack them on top of each other using a Stack, then wrap one of them in a padding with only left padding of the points you need to get it look the way you want.

Answer 3

if you want to achieve this

there are two options

1- download it as PNG image to your folder assets and make it a child instead of row

GestureDetector(
          onTap: () {},
          child: Image.asset(
            "imagePath",
color: Color(0xff60B906),
            height: 16,
            width: 16,
          ),
        ),

2- if you want it as Icon make it as Icon data from SVG from this site https://fluttericon.com/ and make it as usual

Answer 4

You can use Stack Widget

SAMPLE CODE

Stack(
            alignment: Alignment.center,
            children: <Widget>[
              IconButton(
              onPressed: null,
                icon: Icon(
                  Icons.keyboard_arrow_right,
                  color: Color(0xff60B906),
                ),
                color: Color(0xff60B906),
                iconSize: 30,
              ),
              Positioned(
                right: 20,
                child: IconButton(
                  onPressed: null,
                  icon: Icon(
                    Icons.keyboard_arrow_right,
                    color: Color(0xff60B906),
                  ),
                  color: Color(0xff60B906),
                  iconSize: 30,
                ),
              ),
            ],
          )

OUTPUT