Text Widget | WebworksTips

Text Widgetを使うことで、テキストを表示することができる。

テキストを表示する

とりあえずテキストを表示したい場合は、引数に表示したい文字列を指定するだけでよい。

Text('Default')

テキストの太さや色などスタイルを変更したい場合は、引数に textStyle を指定すればよい。

Text(
  'Hello',
  style: TextStyle(
    fontSize: 20,
  ),
)

Text(
  'Hello',
  style: TextStyle(
    color: Colors.green,
  ),
)

Text(
  'Hello',
  style: TextStyle(
    fontWeight: FontWeight.bold,
  ),
)

Text(
  'Hello',
  style: TextStyle(
    fontStyle: FontStyle.italic,
  ),
)

Text(
  'Hello',
  style: TextStyle(
    decoration: TextDecoration.underline,
  ),
)

テキストの右寄せや左寄せなど textAlign で表示位置を指定できる。

Text(
  "Hello", 
  textAlign: TextAlign.left, // 左寄せ
  textAlign: TextAlign.center, // 中央寄せ
  textAlign: TextAlign.right, // 右寄せ
)