Dart/Flutter Add an Image to AlertDialog Text Field

Question

I have an Application where I want Users to be able to buy Power Ups inside an Alert Dialog.

For the actual buying, the user simply presses the IconButton, which already works.

Is there a way to display the Images also in the Text above, instead of the actual text?

So for example the TNT image used in the Icon Button to also display in the text instead of the actual word "TNT"?

AlertDialog(
              title: const Text('Buy power up?'),
              content: Text(
                  'Do you want to buy \nTNT for $tntPrice\$ \nMine for $minePrice\$ \nWrapped for $wrappedPrice\$?'),
              elevation: 24,
              shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(16))),
              actions: <Widget>[
                IconButton(
                    icon: Image.asset('assets/images/bombs/tnt.png'),
                    onPressed: () => buyPowerUp("tnt", tntPrice, coinBloc,
                        reportingBloc, gameBloc, context)),
                IconButton(
                    icon: Image.asset('assets/images/bombs/mine.png'),
                    onPressed: () => buyPowerUp("mine", minePrice, coinBloc,
                        reportingBloc, gameBloc, context)),
                IconButton(
                    icon: Image.asset('assets/images/bombs/multi_color.png'),
                    onPressed: () => buyPowerUp("wrapped", wrappedPrice,
                        coinBloc, reportingBloc, gameBloc, context)),
                TextButton(
                  onPressed: () => buyPowerUp(
                      "nothing", 0, coinBloc, reportingBloc, gameBloc, context),
                  child: const Text('Start Game'),
                )
              ],
            ));

So basically that it looks like this(Sry for bad image, just used paint to make it clear)

Yes, i edited the question, i hope that it is more understandable now! Thank you — Felpower, May 11 '22 at 08:47
Check my below [answer](https://stackoverflow.com/a/72198341/13997210) hope its helpful to you. — Ravindra S. Patil, May 11 '22 at 09:17
If you want your icons as action see my updated answer and just unComment the action code — Ravindra S. Patil, May 11 '22 at 09:26

manhtuan21 · Answer 1 · 2022-05-11T09:19:12.203

Do you mean like this ?

return AlertDialog(
    title: const Text('Buy power up?'),
    content: Wrap(
      children: [
        Text('Do you want to buy'),
        Image.asset('assets/images/bombs/multi_color.png'),
        Text('for 100'),
        Image.asset('assets/images/bombs/multi_color.png'),
        Text('for 200'),
        Image.asset('assets/images/bombs/multi_color.png'),
        Text('for 1000'),
        // Image.asset('assets/images/bombs/tnt.png')
      ],
    ),
    elevation: 24,
    shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(16))),
    actions: <Widget>[
      IconButton(
          icon: Image.asset('assets/images/bombs/tnt.png'),
          onPressed: () => buyPowerUp("tnt", tntPrice, coinBloc,
              reportingBloc, gameBloc, context)),
      IconButton(
          icon: Image.asset('assets/images/bombs/mine.png'),
          onPressed: () => buyPowerUp("mine", minePrice, coinBloc,
              reportingBloc, gameBloc, context)),
      IconButton(
          icon: Image.asset('assets/images/bombs/multi_color.png'),
          onPressed: () => buyPowerUp("wrapped", wrappedPrice,
              coinBloc, reportingBloc, gameBloc, context)),
      TextButton(
        onPressed: () => buyPowerUp(
            "nothing", 0, coinBloc, reportingBloc, gameBloc, context),
        child: const Text('Start Game'),
      )
    ]
);

This kind of works, but i actually don't want them to be IconButtons in the actual text — Felpower, May 11 '22 at 09:17
Okay so u don't need click in the actual text, i edited my answer, u may check it again — manhtuan21, May 11 '22 at 09:20
The problem with the wrap is that i can not really make a newline after the price. So the whole text including the images is in the same line, but the answer from Gejaa works perfect, but thank you anyways — Felpower, May 11 '22 at 09:23

M Karimi · Accepted Answer · 2022-05-11T09:22:02.943

Try this code:

  AlertDialog(
              title: const Text('Buy power up?'),
              content: Wrap(
            children: [
              Text('Do you want to buy'),
              Row(
                children: [
                  Image.asset('assets/images/bombs/tnt.png'),
                  SizedBox(width: 5),
                  Text(
                      ' for $tntPrice\$'),
                ],
              ),
              Row(
                children: [
                  Image.asset('assets/images/bombs/mine.png'),
                  SizedBox(width: 5),
                  Text(
                      ' for $minePrice\$'),
                ],
              ),
              Row(
                children: [
                  Image.asset('assets/images/bombs/multi_color.png'),
                  SizedBox(width: 5),
                  Text(
                      ' for $wrappedPrice\$?'),
                ],
              ),
            ],
          )
                  elevation: 24,
                  shape: const RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(Radius.circular(16))),
                  actions: <Widget>[
                    IconButton(
                        icon: Image.asset('assets/images/bombs/tnt.png'),
                        onPressed: () => buyPowerUp("tnt", tntPrice, coinBloc,
                            reportingBloc, gameBloc, context)),
                    IconButton(
                        icon: Image.asset('assets/images/bombs/mine.png'),
                        onPressed: () => buyPowerUp("mine", minePrice, coinBloc,
                            reportingBloc, gameBloc, context)),
                    IconButton(
                        icon: Image.asset('assets/images/bombs/multi_color.png'),
                        onPressed: () => buyPowerUp("wrapped", wrappedPrice,
                            coinBloc, reportingBloc, gameBloc, context)),
                    TextButton(
                      onPressed: () => buyPowerUp(
                          "nothing", 0, coinBloc, reportingBloc, gameBloc, context),
                      child: const Text('Start Game'),
                    )
                  ],
                ));

