はじめに
テキストのスタイルを設定する方法をまとめました。
設定方法:テキストウィジェットに style: TextStyle を追加する。
Text('文字',
style: TextStyle( ここにスタイルの内容 )
),
色付き文字
文字色が変更されます。
// 赤
style: TextStyle(color: Colors.red)
背景色付き文字
文字の背景色が変更されます。
// アンバー
style: TextStyle(backgroundColor: Colors.amber)
文字サイズ変更
文字のサイズが変更されます。
// 文字サイズ32
style: TextStyle(fontSize: 32)
太さ変更
文字の太さが変更されます。
// 太文字
style: TextStyle(fontWeight: FontWeight.bold)
また、FontWeight.W<100~900>の範囲で太さを変更できます。
// 細文字 ( w100~900 任意の太さを指定可能 )
style: TextStyle(fontWeight: FontWeight.w100)
書体変更
斜め文字に変更できます。
style: TextStyle(fontStyle: FontStyle.italic)
fontFamilyで任意のフォントに変更することもできます。
style: TextStyle(fontFamily: 'Aoboshi One')
線付き文字
文字上にラインを追加します。
style: TextStyle(decoration: TextDecoration.overline)
アンダーラインを追加します。
style: TextStyle(decoration: TextDecoration.underline)
decorationColorとの併用も可能です。
style: TextStyle(decoration: TextDecoration.underline,
decorationColor: Colors.red)
decorationThicknessでラインの太さも変更できます。
style: TextStyle(decoration: TextDecoration.underline,
decorationThickness: 4)
打ち消し線を追加します。
style: TextStyle(decoration: TextDecoration.lineThrough)
アンダーラインを点線に変更できます。
style: TextStyle(decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed)
TextDecorationStyle.doubleで二重線に変更できます。
style: TextStyle(decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.double)
アンダーライン(波線)を追加します。
style: TextStyle(decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.wavy)
影付き文字
文字に影を追加できます。
[Shadow(offset: Offset(5, 5)で影の位置
blurRadiusシャドウのぼかし効果の半径を指定します。
style: TextStyle(shadows: [Shadow(offset: Offset(5, 5), blurRadius: 2, color: Colors.black)])
まとめ
いかがだったでしょうか?
ご意見、ご感想ありましたらお気軽にコメントしてください。
Flutter開発において超基本なので参考になれば幸いです。
【参考文献】
コメント