動画
要約
- widgetのスタイルを細かくデザインしたい場合はRichTextを使おう
- 文字列内で文字ごとに複数のフォントやサイズを使うこともできる
内容
アプリの情報伝達に文字は欠かせません。
文字のスタイルやデザインはとても重要です。
必要な機能の多くはText widgetに揃っています。Text widgetはテキストのサイズやフォント、スタイルなどを自由に変えることができます。
しかし、RichText widgetを使えば、もっと多くのことができます。
例えば、１行に複数のデザインを混ぜることができます。
例えば、太字やイタリック、下線など、様々なスタイルを組み合わせた文字列をつくることができます。
文字列の文字ごとに色やフォントを変えることだってできます。
使い方は、まずRichTextにTextSpanを渡します。
このTextSpanはツリー構造を持ち、childrenにさらにTextSpanを追加していくことができます。
まず最上部にデフォルトのテキストスタイルを設定します。
そのchildのTextSpanに別途TextStyleを設定すると、そのstyleをoverrideすることができます。
そのため、下のように文字ごとに異なるデザインを設定することができます。
また、TextSpanでジェスチャーのキャッチも可能で、タップできるリンクを作ることもできます。
関連記事
◆ Text Widgetの様々なオプションの使い方まとめ
【Flutter入門】Text widget 使い方あれこれ【サンプルコード】
まとめ
Widget of the Weekの#41 RichTextの日本語翻訳版でした。
RichTextを使うことで文字のデザインを自由自在にコントロールできます。
普段はText widgetでシンプルに実装し、重要なポイントではRichTextでこだわったデザインにする、といったような使い分けができると良さそうですね。
■ 次の記事はこちら
#42 – ReorderableListView
■Widget of the Week まとめ
Widget of the Week 一覧