今まで何度か登場しているTextというウィジェットがあります。文字を表示するためのウィジェットです。今記事では、文字の大きさを変えたり、色を変えたりと言った方法を説明します。とても簡単です。
動画だと以下に当たります。
まずは現状を確認
前回は、画像の表示について勉強したので、現状はこんな感じですね↓
build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('KBOYのFlutter大学'),
),
body: Center(
child: Column(
children: [
Image.network(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
RaisedButton(
child: Text('次へ'),
onPressed: () {
// ここにボタンを押した時に呼ばれるコードを書く
Navigator.push(
context,
MaterialPageRoute(builder: (context) => NextPage('KBOY')),
);
},
),
],
),
),
);
Widget
こちらを一旦整理して、以下みたいにColumnだけにして中身も空にしてみましょう。
build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('KBOYのFlutter大学'),
),
body: Center(
child: Column(
children: [],
),
),
);
}
Widget
ここからスタートしていきます。
Textウィジェットを2つ置く
Columnの中に2つTextをおきます。
build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('KBOYのFlutter大学'),
),
body: Center(
child: Column(
children: [
Text('KBOYさん'),
Text('じーこさん'),
],
),
),
);
}
Widget
こんな感じで表示されます↓
この2つのTextをいろいろ変えていきましょう。
文字の大きさを変えてみる
まずは
Text('KBOYさん')
に、styleのプロパティを追加して、TextStyle()
を入れます。
Text(
'KBOYさん',
style: TextStyle(),
)
↑こんな感じ。これが基本です。
このTextStyleのプロパティに追加して文字の大きさを変更していきます。
Text(
'KBOYさん',
style: TextStyle(
fontSize: 20,
),
)
↑fontSizeを追加してみました。
何もサイズを指定しない時は14くらいなので、20にすると以下みたいになります。↓
40にするとこう↓
文字の色を変えてみる
次はそのまま色を変えてみましょう。
TextStyleにcolorのプロパティを追加します。
例えば、緑を指定してみると、、
Text(
'KBOYさん',
style: TextStyle(
fontSize: 20,
color: Colors.green,
),
)
↓こうなります。
Colors.green
というのは、マテリアルデザインに用意された色の一つで、もちろんカラーコードなどで指定する方法もあります。
文字の太さを変えてみる
そのまま次は太さを変えます。
Text(
'KBOYさん',
style: TextStyle(
fontSize: 20,
color: Colors.green,
fontWeight: FontWeight.bold,
),
)
文字をイタリックにしてみる
fontStyle: FontStyle.italic,
を追加して、文字をイタリックにもできます↓
Text(
'KBOYさん',
style: TextStyle(
fontSize: 20,
color: Colors.green,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
),
)
アンダーライン
次はdecorationというプロパティ。アンダーラインを追加できます↓
Text(
'KBOYさん',
style: TextStyle(
fontSize: 20,
color: Colors.green,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
decoration: TextDecoration.underline,
),
)
TextAlignの変更
一旦ここで、TextStyleを全部消して、TextをContainerで囲んでみます。そして、横幅を画面いっぱいにするためにdouble.infinity
をつけます。
build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('KBOYのFlutter大学'),
),
body: Center(
child: Column(
children: [
Container(
width: double.infinity,
child: Text('KBOYさん'),
),
Text('じーこさん'),
],
),
),
);
}
Widget
ここで、textAlignを設定して、左寄せや真ん中寄せ、右寄せをやってみましょう。
デフォルトは左寄せになってます。
真ん中寄せ
Text(
'KBOYさん',
textAlign: TextAlign.center,
)
右寄せ
Text(
'KBOYさん',
textAlign: TextAlign.right,
)
まとめ
Textの装飾の要領がつかめたでしょうか?
動画の方ではもう少し詳しく解説しているのでよかったら見てみてください!
次回は入力フォームのウィジェットの紹介です!
参考文献
Text widgets