[Flutter]テキスト(text)内にアイコン(icon)を表示するには？

どうも、ちょげ(@chogetarou)です。

テキスト内にアイコンを表示する方法を紹介します。

方法

テキスト内にアイコンを表示するには、Text.richを使います。

まず、Text.richの引数にTextSpanを指定し、TextSpanの引数「children」にリストを指定します。

そして、TextSpanの引数「children」のリストに、TextSpanでテキスト、WidgetSpanでアイコンを指定します。

TextSpanの引数「children」のリストに指定された順番で、テキストとアイコンが表示されます。

Text.rich(
  TextSpan(
    children: [
      TextSpan(text: 'Hello'), //引数「text」でテキストを指定
      WidgetSpan(child: Icon(Icons.flutter_dash)), //引数「child」で表示するアイコンを指定
      TextSpan(text: 'Flutter')
    ],
  ),
),