I have OutlinedButton with Row inside it with Icons on left and right and text between them.

This is how it's looking

and how it's implemented in code:

Container(
                        width: size.width * 0.4,
                        child: OutlinedButton(
                          onPressed: () {
                            
                          },
                          style: OutlinedButton.styleFrom(
                              side: BorderSide(
                                  color: Color(0xFF44A5FF)
                              )
                          ),
                          child: Container(
                            width: size.width * 0.4,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Icon(Icons.star_outline, color: Color(0xFF44A5FF)),
                                Container(
                                  width: (size.width * 0.3) * 0.6,
                                  child: AutoSizeText(
                                    selectedValue!,
                                    style: TextStyle(
                                        color: Color(0xFF44A5FF),
                                        fontWeight: FontWeight.w400
                                    ),
                                    maxLines: 1,
                                    minFontSize: 8,
                                  ),
                                ),
                                Icon(
                                  Icons.keyboard_arrow_down_sharp,
                                  color: Color(0xFF44A5FF),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),

I want to set these icons closer to start and end of OutlinedButton and I don't know how to achieve that.

CodePudding user response：

You can provide padding on style, it will reduce some padding

style: OutlinedButton.styleFrom(
  side: BorderSide(
    color: Color(0xFF44A5FF),
  ),
  padding: EdgeInsets.zero,
),

IconData comes with some default hard-coded value.

CodePudding user response：

You can check this solution also

Container(
          decoration: BoxDecoration(
              border: Border.all(
                color: Color(0xFF44A5FF),
              ),
              borderRadius: BorderRadius.circular(5)),
          width: size.width * 0.4,
          child: GestureDetector(
            onTap: () {},
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Icon(Icons.star_outline, color: Color(0xFF44A5FF)),
                Container(
                  width: (size.width * 0.3) * 0.6,
                  child: const Text(
                    "selectedValue",
                    style: TextStyle(
                        color: Color(0xFF44A5FF),
                        fontWeight: FontWeight.w400),
                    maxLines: 1,
                  ),
                ),
                Icon(
                  Icons.keyboard_arrow_down_sharp,
                  color: Color(0xFF44A5FF),
                ),
              ],
            ),
          ),
        ),

CodePudding user response：

Download it as PNG image to your folder assets and make it a child.

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

Use stack and positioned Widget:

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