Question

我有一些包含表情符号的文本，我试图在文本小部件上显示它们。但是，它们似乎被显示为外来字符。 Flutter支持显示表情符号吗？应适用于iOS和Android

Answer 1

Flutter支持表情符号。这是一些演示表情符号文本输入的代码。（如果您看到外来字符，则可能是您将字节解码为ASCII而不是UTF-8;如果您使用演示此问题的代码更新问题，我们可以向您展示如何解决此问题。）

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

Answer 2

您可以通过以下方式在文本字段中插入表情符号：

如果您使用的是Mac，则可以按Control + Command + Space。 Windows用户可以按“ Windows键” +；（分号）。

从@Reso Coder复制粘贴的指令 https://www.youtube.com/watch?v=KfuUkq2cLZU&t=15s

我在Mac上进行了测试，并且可以正常工作。

Answer 3

当表情符号未显示时，问题很可能是您使用的字体。

在尝试使用表情符号字体包之前，可以为文本字段提供一个空字符串作为fontFamily，或尝试使用随flutter打包的默认字体选项。这样可以防止添加不需要的依赖项。

例如，此表情符号未在带有“ Product Sans”作为fontFamily的android上显示，我只是为文本字段添加了一个空字符串和字体系列，从而解决了该问题。

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

Answer 4

如果只想在文字小部件中包含表情符号，则可以从其他位置复制表情符号并将其粘贴到文本小部件中。我使用GeteMoji复制表情符号。

See the Output Screenshot

CODE：请参阅第8行。

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

                ))));
  }

Answer 5

问题

不幸的是，到目前为止，Flutter使用了给定平台上支持的默认表情符号。因此，在构建跨平台应用程序时，您可能会遇到在某些设备而非其他设备上显示表情符号的问题。

解决方案

我解决的解决方案是使用自定义的Emoji字体，例如Emoji One和RichText小部件，而不是基本的Text小部件。

有了这个，您可以简单地拥有：

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

通用解决方案

有了这个想法，我们甚至可以创建一个自定义的小部件，该小部件给定一个字符串，并自动创建所有RichText的对象来构建一个TextSpan对象：

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

可以用作：

EmojiText(text: 'Hello there: ? ?️\u200d?');

其优点是可以在不同平台上控制您的应用程序对Emojis的一致支持。

不利之处在于，它将为您的应用添加一些MBs。

Answer 6

要获得完全的表情符号兼容性（至少在android中，并非旧操作系统版本中支持所有表情符号），您可以在https://www.google.com/get/noto/#emoji-zsye-color使用Google免费字体Noto Color Emoji

将其添加到字体文件夹
添加pubspec.yaml

    fonts:
    - family: NotoEmoji
      fonts:
        - asset: fonts/NotoColorEmoji.ttf
          weight: 400

与TextStyle一起使用

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

在Flutter上使用Emojis显示文本

6 个答案:

问题

解决方案

通用解决方案