Flutter基礎 – TextStyleを使って文字を装飾する(その1)

TextStyleウィジェットで何ができるの?

💡TextStyleウィジェット

  • Textウィジェットの文字列に装飾をつけることができる
  • 通常、TextコンストラクタのstyleパラメータにTextStyleオブジェクトを渡すことでスタイルを指定する
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ホーム画面'),
        centerTitle: true,
      ),
      body: Center(

        child: Text(
          'あいうえお',

          style: ~ここにTextStyleオブジェクトを渡す~

        ),

      ),
    );
  }
}

TextStyleの設定は奥が深い(長くなる)ので、

いくつかに分割して記事を書いていこうと思います。

今回は、一般的によく使われるであろうスタイルの指定方法を解説していきます🙌

基本的な使い方

今回紹介するのはこちらのスタイル設定方法😆

  • フォントサイズを変更する
  • フォントを変更する
  • 太字にする
  • 斜め文字にする
  • 文字色を変更する
  • 背景色を変更する

フォントサイズを変更する – fontSize:

💡ポイント

  • fontSize:“パラメータに、フォントサイズを指定する。
  • デフォルトのフォントサイズは14.0
// 省略

        child: Text(
          'あいうえお',

          // [ 写真左 ]
          style: TextStyle(fontSize: 10),

          // [ 写真右 ]
          // style: TextStyle(fontSize: 50),

        ),

// 省略

フォントを変更する – fontFamily:

💡ポイント

  • fontFamily:”パラメータに、予め定義していたフォントファミリー名を記述する
// 省略

        child: Text(
          'あいうえお',
          style: TextStyle(
            fontSize: 50,

            // [ 写真左 ]
            fontFamily: 'Kosugi',

            // [ 写真右 ]
            // fontFamily: 'NotoSerif',

          ),
        ),

// 省略

カスタムフォントの設定方法については、こちらの記事を御覧ください😆✨

文字の太さを調節する – fontWeight:

💡ポイント

  • fontWeight:“パラメータに、FontWeightオブジェクトを渡す
  • FontWeight.normal“はノーマルの太さ。w400。
  • FontWeight.bold“は太字。w700。
  • FontWeight.w100” ~ “FontWeight.w900”で太さを細かく調整可能
// 省略

        child: Text(
          'あいうえお',
          style: TextStyle(
            fontSize: 50,

            // [ 写真左 ]
            fontWeight: FontWeight.normal,

            // [ 写真右 ]
            // fontWeight: FontWeight.bold,

            // ※太さを調節する場合
            // fontWeight: FontWeight.w300,

          ),
        ),

// 省略

文字の字形を変更する – fontStyle

💡ポイント

  • fontStyle:“パラメータに、FontStyleオブジェクトを渡す
  • FontStyle.normal“はノーマル。デフォルト。
  • FontStyle.italic“は斜め文字
// 省略

        child: Text(
          'あいうえお',
          style: TextStyle(
            fontSize: 30,

            // [ ノーマル ]
            fontStyle: FontStyle.normal,

            // [ 斜め文字 ]
            fontStyle: FontStyle.italic,

          ),
        ),

// 省略

文字色・背景色を設定 – color: / backgroundColor:

💡ポイント

  • 文字色を変える場合、color:“パラメータに、色を指定する
  • 背景色を変える場合、backgroundColor:“パラメータに、色を指定する
  • 色指定はColorsの定数を使うと便利。
// 省略

        child: Text(
          'あいうえお',
          style: TextStyle(
            fontSize: 50,

            // [ 写真左 ] 文字色を指定
            color: Colors.green,

            // [ 写真右 ] 背景色を指定
            backgroundColor: Colors.amberAccent,

          ),
        ),

// 省略

テキストの周囲に線を引く – decoration:

💡ポイント

  • decoration引数に”TextDecoration”オブジェクトを渡す。
  • none“定数は、装飾無し。デフォルト。
  • underline“定数は、下線
  • overline“定数は、上線
  • lineThrough”定数は、取り消し線
// 省略

        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text(
              'TextDecoration.none',
              style: TextStyle(
                fontSize: 30,
                decoration: TextDecoration.none,
              ),
            ),
            Text(
              'TextDecoration.underline',
              style: TextStyle(
                fontSize: 30,
                decoration: TextDecoration.underline,
              ),
            ),
            Text(
              'TextDecoration.overline',
              style: TextStyle(
                fontSize: 30,
                decoration: TextDecoration.overline,
              ),
            ),
            Text(
              'TextDecoration.lineThrough',
              style: TextStyle(
                fontSize: 30,
                decoration: TextDecoration.lineThrough,
              ),
            ),
          ],
        ),

// 省略

次回はこちら!