Thank you very much, this works very nice, but now i have the problem that the Alert Dialog is way too big, is there a way to fix that? https://ibb.co/FsKKSRD — Felpower, May 11 '22 at 09:14
Now it works perfect thanks, one more question, is there a way to make the images the same size as the text? Because now i have to manually set the images to height: 25, is there a way to fit it to the same size? — Felpower, May 11 '22 at 09:24
I don't think that there is a better way than to set height for image. — M Karimi, May 11 '22 at 09:34

Ravindra S. Patil · Answer 3 · 2022-05-11T09:25:47.397

Try below code, just change my data to your data like images and texts.

your alert function:

 myalertFunction(BuildContext context) {
    return showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('Buy power up?'),
          content: Container(
            height: 300,
            child: Column(
               children: [
                Text('Do you want to buy'),
                ListTile(
                  leading: IconButton(
                      icon: Image.asset('assets/twitter.png'),
                      onPressed: () {}),
                  title: Text('TNT for 100\$'),
                ),
                ListTile(
                  leading: IconButton(
                      icon: Image.asset('assets/twitter.png'),
                      onPressed: () {}),
                  title: Text('Mine for 200\$'),
                ),
                ListTile(
                  leading: IconButton(
                      icon: Image.asset('assets/twitter.png'),
                      onPressed: () {}),
                  title: Text('Wrapped for 1000\$'),
                ),
              ],
            ),
          ),
       /*  actions: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            IconButton(
                icon: Image.asset('assets/twitter.png'), onPressed: () {}),
            IconButton(
                icon: Image.asset('assets/twitter.png'), onPressed: () {}),
            IconButton(
                icon: Image.asset('assets/twitter.png'), onPressed: () {}),
            TextButton(
              onPressed: () {},
              child: Text(
                'Start Game',
              ),
            ),
          ],
        ),
      ],*/
          elevation: 24,
          shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(16))),
        );
      },
    );
  }

Your Widget:

    TextButton(
          child: Text('Click Here'),
          onPressed: () {
            myalertFunction(context);
          }),

Result Screen->

Thanks for your input, i think my question was not 100% clear, i do not want the Text to contain Buttons. The Buttons should stay on the bottom of the Alert Dialog, but thank you for your answer, i already solved the problem! OK you edited your answer, this also works perfect now thank you very much! — Felpower, May 11 '22 at 09:26
One aditional question, is there a way to make the Image the same size as the text? Because currently i have to add a height to it manually like this: Image.asset('assets/images/bombs/tnt.png', height: 25) — Felpower, May 11 '22 at 09:29
@Felpower just give the `fontsize` of `text` same as image `height` like `IconButton( icon: Image.asset('assets/twitter.png',height: 25,), onPressed: () {}), title: Text('TNT for 100\$',style: TextStyle(fontSize: 25),), ),` try this code — Ravindra S. Patil, May 11 '22 at 09:33

score 1 · Answer 4 · answered May 11 '22 at 09:16

You can use RichText

AlertDialog(
          title: const Text('Buy power up?'),
          content: RichText(
                text: TextSpan(
                  text: "Do you want to buy\n",
                  style: TextStyle(color: Colors.black),
                  children: [
                    WidgetSpan(
                        child: Image.asset('assets/images/bombs/tnt.png')),
                    TextSpan(text: 'for \$100\n',style: TextStyle(color: Colors.black)),
                    WidgetSpan(
                        child: Image.asset('assets/images/bombs/mine.png')),
                    TextSpan(text: 'for \$200\n',style: TextStyle(color: Colors.black)),
                    WidgetSpan(
                        child: Image.asset('assets/images/bombs/multi_color.png'),),
                    TextSpan(text: 'for \$300',style: TextStyle(color: Colors.black)),
                  ],
                ),
              ),,
          elevation: 24,
          shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(16))),
          actions: <Widget>[
            IconButton(
                icon: Image.asset('assets/images/bombs/tnt.png'),
                onPressed: () => buyPowerUp("tnt", tntPrice, coinBloc,
                    reportingBloc, gameBloc, context)),
            IconButton(
                icon: Image.asset('assets/images/bombs/mine.png'),
                onPressed: () => buyPowerUp("mine", minePrice, coinBloc,
                    reportingBloc, gameBloc, context)),
            IconButton(
                icon: Image.asset('assets/images/bombs/multi_color.png'),
                onPressed: () => buyPowerUp("wrapped", wrappedPrice,
                    coinBloc, reportingBloc, gameBloc, context)),
            TextButton(
              onPressed: () => buyPowerUp(
                  "nothing", 0, coinBloc, reportingBloc, gameBloc, context),
              child: const Text('Start Game'),
            )
          ],
        ));

This works perfect, thank you very much, did not know about RichText! The only thing is i have to add a "manual" height to the Image, is there a way to make the Image the same size as the text? — Felpower, May 11 '22 at 09:19
If you have an image size that is bigger then we need to provide manual values for that use WidgetSpan(child:Container( width: 20, height: 25 decoration: BoxDecoration( image: DecorationImage( fit: BoxFit. fill, image: AssetImage("your image"), )) ) if you want to responsive use mediaquery to calculate and give the values for height and width factor — Gejaa, May 11 '22 at 09:51

Dart/Flutter Add an Image to AlertDialog Text Field

4 Answers4