マテリアルデザインについて
Flutterとマテリアルデザインは非常に密接な関係にあります。もともとマテリアルデザインというものがGoogleから発表されましたが、FlutterもGoogleと強く関係があることからも当然の流れと言えるでしょう。
従って開発者は、Flutterのコンポーネントをどう使うかというよりは、マテリアルデザインを用いたコンポーネントをFlutterではどのように使うかという流れになります。どのようなコンポーネントがあるか、または、どのようなカスタマイズができるのかを調べるのに、Flutterのドキュメントを参照するよりも、MATERIAL DESIGNのサイトの方がわかりやすいかもしれません。
このサイトでは、各言語に応じてマテリアルデザインで用意されたコンポーネントをどのように利用するかが紹介されています。例えば、図1のようにサイトでは言語でFlutterを選択すれば、どのようなコードを記述するかの例示がされるようになっています。
テキスト
テキストは、文字を扱う場合に必須となります。テキスト自体は、マテリアルデザインとは関係ありませんが、スタイルのタイプをどのように分類するかといった視点では関係しています。
基本的なテキストの利用方法
アプリケーションでは、ボタンなどの表示時に利用するラベルという位置づけのテキストと説明などの文章を示すテキストの二種類がありますが、Flutterではどちらもテキストという扱いになります。
また、テキストには、同じスタイル（装飾など）でのテキストと、さまざまスタイルが混じったテキストがあり、後者はリッチテキストと呼ばれます。これらの使い方を示したものがリスト1で、実行結果が図2です。
Widget build(BuildContext context) {
// （1） テキストのスタイル例
const textStyle = TextStyle(
color: Colors.black54,
fontWeight: FontWeight.normal,
fontStyle: FontStyle.normal,
decoration: TextDecoration.none,
fontSize: 20
);
// （2） テキストのスタイル例
const boldStyle = TextStyle(
color: Colors.redAccent,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.normal,
decoration: TextDecoration.none,
fontSize: 40
);
return Container(
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// （3） テキストでのスタイル指定例
Text(
'Hello World',
textAlign: TextAlign.center,
style: textStyle,
),
// （4） リッチテキストの使用例
RichText(
// （5） 行数の指定と、表示できない場合の指定
maxLines: 1,
overflow: TextOverflow.ellipsis,
text: TextSpan(
children: [
TextSpan(text : 'さあ', style: textStyle),
TextSpan(text : 'Flutter', style: boldStyle),
TextSpan(text : "を始めましょう", style: textStyle)
]
),
),
],
)
);
)
（1）と（2）は実際のテキストを利用する際のスタイルの宣言例です。スタイルを指定する場合にはTextStyleを利用します。非常に多くのプロパティがありますが、主に利用するプロパティには表1があります。
| プロパティ値 | 説明 |
|---|---|
| color | 文字色 |
| fontWeight |
フォントの太さ、または重みを指定します。
|
| fontStyle |
フォントのスタイルである、通常（normal）または、イタリック(italic)などを指定します。
|
| fontSize |
フォントのサイズを指定します。
|
| fontFamily | フォントファミリ名を指定します。 |
| decoration |
フォントに下線や上線のような装飾をつける場合に指定します。また、装飾が必要ない場合にはnoneを指定します。
|
| letterSpacing |
文字と文字の間が開きの間隔を指定します。
|
（3）はTextでのスタイル(style)と位置揃え(textAlign)を指定しています。また、RichTextは（4）のように利用します。TextSpanはHTMLで言えば、divであり、また、spanのようなものと思えばよいかと思います。
divのように複数の文字列を格納する場合にはchildrenプロパティを利用し、spanのように利用する場合には、textプロパティを利用して文字列を指定します。
また、表示する際に（5）のように最大表示行数(maxLines)を指定することもできます。表示がオーバーしてしまった場合にどのようなふるまいをするかは、overflowプロパティに表2のような値を指定が可能です。
| プロパティ値 | 説明 |
|---|---|
| TextOverflow.ellipsis |
表示できない場合には、文末に「...」を表示して、はみ出す文字列を表示しない。
|
| TextOverflow.clip | 表示できないはみ出した文字列部分は切り取る。文字の途中で切れてしまう場合もある。ただし、表示できない行は表示しない。 |
| TextOverflow.fade |
clipと同様。ただし、フェードするように透過度を変えて文字を非表示にする。
|
| TextOverflow.visible |
はみ出しを考慮せずに表示する。clipと違い、表示できない行を考慮しないので、縦横ともに表示できない場合が生じる。
|
