【Flutter】テキスト内にアイコンを簡単に埋め込む方法

概要

一般的に、テキスト内にアイコンを埋め込もうとすると以下のような書き方になります。

RichText(
  text: TextSpan(
      style: Theme.of(context).textTheme.body1,
         children: [
            TextSpan(text: 'ほげほげ'),
            WidgetSpan(
                child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 2.0),
                    child: Icon(Icons.audiotrack),
                ),
            ),
            TextSpan(text: 'ふがふが'),
          ],
       ),
   )
)

しかし、styled_textライブラリを使うことでもっと簡単に書くことが出来ます！

手順

1. pubspec.yamlにstyled_textを追加

dependencies:
    styled_text:     #ここに追加する

2. 使いたいところにタグを定義

タグの書式は以下のとおりです。

<tag_name/>    //タグの後ろの"/"を忘れない！

以下の通りに追加します。

StyledText(
    textAlign: TextAlign.center,
    text: "ほげほげ <note/> ふがふが",  //テキストの中に入れる！ 隙間がなくなるので、タグの両端にスペースを入れたほうが良い
    styles: {
       'note': IconStyle(Icons.audiotrack)
    }
)

3. タグに対応したアイコンを定義

タグに対応したアイコンをstyles:で定義します。

'tag_name': IconStyle(iconData)

実際に導入すると以下のようになります。

StyledText(
    textAlign: TextAlign.center,
    text: "ほげほげ <note/> ふがふが",
    styles: {
       'note': IconStyle(Icons.audiotrack) //対応するタグを定義
    }
)

4. 完成！

同じようにできました！！

最後に

このパッケージは、アイコンを埋め込む他にも一部だけテキストのスタイルを変更するときにも使えます！(というかそっちがメイン？）
記述量も減るので、こちらを採用してみるのもいいかもしれません。

なんか、すごい煩雑な書き方をしないといけないと感じていたので、簡単に行う方法があってよかったです。
今現在(2020/02/06 Channel master, v1.14.7-pre.91, on Microsoft Windows [Version 10.0.18362.592], locale ja-JP)、Flutter for webでTextSpan, WidgetSpanがバグって使えない状態なので、こちらの方法を使うと良いかもしれません。

参考文献

styled_text | Flutter Package
https://pub.dev/packages/styled_text

Flutter: how to add icon to text? - stackoverflow
https://stackoverflow.com/questions/57897786/flutter-how-to-add-icon-to-text