質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.77%

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 338

tk_art

score 5

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

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

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

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

                    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,
                          ),
                        ),
                      )
                   ]
                  ),
                ),
              ),

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+1

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

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/06/08 11:31

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

    キャンセル

  • 2020/06/08 11:35

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る