Flutter：是否可以在单击（onPressed）时调整 IconButton 的大小？

Question

I have a row, whose children are few buttons. I use them to pick color of my item, and when one icon is clicked I save color on server. Now, I would like the chosen Icon to resize (to get bigger). So that it really look like "selected".

Do you have any tips how to achieve that?

Here is my code for a single icon. Others are completely same, only with another color.

IconButton(
   icon: Ink(
        decoration: BoxDecoration(
        border: Border.all(color: yellow, width: 1),
        color: yellow,
        borderRadius: BorderRadius.circular(50.0)),
        child: const Icon(
           Icons.circle,
           color: yellow,
           size: 30,
            ),
       ),
   onPressed: () async {

      // how to resize when clicked? 
                                    
     item.set('color', 'yellow');
     item.save();
      },
  ),

Answer 1

Let's use a boolean variable to track the state of the icon. When the icon is clicked, you can toggle the value of the boolean variable and use it to control the size of the icon, this should be perfect for what you want to do.

We will make the Icon reusable and expose its properties, you can define it as a custom widget and pass the necessary parameters as arguments.

Here is an example of how you can do this:

// Feel free to name the widget any name, I called it 'ColorIcon`.

class ColorIcon extends StatefulWidget {
  final Color color;
  final Function? onPressed;

  ColorIcon({require this.color, this.onPressed});

  @override
  _ColorIconState createState() => _ColorIconState();
}

class _ColorIconState extends State<ColorIcon> {
  bool _isSelected = false;

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Ink(
        decoration: BoxDecoration(
          border: Border.all(color: widget.color, width: 1),
          color: widget.color,
          borderRadius: BorderRadius.circular(50.0)),
        child: Icon(
          Icons.circle,
          color: widget.color,
          size: _isSelected ? 50 : 30,
        ),
      ),
      onPressed: () {
        setState(() {
          _isSelected = !_isSelected;
        });
        widget.onPressed();
      },
    );
  }
}

You can then use the ColorIcon widget like this:

ColorIcon(
  color: yellow,
  onPressed: () {
    item.set('color', 'yellow');
    item.save();
  },
),

This will allow you to reuse the ColorIcon widget for multiple icons and customize its behaviour by passing different values for the color and onPressed arguments while achieving the resize functionality.

Answer 2

To change the icon size dynamically, you can hold the size as a variable:

var _iconSize = 30;

And then:

Icon(
          Icons.circle,
          color: bikeyellow,
          size: _iconSize, //<-- SEE HERE
        ),

And in your onPressed setState the variable to something bigger:

onPressed: ()  {
        setState(() {
          _iconSize = 100;
        });
      }