Flutter: is it possible to resize IconButton when it is clicked (onPressed)?

104 Views Asked by At

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();
      },
  ),
1

There are 1 best solutions below

0
On

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;
        });
      }