Flutter図鑑

Select

Flutterでは二種類のSelect Widgetが提供されています。
Select Widgetは選択肢の中からユーザーが選択した情報を受け取ることに適しています。

ここではFlutterから提供されているSelect Widgetの使用方法をご紹介します。

基本的な使用方法

  • DropdownButton
  • DropdownMenu

Flutterから提供されているSelect Widgetには上記種類があります。
DropdownMenuはテキスト入力が可能であり、選択肢の検索ができる特徴があります。

DropdownButton(
  value: selectedValue,
  items: const [
    DropdownMenuItem(value: "Apple", child: Text("Apple")),
    DropdownMenuItem(value: "Grape", child: Text("Grape")),
    DropdownMenuItem(value: "Lemon", child: Text("Lemon")),
  ],
),
DropdownMenu(
  initialSelection: "Red",
  dropdownMenuEntries: [
    DropdownMenuEntry(value: "Red", label: "Red"),
    DropdownMenuEntry(value: "Green", label: "Green"),
    DropdownMenuEntry(value: "Blue", label: "Blue"),
  ]
)

DropdownButtonは、一般的な選択フィールドを作成したい時に有効です。

onChangeをnullに設定することで非活性化させることができます。
複雑なスタイルの変更が必要な場合はContainer()などのWidgetで囲うとより幅広いスタイルを実現することができます。

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: Colors.black),
    borderRadius: BorderRadius.circular(10),
  ),
  child: DropdownButton(
    underline: const SizedBox(),
    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 3),
    borderRadius: BorderRadius.circular(10),
    items: [...]
  ),
),

DropdownMenuは選択肢の検索が可能であり、多数の選択肢がある場合に向いています。
選択されたデータを取得するにはTextEditingController()を使用して対応することができます。

非常に使いやすいWidgetですが、Disableやバリデーションの設定はデフォルトで設定できないため、フォームでの活用は工夫しなければならないWidgetです。

DropdownMenu(
  label: const Text("Outline"),
  ...
  inputDecorationTheme: InputDecorationTheme(
    labelStyle: const TextStyle(color: Colors.blue),
    enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Colors.lightBlue[100]!)),
    focusedBorder: const OutlineInputBorder(
        borderSide: BorderSide(color: Colors.blue)),
  ),
  dropdownMenuEntries: const [
    DropdownMenuEntry(value: "Apple", label: "Apple"),
    DropdownMenuEntry(value: "Grape", label: "Grape"),
    DropdownMenuEntry(value: "Lemon", label: "Lemon"),
  ]
),

Validation

  • DropdownButtonFormField

選択されたデータの検証を行うためにはDropdownButtonFormFieldを使用して対応することができます。
基本的な使用方法はDropdownButtonとあまり変わりませんが、Form()で囲みvalidatorを指定することで、自由にエラーメッセージを設定できます。

final _formKey = GlobalKey<FormState>();
Form(
  key: _formKey,
  child: DropdownButtonFormField(
    value: selectedValue,
    validator: (value) {
      if (value == "Apple") return "Apple is error!";
      return null;
    },
    ...
  ),
),

API

さらに詳しく知りたい場合は、以下の公式ドキュメントから参照してください。

Previous
Next