如何将图标按钮动态更改为字符串或表情符号

Question

所以我在做一个Todo App，里面有一个Emoji的作品。我目前正在使用 PubPackage，emoji_picker: ^0.1.0 借助它的帮助，我可以轻松打开和关闭表情符号键盘。

顺便说一句，您看到的代码是打开EmojiKeyboard的代码。

 Widget emojiSelect() {
  return EmojiPicker(
      numRecommended: 25,
      recommendKeywords: ["sing", "coding"],
      columns: 7,
      rows: 3,
      onEmojiSelected: (emoji, catergory) {
        print(emoji);
      });
}

在这里，当我按下按钮时，表情符号键盘正在完美打开，我对此非常满意。

现在，我想做点什么，比如如果我们点击 Emoji_keyboard 中的其中一个表情符号，然后点击图标，如下图所示（在下图中）

更改用户通过键盘点击的表情符号。

有没有办法，将图标自身更改为用户单击的“表情符号”，如果我们长按同一个按钮，我们可以再次编辑表情符号以根据我们的选择选择另一个？

整个代码，大致如下所示，

return Wrap(
      children: [
        WillPopScope(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Wrap(
                //height: MediaQuery.of(context).size.height / 4.8,
                children: [
                  Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      TextFormField(
                        focusNode: focusNode,
                        autofocus: false,
                        autocorrect: true,
                        decoration: InputDecoration(
                          hoverColor: Colors.amber,
                          border: InputBorder.none,
                          prefixIcon: Icon(CarbonIcons.pen_fountain),
                          hintText: "What toodo?",
                          hintStyle: TextStyle(
                              color: Colors.black54,
                              fontWeight: FontWeight.w200),
                          contentPadding: EdgeInsets.all(20.0),
                        ),
                      ),
                      // TextFormField(
                      //   autocorrect: true,
                      //   decoration: InputDecoration(
                      //     hoverColor: Colors.amber,
                      //     border: InputBorder.none,
                      //     prefixIcon: Icon(CarbonIcons.pen),
                      //     hintText: "Description (optional)",
                      //     hintStyle: TextStyle(
                      //         color: Colors.black54,
                      //         fontWeight: FontWeight.w200),
                      //     contentPadding: EdgeInsets.all(20.0),
                      //   ),
                      // ),
                      Row(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              IconButton(
                                icon: Icon(CarbonIcons.notification),
                                onPressed: () async {
                                  final TimeOfDay newTime =
                                      await showTimePicker(
                                    context: context,
                                    initialTime:
                                        TimeOfDay(hour: 7, minute: 15),
                                  );
                                },
                                color: Colors.black54,
                              ),
                              IconButton(
                                icon: Icon(CarbonIcons.face_add),
                                onPressed: () {
                                  setState(() {
                                    focusNode.unfocus();
                                    focusNode.canRequestFocus = false;
                                    showEmojiKeyboard = !showEmojiKeyboard;
                                  });
                                },
                                color: Colors.black54,
                              )
                            ],
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              FlatButton.icon(
                                  onPressed: () {},
                                  color: Colors.blue,
                                  icon: Icon(
                                    CarbonIcons.add,
                                    color: Colors.white,
                                  ),
                                  label: Text(
                                    "Add Todo",
                                    style: TextStyle(color: Colors.white),
                                  ))
                            ],
                          ),
                          Divider(),
                        ],
                      )
                    ],
                  ),
                ],
              ),
              showEmojiKeyboard ? emojiSelect() : Container(),
            ],
          ),
          onWillPop: () {
            if (showEmojiKeyboard) {
              setState(() {
                showEmojiKeyboard = false;
              });
            } else {
              Navigator.pop(context);
            }
            return Future.value(false);
          },
        ),
      ],
    );

Answer 1

似乎选择的表情符号类型是字符串，所以基本上在选择表情符号时你需要显示一个文本小部件来代替图标。

String selectedEmoji;


 Widget emojiSelect() {
  return EmojiPicker(
      numRecommended: 25,
      recommendKeywords: ["sing", "coding"],
      columns: 7,
      rows: 3,
      onEmojiSelected: (emoji, catergory) {
        setState((){
         selectedEmoji = emoji;
       })
      });
}

并且显示图标的地方必须有条件地用 Text() 小部件替换

 IconButton(
   icon: selectedEmoji==null? Icon(CarbonIcons.face_add):Text(selectedEmoji),
   onPressed: () {
     setState(() {
     focusNode.unfocus();
     focusNode.canRequestFocus = false;
     showEmojiKeyboard = !showEmojiKeyboard;
   });
 },
 color: Colors.black54,
)

如何将图标按钮动态更改为字符串或表情符号

How to Dynamically change Icon Button to String or Emoji

dart

flutter

flutter-test

flutter-dependencies

flutter-layout