【Flutter】Textの文字色・背景色を変更する

Textの文字色・背景色を変更する方法を紹介します。

今回はTextStylecolor backgroundColorを使用します。

\ 世界最大級のオンライン学習サービス /

目次

文字色の変更

Text(
  'Hello World',
  style: TextStyle(
    fontSize: 30,
    color: Colors.blue,
  ),
),

colorで文字色を指定します。

文字の背景色を変更

テキスト外側の余白を調整しない場合

Text(
  'Hello World',
  style: TextStyle(
    fontSize: 30,
    color: Colors.white,
    backgroundColor: Colors.blue,
  ),
),

Textの余白を調整しない場合はbackgroundColorで背景色を指定します。

テキスト外側の余白を調整する場合

Container(
  color: Colors.blue,
  padding: EdgeInsets.all(30),
  child: Text(
    'Hello World',
    style: TextStyle(
      fontSize: 30,
      color: Colors.white,
    ),
  ),
),

文字色の背景色はContainerCardなどでPaddingを使用し余白を調整できます。

参考

  • URLをコピーしました!
目次