Flutter: Using image instead of icon

Question

I have a sample code for a radiostream player. The code provides for an icon to represent its state (paused or playing). I would like to show an image instead of the icon.

Being a newby/noob with flutter im stuck. Can sonebody push me in the right direction?

Here is the current code:

...........    
default:
                        return Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              IconButton(
                                  onPressed: () async {
                                    print("button press data: " +
                                        snapshot.data.toString());
                                    await _flutterRadioPlayer.playOrPause();
                                  },
                                  icon: snapshot.data ==
                                          FlutterRadioPlayer
                                              .flutter_radio_playing
                                      ? Icon(Icons.pause)
                                      : Icon(Icons.play_arrow))
                            ]);
                        break;
                    }
...............

So in short, i want to use an image, "pause.png" for Icons.pause and "play.png" for Icons.play_arrow.

heyom · Accepted Answer · 2021-07-09 11:00:04Z

1

Remove that IconButton thing and use this as a child of Future Builder and the future builder will return this

Image.asset('pause.png'):Image.asset('play.png')

answered Jul 9, 2021 at 11:00

heyom

3622 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

José David Ortega · Accepted Answer · 2021-07-09 10:43:21Z

1

the icon is of type Widget so you can pass for example Image.asset([path to asset]) instead Icon()

answered Jul 9, 2021 at 10:43

José David Ortega

4342 silver badges7 bronze badges

Comments

Jayveersinh Mahida · Accepted Answer · 2021-07-09 11:04:41Z

here is the example

return Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.center,

                            // replace Icon button to this custom button and wrap with Inkwell 
                            children: <Widget>[
                              InkWell(
                                  onTap: () async {
                                    print("button press data: " +
                                        snapshot.data.toString());
                                    await _flutterRadioPlayer.playOrPause();
                                  },
                                  child : snapshot.data ==
                                          FlutterRadioPlayer
                                              .flutter_radio_playing
                                      ? Image.asset("image path")
                                      : Image.asset("image path "))
                            ]);
                        break;
                    }

Collectives™ on Stack Overflow

Flutter: Using image instead of icon

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related