Flutterにおいて、Form内でユーザーがドロップダウンリストからアイテムを選択するために使用するWidgetの1つがDropdownButtonFormFieldです。これは、フォームの一部として使用することができ、ユーザーが選択したアイテムをフォームデータに含めることができます。
Formってなんだろう？とお思いの方は、よかったら以下も見てみてください。
基本的な使い方
DropdownButtonFormFieldは、FormFieldを継承しているため、Form内に使用することができます。以下は、簡単な使用例です。
String dropdownValue = 'One';
@override
Widget build(BuildContext context) {
return Form(
child: DropdownButtonFormField<String>(
value: dropdownValue,
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
items: <String>['One', 'Two', 'Three', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
decoration: InputDecoration(
labelText: 'Select a number',
),
),
);
}
上記コードを実行する際のコード全体および、実行した結果は以下のとおりです。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
title: Text('TextFormField Test'),
),
body: MyForm(),
));
}
}
class MyForm extends StatefulWidget {
@override
_MyFormState createState() => _MyFormState();
}
class _MyFormState extends State<MyForm> {
String dropdownValue = 'One';
@override
Widget build(BuildContext context) {
return Form(
child: DropdownButtonFormField<String>(
value: dropdownValue,
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
items: <String>['One', 'Two', 'Three', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
decoration: InputDecoration(
labelText: 'Select a number',
),
),
);
}
}上記のコードでは、DropdownButtonFormFieldがForm内にあり、初期選択値として”One”が設定されています。ユーザーが選択した値が変更されるたびに、onChangedコールバック関数が呼び出され、変更された値がdropdownValue変数に設定されます。最後に、リストアイテムはDropdownMenuItem<String>ウィジェットのリストにマップされて、DropdownButtonFormFieldに渡されます。
使用できるプロパティと概要
以下に、DropdownButtonFormFieldで使用できる主なプロパティをリストアップしました。
- value: ドロップダウンリストで選択されたアイテムの値を保持するための変数。
- onChanged: ドロップダウンリストでアイテムが選択されたときに呼び出されるコールバック関数。
- items: DropdownMenuItemを生成するためのリスト。
- decoration: デコレーションに使用するInputDecoration。
各プロパティの使い方
value
valueプロパティは、DropdownButtonFormFieldで選択されたアイテムの値を保持するための変数です。この変数は状態管理に使用され、ユーザーがアイテムを選択するたびに、この値が更新されます。
String dropdownValue = 'One';
DropdownButtonFormField<String>(
value: dropdownValue,
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
...
)onChanged
onChangedプロパティは、ユーザーがドロップダウンリストでアイテムを選択するたびに呼び出されるコールバック関数です。このプロパティに渡される関数は、選択されたアイテムの値を受け取ります。そして、その値を状態管理のための変数に設定することができます。
String dropdownValue = 'One';
DropdownButtonFormField<String>(
value: dropdownValue,
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
...
)items
itemsプロパティは、DropdownMenuItemを生成するためのリストを設定します。このプロパティに渡されるリストは、DropdownMenuItemを生成するためのマップ関数を持つ必要があります。以下は、使用例です。
List<String> options = <String>['One', 'Two', 'Three', 'Four'];
DropdownButtonFormField<String>(
value: dropdownValue,
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: options.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
...
)decoration
decorationプロパティは、DropdownButtonFormFieldの装飾に使用されます。このプロパティには、InputDecorationを渡すことができます。以下は、使用例です。
DropdownButtonFormField<String>(
value: dropdownValue,
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: ...,
decoration: InputDecoration(
labelText: 'Select a number',
),
)まとめ
FlutterのDropdownButtonFormFieldは、フォーム内でユーザーがドロップダウンリストからアイテムを選択するために使用される便利なウィジェットです。初期選択値、選択肢のリスト、選択したアイテムの値を保持する変数、アイテムが選択されたときに呼び出されるコールバック関数などのプロパティをカスタマイズすることができます。以上が、FlutterのDropdownButtonFormFieldに関する基本的な使い方とプロパティについての解説でした。