Flutterでテキスト中にIconを入れる方法

質問日時

2021年05月20日

takumi

Rowウィジェット中にTextとIconを並べることで、テキストとテキストの間にアイコンを入れようとしたのですが、長文の場合うまくいきません。長文の場合でもアイコンをうまくテキスト中に入れることは可能でしょうか。

ベストアンサー

2021年05月25日

t-kobayashi

下記のように、Textウィジェットの代わりにRichTextウィジェットを使うことで段落の中にアイコンを入れ込むことが可能です。

RichText(
  text: TextSpan(
    children: [
      TextSpan(text: 'アイコンの前のテキスト'),
      WidgetSpan(
        child: Icon(Icons.play_circle_filled),
      ),
      TextSpan(text: 'アイコンの後のテキスト'),
    ],
  ),
)

質問に回答する

1件の回答

ベストアンサー

2021年05月25日

t-kobayashi

下記のように、Textウィジェットの代わりにRichTextウィジェットを使うことで段落の中にアイコンを入れ込むことが可能です。

RichText(
  text: TextSpan(
    children: [
      TextSpan(text: 'アイコンの前のテキスト'),
      WidgetSpan(
        child: Icon(Icons.play_circle_filled),
      ),
      TextSpan(text: 'アイコンの後のテキスト'),
    ],
  ),
)