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

前回の続きです✨

前回はこちら↓

ちょっとこのあたりから難しくなってきましたw

今回まとめられなかったものについてはまたちゃんと使うときに改めてやります👌

それではレッツゴ😆✨🙌

テキストの前景・背景

  • テキストの前景を指定する
  • テキストの背景を指定する

テキストの前景を指定する – forground:

  • foregroundパラメータに”Paintオブジェクト”を渡す
  • テキストの前景に指定されたエフェクトが表示される
  • colorパラメータはforegroundに”Paint()..color = (Colorオブジェクト)”を渡したのと同じ
  • スタックさせることで、枠付き文字を表現できる

※Paintオブジェクトについては別記事にする予定です。

// 省略

        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text(
              'テキスト',
              style: TextStyle(
                fontSize: 50.0,
                color: Colors.amber,
              ),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                fontSize: 50.0,
                foreground: Paint()..color = Colors.amber,
              ),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                fontSize: 50,
                foreground: Paint()
                  ..color = Colors.amber
                  ..style = PaintingStyle.stroke
                  ..strokeWidth = 8,
              ),
            ),
            Stack(
              children: <Widget>[
                Text(
                  'テキスト',
                  style: TextStyle(
                    fontSize: 50.0,
                    foreground: Paint()
                      ..style = PaintingStyle.stroke
                      ..strokeWidth = 15
                      ..color = Colors.amber,
                  ),
                ),
                Text(
                  'テキスト',
                  style: TextStyle(
                    fontSize: 50.0,
                    foreground: Paint()
                      ..style = PaintingStyle.stroke
                      ..strokeWidth = 5
                      ..color = Colors.red,
                  ),
                )
              ],
            ),
          ],
        ),

// 省略

テキストの背景を指定する – background:

  • backgroundパラメータに”Paintオブジェクト”を渡す
  • テキストの背景に指定されたエフェクトが表示される
  • backgroundColorパラメータはbackgroundに”Paint()..color = (Colorオブジェクト)”を渡したのと同じ
// 省略

        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text(
              'テキスト',
              style: TextStyle(
                fontSize: 50.0,
                backgroundColor: Colors.amber,
              ),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                fontSize: 50.0,
                background: Paint()..color = Colors.amber,
              ),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                fontSize: 50,
                background: Paint()
                  ..color = Colors.amber
                  ..style = PaintingStyle.stroke
                  ..strokeWidth = 8,
              ),
            ),
            Stack(
              children: <Widget>[
                Text(
                  'テキスト',
                  style: TextStyle(
                    fontSize: 50.0,
                    background: Paint()
                      ..style = PaintingStyle.stroke
                      ..strokeWidth = 15
                      ..color = Colors.amber,
                  ),
                ),
                Text(
                  'テキスト',
                  style: TextStyle(
                    fontSize: 50.0,
                    background: Paint()
                      ..style = PaintingStyle.stroke
                      ..strokeWidth = 5
                      ..color = Colors.red,
                  ),
                )
              ],
            ),
          ],
        ),

// 省略

foreground、backgroundで表現できることは多そうですね。

これもまた別記事で色々検証しようと思います😆

フォント応用

  • フォントの優先順位を決める

フォントの優先順位を決める – fontFamilyFallback:

  • fontFamilyFallbackパラメータに”フォントファミリーを表す文字列のリスト”を渡す
  • fontFamilyプロパティで指定したフォントが見つからなかったとき、このリストを検索して使用する
  • リスト内にもfontFamilyにも見つからなかったとき、デフォルトのフォントが使用される。
// 省略

        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text(
              'テキスト',
              style: TextStyle(
                fontSize: 50.0,
                fontWeight: FontWeight.bold,
                fontFamily: 'sugoiFont',  // ←存在しないフォント
              ),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                fontSize: 50.0,
                fontWeight: FontWeight.bold,
                fontFamily: 'sugoiFont',  // ←存在しないフォント
                fontFamilyFallback: <String>[
                  "NotoSerifJP",
                ],
              ),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                fontSize: 50.0,
                fontWeight: FontWeight.bold,
                fontFamily: 'sugoiFont',  // ←存在しないフォント
                fontFamilyFallback: <String>[
                  "mottoSugoiFont",  // ←存在しないフォント
                  "KosugiMaru",
                  "NotoSerifJP",
                ],
              ),
            ),
          ],
        ),

