Flutter Text Widgetの使い方 〜 すべてのWidgetを学習

はじめに

自身の勉強を兼ねて、Widget Catalogで公開されている全てのWidgetについての解説やソースコードを交えた使い方などをまとめています。

基本方針として、掲載しているサンプルコードは公式サイトのサンプルを流用しています。しかし、公式サイトにはサンプルコードがないものや少し応用したケースはどうするの？という疑問が出てきたりするため、必要に応じてカスタマイズしたり、動作確認済みの自身のコードを掲載しています。間違い等ありましたらご指摘頂けると助かります。

カテゴリ	Widgetの種類	Qiitaまとめ記事
Accesibility	アクセシビリティに関するWidget	Coming Soon
Animation and Motion	アニメーションに関するWidget	Coming Soon
Assets, Images, and Icons	Asset/Icon/画像表示に関するWidget	Coming Soon
Async	Asyncパターン (FutureBuilder, StreamBuilder)	Coming Soon
Basics	最低限抑えるべき基本的なWidget	Coming Soon
Cupertino (iOS-style widgets)	iOS風の各種Widget	Coming Soon
Input	フォームやキー入力等の入力に関するWidget	Flutter Form入力系Widgetの使い方 〜 すべてのWidgetを学習
Interaction Models	タッチイベントやその他操作の応答に関するWidget	Coming Soon
Layout	レイアウトに関するWidget	Coming Soon
Material Components	Android マテリアルデザインの各種Widget	Coming Soon
Painting and effects	ペイント, エフェクト効果等のWidget	Coming Soon
Scrolling	GridView等のスクロール機能を保有するようなWidget	Coming Soon
Styling	テーマ等のスタイリングに関わるWidget	Coming Soon
Text	テキスト表示に関わるWidget	今回

Text Widgets一覧

文字の表示やその装飾に関する以下のWidgetについて解説します。

Widget名	用途
Text	テキスト表示用Widgetです。
RichText	文字列の中で複数の装飾を指定したい場合に利用するWidgetですが、Text.rich()の方が便利です。
DefaultTextStyle	複数のWidgetに対して任意のテキスト装飾を一括適したい場合に利用します。

Text

Text Widgetは、単一のスタイルの文字を表示する場合に利用します。Text Widgetは、内部的にはRichTextを利用しています。

テキストの装飾

文字を装飾する (Style) 場合には、styleプロパティにTextStyleクラスを利用します。

Text Widgetは、単一のスタイルのみ指定可能ですが、UtilityとしてText.richというコンストラクタがあります。これを利用することで、後述のRichTextのように、文字単位で複数の装飾を指定することが可能です。その場合、装飾したい文字単位でTextSpanを利用します。

サンプル

サンプルコード

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text(
      'Hello, World!',
    ),
    Text(
      '2行目だよ\n3行目はとても長いよ。あいうえおかきくけこさしすせそたちつてと１２３４５６７８９',
      textAlign: TextAlign.end,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(fontWeight: FontWeight.bold, color: Colors.red),
    ),
    const Text.rich(
      TextSpan(
        text: 'Hello', // default text style
        children: <TextSpan>[
          TextSpan(
              text: ' beautiful ',
              style: TextStyle(
                  fontStyle: FontStyle.italic, color: Colors.cyan)),
          TextSpan(
              text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
        ],
      ),
    )
  ],
);

RichText

RichTextは、デフォルトのスタイルを指定しつつ、複数のTextSpanを指定出来るWidgetです。基本的な用途は、Text.rich()と基本的には同じです。

サンプル

サンプルコード

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    RichText(
      text: TextSpan(
        text: 'Hello ',
        style: DefaultTextStyle.of(context).style,
        children: <TextSpan>[
          TextSpan(
              text: ' beautiful ',
              style: TextStyle(fontStyle: FontStyle.italic)),
          TextSpan(
              text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
          TextSpan(text: ' world!'),
        ],
      ),
    )
  ],
);

DefaultTextStyle

DefaultTextStyleは、複数のWidgetに対して毎度TextStyle()を適用するのは面倒なので、一括して特定の装飾を適用したい場合に利用します。

DefaultTextStyle.mergeを利用すると、指定したWidget以下の全Widgetを再帰的に指定した装飾を適用可能です。

サンプル

サンプルコード

static var _commonTextStyle = TextStyle(
  color: Colors.black,
  fontWeight: FontWeight.w800,
  fontFamily: 'Roboto',
  letterSpacing: 1.0,
  fontSize: 100.0,
);

@override
Widget build(BuildContext context) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      DefaultTextStyle(
        style: _commonTextStyle,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[Text('1'), Text('2'), Text('3')],
        ),
      ),
      Container(
        color: Colors.red,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[Text('4'), Text('5'), Text('6')],
        ),
      ),
      DefaultTextStyle.merge(
        style: _commonTextStyle,
        child: Container(
          color: Colors.green,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[Text('7'), Text('8'), Text('9')],
          ),
        ),
      ),
    ],
  );
}