How to access/change an attribute of a Widget in Flutter

Question

I have a Menu button that has 3 icons, and I want to hover the icon of the current page.

The code of the widget is:

class MenuButton extends StatelessWidget {
  int current;

  MenuButton({@required this.current}) {}

  @override
  Widget build(BuildContext context) {
    Widget cirMenu = FabCircularMenu(
      children: <Widget>[
        IconButton(
            icon: Image.asset('img/performance.png'),
            onPressed: () {
              print('Favorite');
            }),
        IconButton(
            icon: Image.asset('img/shop.png'),
            onPressed: () {
              print('Home');
            }),
        IconButton(
            icon: Image.asset('img/category.png'),
            onPressed: () {
              print('Favorite');
            })
      ],
      ringDiameter: 230,
      ringWidth: 90,
      animationCurve: Cubic(1, 1.65, .62, .83),
    );
 return cirMenu;
}

I would like to hover the image of the current page, but I don't know how to access the Widget attribute. The final functionality should be something like this (though it is not compiling), that is just adding a conditional to change the image:

 if (current == 0) {
  cirMenu.children[0].Icon = Image.asset('img/performance-hover.png');
}

if (current == 1) {
  cirMenu.children[1].Icon = Image.asset('img/shop-hover.png');
}

if (current == 2) {
  cirMenu.children[2].Icon = Image.asset('img/category-hover.png');
}
return cirMenu;

How can I accomplish that?

score 1 · Answer 1 · answered Apr 21 '20 at 05:36

if you just want a message you can use tooltip attribute that is already inside IconButton() like this

IconButton(
      icon: Image.asset('img/performance.png'),
      onPressed: () {
        print('Favorite');
      }, tooltip: 'Favorite')

if you want a color change on hover you can change hoverColor attribute like this

IconButton(
      icon: Image.asset('img/performance.png'),
      onPressed: () {
        print('Favorite');
      }, hoverColor: Colors.red)

score 1 · Accepted Answer · answered Apr 21 '20 at 08:18

You can't modify properties of a widget once it's built. It's immutable. In other words you need to rebuild it every time that you want to change something about it.

One potential solution would be to modify your code to use proper background on each rebuild.

  Image getBackground(int current) {
    if (current == 0) {
      return Image.asset('img/performance-hover.png');
    }

    if (current == 1) {
      return Image.asset('img/shop-hover.png');
    }

    if (current == 2) {
      return Image.asset('img/category-hover.png');
    }
    //handle other indices
  }

Then depending on your desired outcome you can use this method when constructing MenuButton.

Remember - you don't need (or even can't) modify widget as it's built. The data (i.e. index or image) must flow from top to bottom of the widget tree.

How to access/change an attribute of a Widget in Flutter

2 Answers2

Linked