Chapter 08

Textを装飾する

kboy

2020.12.08に更新

このチャプターの目次

まずは現状を確認
Textウィジェットを２つ置く
文字の大きさを変えてみる
文字の色を変えてみる
文字の太さを変えてみる
文字をイタリックにしてみる
アンダーライン
TextAlignの変更
まとめ
参考文献

今まで何度か登場しているTextというウィジェットがあります。文字を表示するためのウィジェットです。今記事では、文字の大きさを変えたり、色を変えたりと言った方法を説明します。とても簡単です。

動画だと以下に当たります。

まずは現状を確認

前回は、画像の表示について勉強したので、現状はこんな感じですね↓

  @override
  Widget 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')),
                );
              },
            ),
          ],
        ),
      ),
    );

こちらを一旦整理して、以下みたいにColumnだけにして中身も空にしてみましょう。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('KBOYのFlutter大学'),
      ),
      body: Center(
        child: Column(
          children: [],
        ),
      ),
    );
  }

ここからスタートしていきます。

Textウィジェットを２つ置く

Columnの中に２つTextをおきます。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('KBOYのFlutter大学'),
      ),
      body: Center(
        child: Column(
          children: [
            Text('KBOYさん'),
            Text('じーこさん'),
          ],
        ),
      ),
    );
  }

こんな感じで表示されます↓

この２つの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をつけます。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('KBOYのFlutter大学'),
      ),
      body: Center(
        child: Column(
          children: [
            Container(
              width: double.infinity,
              child: Text('KBOYさん'),
            ),
            Text('じーこさん'),
          ],
        ),
      ),
    );
  }

ここで、textAlignを設定して、左寄せや真ん中寄せ、右寄せをやってみましょう。

デフォルトは左寄せになってます。

真ん中寄せ

Text(
  'KBOYさん',
  textAlign: TextAlign.center,
)

右寄せ

Text(
  'KBOYさん',
  textAlign: TextAlign.right,
)

まとめ

Textの装飾の要領がつかめたでしょうか？
動画の方ではもう少し詳しく解説しているのでよかったら見てみてください！

次回は入力フォームのウィジェットの紹介です！

参考文献

Text widgets