どうも、ちょげ(@chogetarou)です。
画像の上にテキストを表示する方法を紹介します。
方法
画像の上にテキストを表示する方法は２つあります。
Stack
１つは、Stackを使う方法です。
具体的には、Stackの引数「children」に画像とテキストのウェジェットを指定します。
引数「children」への指定は、画像、テキストの順番でします。
Stack(
children: [
//画像→テキストの順番で指定
Image(・・・),
Text('テキスト'),
],
),
Container
もう１つは、Containerを使う方法です。
まず、TextをContainerでラップします。
次に、Containerの引数「decoration」にBoxDecorationを指定します。
そして、BoxDecorationの引数「image」に画像の指定をします。
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: /*AssetImageやNewtworkImageで画像を指定*/,
),
),
child: Text('テキスト'),
),
まとめ
画像の上にテキストを表示する方法は２つあります。
- Stackを使う方法
- Containerを使う方法
[Flutter]Text(テキスト)を縁取りするには？
Textで表示するテキストを縁取りする方法を紹介します。
www.choge-blog.com
2021.12.28
[Flutter]Text(テキスト)の下線を破線にするには？
Textの下線を破線にする方法を紹介します。
www.choge-blog.com
2021.12.27
[Flutter]Text(テキスト)に枠線をつけるには？
Textに枠線をつける方法を紹介します。
www.choge-blog.com
2021.12.27
[Flutter]Textの取り消し線の色を設定するには？
Textの取り消し線の色を設定する方法を紹介します。
www.choge-blog.com
2021.12.27
コメント