Flutterでtextの装飾を行うコードをまとめて紹介します。
もっと良い書き方やコードの不備などありましたら、ご指摘お願いします。
1.太字のtext
Text(
'太字',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
2.背景付きのtext
Container(
color: Colors.blue,
child: Text(
'背景をつける',
style: TextStyle(fontSize: 20),
),
),
3.枠線で囲われたtext
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blue),
),
child: Text(
"枠線で囲う",
style: TextStyle(fontSize: 20),
),
),
4.角丸の枠線で囲われたtext
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.blue),
),
child: Text(
"枠線を丸くする",
style: TextStyle(fontSize: 20),
),
),
5.下線ありのtext
Text(
"下線",
style: TextStyle(
decoration: TextDecoration.underline,
fontSize: 20,
),
),
6.文字の間にスペースを作る
Text(
"文字の間にスペース",
style: TextStyle(
letterSpacing: 6.0,
fontSize: 20,
),
),
7. 一部の文字だけを装飾する
RichText(
text: TextSpan(
children: [
TextSpan(
text: '一部の文字だけ',
style: TextStyle(color: Colors.black ,fontSize: 20),
),
TextSpan(
text: '装飾',
style: TextStyle(color: Colors.blue ,fontSize: 40, fontWeight: FontWeight.bold),
),
],
),
)
8. 影をつける
Text(
'影をつける',
style: TextStyle(
fontSize: 20,
shadows: <Shadow>[
Shadow(
color: Colors.grey,
offset: Offset(5.0, 5.0),
blurRadius: 3.0,
),
],
),
),