[Flutter]Textの前にアイコンを設置するには？

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

Textの前にアイコンを設置する方法を紹介します。

方法

Textの前にアイコンを設置する方法は２つあります。

Row

１つは、Rowウェジェットを使う方法です。

具体的な方法としては、Rowウェジェットの引数「children」に、アイコンとテキストを指定します。

child: Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(Icons.flutter_dash),
    Text('Flutter'),
  ],
),

RichText

もう１つは、RichTextを使う方法です。

まず、RichTextの引数「text」にTextSpanを指定します。

次にTextSpanの引数「children」に、引数「child」にアイコンを設定したWidgetSpanを指定します。

そして、WidgetSpanの後に、引数「text」でテキストを設定したTextSpanを指定します。

RichText(
  text: TextSpan(
    children: [
      WidgetSpan(
        child: Icon(Icons.flutter_dash),
      ),
      TextSpan(
        text: 'Flutter',
        style: TextStyle(color: Colors.black),
      ),
    ],
  ),
),

まとめ

Textの前にアイコンを設置する方法は、次の２つです。

• Rowウェジェットを使う方法
• RichTextを使う方法

[Flutter]Iconの形を指定するには？

Iconの形を指定する方法を紹介します。

www.choge-blog.com

2021.11.08

[Flutter]Iconのサイズを親ウェジェットのサイズに合わせるには？

Iconウェジェットのサイズを親となるウェジェットのサイズにフィットさせる方法を紹介します。

www.choge-blog.com

2021.11.07

[Flutter]アイコン(Icon)の上にテキストを表示するには？

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

www.choge-blog.com

2021.11.07