// 省略

💡フォントを設定する方法

自分で用意したカスタムフォントをアプリに適用したい場合は、こちらの記事を御覧ください✨

デバッグ用

スタイルにラベルを付ける – debugLabel:

  • debugLabelパラメータに”このスタイルを表す文字列”を渡す
  • デバッグ時に「このフォントはどこから来たのか」を確認するために使用
  • “copyWith”や”merge”メソッドでもとのスタイルがわからなくなるような場合、便利
class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  // ①:元のTextStyle
  TextStyle _mainStyle = TextStyle();

  // ②:①をコピーしたTextStyle
  TextStyle _copyStyle = TextStyle();

  // ③:①と他のスタイルをマージさせて出来たTextStyle
  TextStyle _mergeStyle = TextStyle();

  @override
  void initState() {
    super.initState();

    _mainStyle = TextStyle(
      fontSize: 20.0,
      color: Colors.red,
      fontWeight: FontWeight.bold,
      debugLabel: 'MainStyle',  // デバッグラベルを指定
    );

    _copyStyle = _mainStyle.copyWith();

    _mergeStyle = _mainStyle.merge(
      TextStyle(
        fontFamily: 'NotoSerifJP',
        debugLabel: 'OtherStyle',  // デバッグラベルを指定
      ),
    );

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ホームスクリーン'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text(
              '${_mainStyle.debugLabel}',
              style: _mainStyle,
            ),
            Text(
              '${_copyStyle.debugLabel}',
              style: _copyStyle,
            ),
            Text(
              '${_mergeStyle.debugLabel}',
              style: _mergeStyle,
            ),
          ],
        ),
      ),
    );
  }
}

その他のコンストラクタ

他にもTextStyleにはコンストラクタがあります。

一応すべて検証してみたのですが、

検証方法が悪かったのか結果が全く変わらず、残念ながらこれらはよく分かりませんでした😓

なので代わりに、公式ドキュメントの説明を書いておきます。

また分かったときにこれらの解説をやりたいと思います👌

inherit

null値が祖先テキストスタイル(TextSpanツリーなど)の値に置き換えられるかどうか。

これがfalseの場合、明示的な値を持たないプロパティはデフォルトに戻ります。色は白、フォントサイズは10ピクセル、sans-serifフォントフェースです。(Google訳)

inherit property – TextStyle class – painting library – Dart API
  • 親ウィジェットのTextSpanと子ウィジェットのTextSpanに各々TextStyleを指定し、子ウィジェットの方のスタイルに”inherit: false”を指定したが変わらず。

textBaseline

このテキストスパンとその親テキストスパンの間、またはルートテキストスパンの場合はラインボックスで整列する必要がある共通ベースライン。(Google訳)

textBaseline property – TextStyle class – painting library – Dart API
  • 英字と漢字を並列にしtextBaseLineの設定を行ったが、どちらに設定してもベースラインはalphabetic固定だった。
  • DevToolにてベースラインの表示

fontFeatures

フォントがグリフを選択する方法に影響を与えるFontFeatureのリスト。

一部のフォントは、特定の文字をレンダリングする方法の複数のバリアントをサポートしています。 たとえば、フォントは比例数字と表形式の数字の両方を提供する場合があります。また、スラッシュ付きとスラッシュなしのゼロ桁のバージョンを提供する場合もあります。 FontFeatureを使用して、これらのバリアントのどれをレンダリングに使用するかを選択できます。

fontFeatures property – TextStyle class – painting library – Dart API
  • ドキュメント読んだけど本当に何言ってるか理解できなくて断念。
  • 特によく使いそうでもないので、また使う機会があれば勉強します👌
  • ↑これ書いてる途中でそれっぽい記事を見つけてなんとなく何言ってるかは理解できました。(ただ説明するとなるとまだ無理そうです)

次の課題はTextSpanかなぁ…