如何在 Flutter 中将按钮图标更改为动画文本？

Posted 2023-02-23

【中文标题】如何在 Flutter 中将按钮图标更改为动画文本？

【英文标题】：How to Change Button Icon to Animated Text in Flutter?

【发布时间】：2021-07-11 16:46:16

【问题描述】：

我在这个主题上遇到了一些问题。我有一个材质按钮。正如您在下面的代码中看到的那样，为它设置了一个“表情”图标。

            MaterialButton(
                    onPressed: () ,
                    // color: Colors.transparent,
                    child: Icon(
                      Icons.emoji_emotions_outlined,
                      color: Colors.black54,
                      size: 35,
                    ),
                    shape: CircleBorder(),
                    padding: EdgeInsets.all(16),
                  ),
                ],
              ),

我也有一个看起来像这样的文本字段，（下），

                TextFormField(
                  // autofocus: true,
                  decoration: InputDecoration(
                    labelText: 'Write Task',
                    // border: OutlineInputBorder(),
                    prefixIcon: Icon(Icons.add),
                  ),
                ),

用户写完后，我需要在一秒的延迟中一个一个地显示这个List 的表情符号[????,????,????,????,????,????,????]。在 Material Button 里面，Place Above，在 Icon 的地方。

我有一个材质按钮 里面有一个图标。 我也有一个文本字段 TextField 写完后，我需要显示List 的表情符号[????,????,????,????,????,????,????] 我想替换材质按钮中的图标。 我想展示这些表情符号的幻灯片放映，但按钮的图标除外 此外，如果用户单击 Emoji，Emoji 将被锁定，或存储在某种变量中

我真的很想在这方面寻求帮助。

【参考方案1】：

这里有两件事，

最初在材质按钮中显示一个图标。根据用户的交互，图标将被更改。 为此，创建IconData 的实例（因为Icon 接受IconData）并最初设置默认图标。每当用户选择另一个图标时，您都可以将选定的IconData 设置为变量。

我不知道Material Icons库中是否有这个传统图标。否则检查font_awesome_flutter。