はじめに
自身の勉強を兼ねて、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')],
),
),
),
],
);
}