Reducing the space between icon and text - Flutter OutlinedButton-CodePudding

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,
    ),
  ),
),

CodePudding user response：

The best way to implement such case I think is to replace icon button with button with RichText as a child:

OutlinedButton(
          onPressed: () {},
          child: RichText(
            text: TextSpan(children: [
              // Icon as a font character
              TextSpan(
                text: String.fromCharCode(Icons.flash_on_outlined.codePoint),
                style: TextStyle(
                  color: Colors.amber,
                  fontFamily: Icons.flash_on_outlined.fontFamily,
                  package: Icons.flash_on_outlined.fontPackage,
                ),
              ),
              // Button text
              TextSpan(
                text: 'Surge',
                style: TextStyle(
                  fontSize: 15.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.blue,
                ),
              ),
            ]),
          ),
          style: OutlinedButton.styleFrom(
            backgroundColor: Colors.blue[100],
            side: BorderSide(
              color: Colors.blue,
              width: 1,
            ),
          ),
        )

This solution removes any margin from an icon.

CodePudding user response：

  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,
      ),
    ),
  )

CodePudding user response：

You are using OutlinedButton.icon. If you look into its source code, you'll see that it's nothing magical at all: it simply puts your icon and text in a Row and places a SizedBox in the middle as a gap, its source code is as follows:

// Flutter source code: `outlined_button.dart`, line 378.
final double gap = scale <= 1 ? 8 : lerpDouble(8, 4, math.min(scale - 1, 1))!;
return Row(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[icon, SizedBox(width: gap), Flexible(child: label)],
);

So, if you don't like this default 8-unit gap, simply don't use .icon constructor. Just use the normal constructor and pass in a Row as its child, with whatever gap you want:

OutlinedButton(
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: const [
      Icon(Icons.star),
      SizedBox(width: 8),
      Text('Add to bookmark'),
    ],
  ),
  onPressed: () {},
)

CodePudding user response：

your size, about the icon and the text, are block or you can modify it?