How to Dynamically change Icon Button to String or Emoji

Question

So I am Making a Todo App, which has a work of Emoji in it. I am Currently Using PubPackage, emoji_picker: ^0.1.0 For its help i can open and Close Emoji Keyboard Easily.

BTW, the Code You can see, is a Code of Opening EmojiKeyboard.

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

Here, when I am Pressing the button, A Emoji Keyboard is Opening Perfectly, And I am pretty happy with it.

Now, I want to Make something, like if we Click on one of the Emoji which is resting inside the Emoji_keyboard then the Icon as you can see(in the below image)

Changes to Emoji, which User Clicked through KeyBoard.

Is there a Way, the Icon to change itself to "Emoji" that the user Clicked and if we long-press the same Button we can again Edit the Emoji to choose another, as per our choice?

The Whole Code, Pretty much looks like this,

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

can you add some code ans show how that emoji is placed beside the bell icon? — Mahesh Jamdade
– Mahesh Jamdade, Commented Apr 25, 2021 at 10:56
@Mahesh Try not to run the Code, You will find errors, I am Just Explaining the Layout to you, — Pro Co
– Pro Co, Commented Apr 25, 2021 at 11:38
@Mahesh BTW, The Variables Will be Easy to understand, but You will not able to run it on your System. — Pro Co
– Pro Co, Commented Apr 25, 2021 at 11:39

Mahesh Jamdade · Accepted Answer · 2021-04-25 11:37:14Z

3

Seems like the selected emoji type is String so basically on selection of emoji you need to display a Text Widget in place of the icon.

String selectedEmoji;


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

And the place where you show the icon has to be replaced with the Text() widget conditionally

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

answered Apr 25, 2021 at 11:37

Mahesh Jamdade

20.8k11 gold badges133 silver badges150 bronze badges

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

3 Comments

Pro Co Over a year ago

I am Getting this Error.

Pro Co Over a year ago

Exception caught by widgets library  The following _CompileTimeError was thrown building StatefulBuilder(dirty, state: _StatefulBuilderState#6b6ec): Unimplemented handling of missing the static target

The relevant error-causing widget was StatefulBuilder lib\uis\addTodoBottomSheet.dart:23 When the exception was thrown, this was the stack

...

Mahesh Jamdade Over a year ago

The error doesn't seem to be related to this question

Collectives™ on Stack Overflow

How to Dynamically change Icon Button to String or Emoji

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related