How to Dynamically change Icon Button to String or Emoji - flutter

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

Answer 1

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