CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2021/12/06 11:00

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

目次

主な入力コントロール

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

表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の実行例
図1:TextFormFieldの実行例

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

図2:TextFormFieldの構成要素
図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のプロパティになります。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Flutterで始めるモバイルアプリ開発

もっと読む

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。個人紹介主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5