【Flutter】絵文字が表示されない

Question

表記タイトル通りですが、表示される絵文字とされない絵文字があります。

しかし、チャット画面では全て表示されるのに対し、該当箇所では一部の絵文字が表示されない現象が起きています。

原因が不明なので質問させていただきました。

コードの表示(チャット画面メッセージ部分)

                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        GestureDetector(
                          child: AvatarDisplay(this.senderAvatar),
                          onTap: () => Navigator.pushNamed(context, '/user_detail', arguments: UserIdArguments(this.senderId)),
                        ),
                        SizedBox(width: 3.0, height: 3.0),
                        Container(
                          constraints: BoxConstraints(maxWidth: c_width),
                          child: Material(
                            borderRadius: BorderRadius.only(
                              topRight: Radius.circular(30.0),
                              bottomLeft: Radius.circular(30.0),
                              bottomRight: Radius.circular(30.0),
                            ),
                            elevation: 5.0,
                            color: Colors.white,
                            child: GestureDetector(
                              onLongPress: () {
                              Clipboard.setData(new ClipboardData(text: text));
                              Scaffold.of(context).showSnackBar(
                                new SnackBar(content: new Text("コピーしました。"),
                                duration: Duration(seconds: 2),));
                              },
                              child: Padding(
                                padding: EdgeInsets.symmetric(
                                    vertical: 10.0, horizontal: 20),
                                child: Linkify(
                                    onOpen: (link) async {
                                        if (await canLaunch(link.url)) {
                                          await launch(link.url);
                                        } else {
                                          print("Failed to launch...");
                                        }
                                    },
                                    text: text
                                  )
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),

該当問題箇所（絵文字非表示箇所）
             Padding(
                padding: EdgeInsets.fromLTRB(0, 0, 12, 0),
                child: Container(
                  margin: EdgeInsets.fromLTRB(17, 0, 0, 0),
                  child: Stack(
                    children: <Widget>[ 
                      Align(
                        alignment: Alignment.topLeft,
                        child: Text(
                          item.comment == 'NO_COMMENT' ? '' : item.comment,
                          style: TextStyle(
                            fontSize: 14,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      )
                   ]
                  ),
                ),
              ),

---

情報が足りないかもしれませんが、なぜか該当箇所は一部の絵文字だけ？で表示されてしまいます。

もし、絵文字を表示させる方法をご存知の方いらっしゃればご教授いただけますと幸いです。
何卒宜しくお願いいたします。

Answer 1

該当箇所のTextStyleで適用している FontWeight.w500 が原因の可能性がありますね。

似たような現象報告をflutter本家のissueで見かけたので共有しておきます。

Emojis wont render when using non-normal font weights · Issue #11108 · flutter/flutter

現在の詳細仕様までは追えていませんが、一度fontWeightを外してみて絵文字が表示されるようであれば、このあたりが原因かと思われます。

表現方法の変更を検討するか、fontWeightの設定値を下げるなどで対処できるのではないでしょうか。

Comments

[tk_art]

ご回答いただきありがとう御座います。
早速試したのですが変化がなく、どうやら違う部分に原因があるようです。。

[unsoluble_sugar]

なるほど…お力になれず申し訳ないですm(_ _)m