How to Dynamically change Icon Button to String or Emoji
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,
)
Pro Co
Updated on November 27, 2022Comments
-
Pro Co over 1 year
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); }, ), ], );
-
Mahesh Jamdade about 3 yearscan you add some code ans show how that emoji is placed beside the bell icon?
-
Pro Co about 3 yearsbuddy, you can check now? is it understandable?
-
Pro Co about 3 years@Mahesh Try not to run the Code, You will find errors, I am Just Explaining the Layout to you,
-
Mahesh Jamdade about 3 yearsyes it is, understandable, I have added the answer
-
Pro Co about 3 years@Mahesh BTW, The Variables Will be Easy to understand, but You will not able to run it on your System.
-
Mahesh Jamdade about 3 yearsI don't need to run the code its pretty straight forward
-
Pro Co about 3 yearsMahesh, I will notify you With a Thanks, wait.. let me run this code on my machine in a while.... By the way, hundreds of Love and Affection ❤️ how may I thank you, you are so amazing, I have no words, Love you
-
-
Pro Co about 3 yearsI am Getting this Error.
-
Pro Co about 3 years
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 about 3 yearsThe error doesn't seem to be related to this question