2

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

7
  • add images how do you want and how it is now Apr 23, 2020 at 9:27
  • 1
    @KirillMatrosov I added it
    – dontknowhy
    Apr 23, 2020 at 9:31
  • You just want to remove the space between the arrow or outside the arrow? Apr 23, 2020 at 9:39
  • @RavindraKushwaha yes I want to remove the space between the arrow
    – dontknowhy
    Apr 23, 2020 at 9:41
  • That is not a padding... that is actual icon.. you can't remove them unless you stack them on top of each other
    – LonelyWolf
    Apr 23, 2020 at 9:41

3 Answers 3

2

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

enter image description here

2
  • thank you for answering but it seems it has a space also. I want it to be very close like ">>" text
    – dontknowhy
    Apr 23, 2020 at 9:42
  • oh you are right I changed the value of a Positioned then it worked thank you!
    – dontknowhy
    Apr 23, 2020 at 9:46
0

if you want to achieve this 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

0
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.