Flutterではマテリアルデザインを用いたコンポーネントをどう使うのか【テキスト編】

Flutterで始めるモバイルアプリ開発 第13回

　前回までは、レイアウトについて紹介しました。今回からは、テキストやボタン、入力コンポーネントなどのコンポーネントを紹介していきます。これらの多くのコンポーネントは、Flutterが採用している「マテリアルデザイン」をベースとしています。そのため、そのまま利用しても十分実用的なコンポーネントになっています。

マテリアルデザインについて

　Flutterとマテリアルデザインは非常に密接な関係にあります。もともとマテリアルデザインというものがGoogleから発表されましたが、FlutterもGoogleと強く関係があることからも当然の流れと言えるでしょう。

　従って開発者は、Flutterのコンポーネントをどう使うかというよりは、マテリアルデザインを用いたコンポーネントをFlutterではどのように使うかという流れになります。どのようなコンポーネントがあるか、または、どのようなカスタマイズができるのかを調べるのに、Flutterのドキュメントを参照するよりも、MATERIAL DESIGNのサイトの方がわかりやすいかもしれません。

　このサイトでは、各言語に応じてマテリアルデザインで用意されたコンポーネントをどのように利用するかが紹介されています。例えば、図1のようにサイトでは言語でFlutterを選択すれば、どのようなコードを記述するかの例示がされるようになっています。

図1：マテリアルデザインのサイト（コンポーネント一覧画面）のキャプチャ

テキスト

　テキストは、文字を扱う場合に必須となります。テキスト自体は、マテリアルデザインとは関係ありませんが、スタイルのタイプをどのように分類するかといった視点では関係しています。

基本的なテキストの利用方法

　アプリケーションでは、ボタンなどの表示時に利用するラベルという位置づけのテキストと説明などの文章を示すテキストの二種類がありますが、Flutterではどちらもテキストという扱いになります。

　また、テキストには、同じスタイル（装飾など）でのテキストと、さまざまスタイルが混じったテキストがあり、後者はリッチテキストと呼ばれます。これらの使い方を示したものがリスト1で、実行結果が図2です。

図2：テキストとリッチテキストを使った実行例

［リスト1］テキストとリッチテキストを使ったサンプルコード（lib/text/Text1Widget.dartの抜粋）

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があります。

表1：TextStyleの主なプロパティ

プロパティ値	説明
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のような値を指定が可能です。

表2：overflowのプロパティ例

プロパティ値	説明
TextOverflow.ellipsis	表示できない場合には、文末に「...」を表示して、はみ出す文字列を表示しない。
TextOverflow.clip	表示できないはみ出した文字列部分は切り取る。文字の途中で切れてしまう場合もある。ただし、表示できない行は表示しない。
TextOverflow.fade	clipと同様。ただし、フェードするように透過度を変えて文字を非表示にする。
TextOverflow.visible	はみ出しを考慮せずに表示する。clipと違い、表示できない行を考慮しないので、縦横ともに表示できない場合が生じる。