SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

主な入力コントロール

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

表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のプロパティになります。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
テキスト入力(2)

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Flutterで始めるモバイルアプリ開発連載記事一覧

もっと読む

この記事の著者

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/15228 2022/09/05 20:18

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング