CODEWITHSUNDEEP
dartemojiflutter
user3217522
user3217522

Reputation: 6274

Displaying text with Emojis on Flutter

I have some texts that contain emojis and I'm trying to show them on the Text widget. However, they seem to be shown as foreign characters. Does Flutter support showing emojis? should work for both iOS and Android

Upvotes: 34

Views: 90105

Answers (9)

mezoni
mezoni

Reputation: 11200

If changing the font for normal text and emoji can help, then you can split the text into normal and emoji.
Later, you can use different fonts.

import 'package:sequence_processor/sequence_processor.dart';
import 'package:unicode/emoji/emoji.dart';

void main(List<String> args) {
  var str = 'I 💗 you! ❤️‍🔥 ';
  print(str);

  final parts = _decompose(str);
  print(parts);
  for (final element in parts) {
    final font = element.$1 ? 'EmojiFont' : 'RegularFont';
    print(
      'Font: $font "${element.$2}"',
    );
  }
}

// Should be stored in a static member for performance reasons.
final _processor = () {
  final emojis = getUnicodeEmojiList();
  final processor = SequenceProcessor<int, Object>();
  for (final emoji in emojis) {
    processor.addSequence(emoji.codePoints, emoji);
  }

  return processor;
}();

List<(bool, String)> _decompose(String text) {
  if (text.isEmpty) {
    return [];
  }

  final elements = _processor.process(text.runes.toList());
  final result = <(bool, List<int>)>[];
  (bool, List<int>)? regularChars;
  for (final element in elements) {
    if (element.data is Emoji) {
      result.add((true, element.sequence!));
      regularChars = null;
    } else {
      if (regularChars == null) {
        regularChars = (false, []);
        result.add(regularChars);
      }

      regularChars.$2.add(element.element!);
    }
  }

  return result.map((e) => (e.$1, String.fromCharCodes(e.$2))).toList();
}

Output:

I 💗 you! ❤️‍🔥
[(false, I ), (true, 💗), (false,  you! ), (true, ❤️‍🔥), (false,  )]
Font: RegularFont "I "
Font: EmojiFont "💗"
Font: RegularFont " you! "
Font: EmojiFont "❤️‍🔥"
Font: RegularFont " "

Upvotes: 0

Hanaa
Hanaa

Reputation: 269

Flutter new releases disable the emojis for the debug mode, but when you release the web all will be visible (happened to me too)

Upvotes: 0

Naham Al-Zuhairi
Naham Al-Zuhairi

Reputation: 192

You can easily use the fontFamily as a style to solve the problem I used it with the package

auto_size_text: ^2.1.0

AutoSizeText(
              lesson.FullExercise,
              textAlign: TextAlign.justify,
              style:TextStyle(
              fontFamily: 'EmojiOne',
              ),
            ),

Good note to mention If you want to store data in MySQL and the text contains Emojis you need to change the collection of the text to utf8mb4

Upvotes: 0

Wisdom Ekeh
Wisdom Ekeh

Reputation: 275

When an emoji is not showing up, the issue is most likely the font you are using.

Before trying out an emoji font package, you can give the text field an empty string as fontFamily or try out the default font options packaged with flutter. This will prevent adding dependencies that are not needed.

for example this emoji was not showing on android with 'Product Sans' as fontFamily, i simply added an empty string and font family for the text field, and that fixed the issue.

Text('₦', TextStyle(fontFamily: ''))

Upvotes: 2

Dennis
Dennis

Reputation: 511

You can insert emoji in the text field through following way:

If you're on Mac, you can hit Control + Command + Space. Windows users can hit the "Windows key" + ; (semicolon).

Copy pasted the instruction from @Reso Coder https://www.youtube.com/watch?v=KfuUkq2cLZU&t=15s

I tested on mac and it works.

Upvotes: 23

Ignacio Tomas Crespo
Ignacio Tomas Crespo

Reputation: 3571

For full emoji compatibility (at least in android, not all emojis are supported in old OS versions) you can use the google free font Noto Color Emoji at https://www.google.com/get/noto/#emoji-zsye-color

  • Add it to the fonts folder
  • add in pubspec.yaml
    fonts:
    - family: NotoEmoji
      fonts:
        - asset: fonts/NotoColorEmoji.ttf
          weight: 400

  • use with TextStyle

    Text("🤑", TextStyle(fontFamily: 'NotoEmoji'))

