Reducing the space between icon and text – Flutter OutlinedButton

Issue

Is there an easy way to reduce the space between the icon and text on an OutlinedButton?

Below is my code. Have made a few different attempts but no luck.

OutlinedButton.icon(
  onPressed: () {},
  icon: Icon(Icons.flash_on_outlined, size: 20.0),
  label: Text(
    'Surge',
    style: TextStyle(
      fontSize: 15.0,
      fontWeight: FontWeight.bold,
      color: Colors.blue,
    ),
  ),
  style: OutlinedButton.styleFrom(
    padding: EdgeInsets.zero,
    //fixedSize: Size(40, 25),
    backgroundColor: Colors.blue[100],
    side: BorderSide(
      color: Colors.blue,
      width: 1,
    ),
  ),
),

enter image description here

Solution

  OutlinedButton.icon(
    onPressed: () {},
    icon: Wrap(
      // mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Icon(Icons.flash_on_outlined, size: 20.0),
        Text(
          'Surge',
          style: TextStyle(
            fontSize: 15.0,
            fontWeight: FontWeight.bold,
            color: Colors.blue,
          ),
        )
      ],
    ),
    label: Text(""),
    style: OutlinedButton.styleFrom(
      padding: EdgeInsets.zero,
      //fixedSize: Size(40, 25),
      backgroundColor: Colors.blue[100],
      side: BorderSide(
        color: Colors.blue,
        width: 1,
      ),
    ),
  )

enter image description here

Answered By – lava

Answer Checked By – Senaida (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.