CODEWITHSUNDEEP
flutterdart
Kazi Farhan
Kazi Farhan

Reputation: 21

How to show emoji in flutter

I have an api from which I am fetching messages. These messages might contain emoji. When it does contain emoji Text Widget is not displaying it correctly. I just want to display them on the screen. Help if possible.

Thank you :)

class Message{
String text;

  Message(){
   this.text = get_data_from_api()['text'];
  }
}

message = Message();
return Container(
  child: Text(message.text), 
);

No Displaying text with Emojis on Flutter won't do it. I can do that but it only works if you have emoji in a string, that is explicitly plasing an emoji in string works fine for me. but when I am using something similar to the code above. I am getting, this

enter image description here

digging more into it I found that if I print my response on console it is

"ð­ð­ð­ð­"

and if I print a emoji it is 😭

So

I am using

Response.fromStream(await request.send())

from http/http.dart

So is that the problem ?

Upvotes: 0

Views: 4346

Answers (2)

Kazi Farhan
Kazi Farhan

Reputation: 21

I did figured it out

I was taking data from an API. So while decoding for some reason it was not decoding utf-8 so what I needed to do was add

utf8.decode(response.bodyBytes);

in place of response.body and it was solved

Reference: Emoji and accent encoding in dart/flutter

Upvotes: 2

Sarvesh Dalvi
Sarvesh Dalvi

Reputation: 2688

If you have an emoji image explicitly present in the response from your API and you want to display it in your text, your should try adding WidgetSpan inside your RichText below is an example of how to do it :

RichText(
  text: TextSpan(
    children: [
      TextSpan(
        text: "Click ",
      ),
      WidgetSpan(
        child: Icon(Icons.add, size: 14),
      ),
      TextSpan(
        text: " to add",
      ),
    ],
  ),
),

In the above example they have used the material icon( Icon(Icons.add)). If you want to replace that from the image your get from the API, you can use ImageIcon instead of Icon widget. Follow this link to know how to use ImageIcon : https://www.woolha.com/tutorials/flutter-using-imageicon-widget-examples

Reference : Add image to RichText element

Upvotes: 0

Related Questions