Dart/Flutter 将图像添加到 AlertDialog 文本字段

Question

我有一个应用程序，我希望用户能够在警报对话框中购买电源。

对于实际购买，用户只需按下 IconButton，它已经可以工作了。

有没有办法在上面的文本中显示图像，而不是实际的文本？

例如，图标按钮中使用的 TNT 图像也显示在文本中，而不是实际的单词“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'),
                )
              ],
            ));

基本上它看起来像这样（抱歉图像不好，只是用油漆使它清晰）

Answer 1

你是这个意思吗？

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'),
      )
    ]
);

Answer 2

试试这个代码：

  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'),
                    )
                  ],
                ));

Answer 3

尝试下面的代码，只需将我的数据更改为您的数据，例如图像和文本。

您的警报功能：

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

您的小部件：

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

结果屏幕->

Answer 4

您可以使用 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'),
            )
          ],
        ));

Dart/Flutter 将图像添加到 AlertDialog 文本字段

Dart/Flutter Add an Image to AlertDialog Text Field

dart

flutter

flutter-alertdialog

flutter-text