Upvotes: 9

codingedward
codingedward

Reputation: 496

The Problem

As of now, unfortunately, Flutter uses the default Emojis supported on a given platform. Therefore, when building a cross-platform app you may face issues of Emojis showing on certain devices and not on others.

The Solution

The solution I settled for is to use a custom Emoji font such as Emoji One and RichText widget instead of the basic Text widget.

With this, you can simply have:

RichText(
  text: TextSpan(
    children: <TextSpan>[
      TextSpan(
        text: 'Hello',  // non-emoji characters
      ),
      TextSpan(
        text: '🧭 🏳️\u200d🌈', // emoji characters
        style: TextStyle(
          fontFamily: 'EmojiOne',
        ),
      ),
    ],
  ),
);

Generalized Solution

With this idea, we can even create a custom widget that given a string, builds a RichText object with all the TextSpans autocreated:

class EmojiText extends StatelessWidget {

  const EmojiText({
    Key key,
    @required this.text,
  }) : assert(text != null),
       super(key: key);

  final String text;

  @override
  Widget build(BuildContext context) {
    return RichText(
      text: _buildText(this.text),
    );
  }

  TextSpan _buildText(String text) {
    final children = <TextSpan>[]; 
    final runes = text.runes;

    for (int i = 0; i < runes.length; /* empty */ ) {
      int current = runes.elementAt(i);

      // we assume that everything that is not
      // in Extended-ASCII set is an emoji...
      final isEmoji = current > 255;
      final shouldBreak = isEmoji
        ? (x) => x <= 255 
        : (x) => x > 255;

      final chunk = <int>[];
      while (! shouldBreak(current)) {
        chunk.add(current);
        if (++i >= runes.length) break;
        current = runes.elementAt(i);
      }

      children.add(
        TextSpan(
          text: String.fromCharCodes(chunk),
          style: TextStyle(
            fontFamily: isEmoji ? 'EmojiOne' : null,
          ),
        ),
      );
    }

    return TextSpan(children: children);
  } 
}

Which can be used as:

EmojiText(text: 'Hello there: 🧭 🏳️\u200d🌈');

This has the advantage of having the consistent support of Emojis on your app that you can control on different platforms.

The downside is that it will add some MBs to your app.

Upvotes: 31

Shubham
Shubham

Reputation: 191

If you just want to include emoji in Text widget, you can copy emoji from somewhere else and paste it inside the text widget. I use GeteMoji to copy emojis.

See the Output Screenshot

CODE : See 8th Row.

Widget build(BuildContext context) {
    return Center(
        child: Container(
            alignment: Alignment.center,
            color: Colors.deepPurple,
            //width: 200.0,
            //height: 100.0,
            child: Text("Emoji 🤣 ",
                style: TextStyle(
                  fontFamily: 'Raleway',
                  fontSize: 40,
                  decoration: TextDecoration.none,
                  color: Colors.white

                ))));
  }

Upvotes: 13

Collin Jackson
Collin Jackson

Reputation: 116728

Flutter supports emoji. Here's some code that demonstrates emoji text entry. (If you're seeing foreign characters, it's likely that you're decoding bytes as ASCII instead of UTF-8; we can show you how to fix this if you update your question with code that demonstrates the problem.)

import 'dart:async';
import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _message = '🐣';

  Future<String> _promptForString(String label, { String hintText }) {
    final TextEditingController controller = new TextEditingController();
    return showDialog(
      context: context,
      child: new AlertDialog(
        title: new Text(label),
        content: new TextFormField(
          controller: controller,
          decoration: new InputDecoration(hintText: hintText),
        ),
        actions: <Widget>[
          new FlatButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('CANCEL'),
          ),
          new FlatButton(
            onPressed: () => Navigator.pop(context, controller.text),
            child: const Text('OK'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(_message),
      ),
      body: new Center(
        child: new Text(_message, style: Theme.of(context).textTheme.display2),
      ),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.edit),
        onPressed: () async {
          String message = await _promptForString('New text', hintText: 'Try emoji!');
          if (!mounted)
            return;
          setState(() {
            _message = message;
          });
        },
      ),
    );
  }
}

Upvotes: 15

Related Questions