Flutterのマテリアルデザインを使ったコンポーネントを紹介【入力コンポーネント編】

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

　前回はボタンなどについて紹介しましたが、今回からは入力コンポーネントを紹介します。入力コンポーネントは種類が多いので、今回は利用することが多いテキスト入力について説明します。

主な入力コントロール

　マテリアルデザインで紹介されている入力コンポーネントには、以下のようなコンポーネントがあります。これらのコンポーネントを使うことでほとんどの入力形式は対応できると思います。もちろん、これらの入力コンポーネントをそのまま利用することもできますが、他のコンポーネントと組み合わせることもできます。

表1：マテリアルデザインで提供されている主な入力コンポーネント

入力種類	クラス／関数	説明
テキスト入力	TextFormField	テキストを入力するためのフィールド。複数行の入力や伏せ字（パスワード）形式もこのクラスを利用する。
チェックボックス	Checkbox	チェックボック形式の入力フィールド。
ラジオボタン	Radio	ラジオボタン形式の入力フィールド。
スイッチ	Switch	ON／OFFをスイッチUIで設定するフィールド。チェックボックスと同様。
選択（セレクト）	DropdownButton	厳密には複数のメニューをドロップダウンで表示するコンポーネントだが、選択肢から選択する場合に利用するコンポーネント。
スライダー	Slider	スライダー形式で値を指定する入力コンポーネント。
日付選択	showDatePicker/showDateRangePicker	ダイアログで日付を選択できる入力コンポーネント。レンジで選択できる形式にも対応している。
時間選択	showTimePicker	表ダイアログで時間を選択できる入力コンポーネント。

テキスト入力

　テキスト入力（TextFormField ）は、入力を受け付けるためのコンポーネントとして必須と言えるコンポーネントです。

　マテリアルデザインのテキストコンポーネントは、HTMLのinputタグに比べUIが複雑になっています。マテリアルデザイン自体は見た目だけではなく、提供すべき情報まで提案しているコンポーネントです。そのため、少々難しいと感じるところもあります。しかし、カスタマイズ性も高く、素早く高度なUIが作成できます。

コンポーネントの基本構成

　さまざまにカスタマイズができるのですが、図1はUIに関して設定を変えずに作成した場合の表示例です。このままでも十分すぎるほどのUIが実現できていると思います。

　しかし、逆にここまでのUIが実現できていると、ちょっとした変更をしたい場合に少し面倒なのではと心配になる部分もあります。そのためにも、TextFormFieldがどのような部品で構成されているのかを理解するのが重要になってきます。

図1：TextFormFieldの実行例

　図2は構成されている要素を示した図です。このように多くの要素で構成され、その意味を示したものが表2です。

図2：TextFormFieldの構成要素

表2：TextFormFieldのプロパティ

部品プロパティ	説明
icon	入力領域の左側にアイコンを表示する
prefix/prefixText/prefixIcon	入力領域内の左側にアイコンやテキストなどを表示する。
suffix/suffixText/suffixText	入力領域内の右側にアイコンやテキストなどを表示する。
labelText	フィールドのラベルを表示する。
hintText	入力値がない場合に表示するラベル。HTMLでのplaceholderに相当します。
helperText	入力フィールドの下に説明などのテキストを表示する。
errorText	入力フィールドの下にエラー時のテキストを表示する。デフォルトでは、赤字になる。errorTextに値が設定されている場合には、helperTextのテキストは表示されません。
counterText	入力中の文字数を表示する。
border	入力フィールドのボーダーを設定する。
filled/fillColor	入力フィールド内の背景を設定する。

　先ほどの表示例のコードはこれらのプロパティを使うとリスト1のように記述します。

［リスト1］TextFormFieldを使ったサンプルコード（lib/textfield/TextFieldWidget.dartの抜粋）

return TextFormField(
  // （1） 入力文字通の上限
  maxLength: 20,
  // （2） 表示要素の設定
  decoration: InputDecoration(
    icon: Icon(Icons.email),
    suffixIcon: Icon(Icons.check_circle),
    labelText : 'ログインID',
    hintText: "ログインIDを入力してください",
    helperText: "ログインIDは郵送でお知らせしているIDです",
    filled: true,
  )
);

　（1）のようにmaxLengthを指定すると、文字数の最大設定が可能であり、この設定をすることでcounterTextが自動で表示されます。また、表2での部品プロパティはTextFormFieldクラスのプロパティではなく、実際には（2）decorationプロパティに指定するInputDecorationのプロパティになります。