この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは、CX事業本部 Delivery部の若槻です。
Flutterでドロップダウンメニュー（ドロップダウンリスト）を実装したい場合はDropdownButtonクラスを使用します。
今回は、このDropdownButtonで実装したドロップダウンメニューで色を選べるようにしてみました。
できあがったもの
やってみた
メニューアイテムにテキストを指定する
まずはよくある実装としてドロップダウンメニューのアイテムがテキストの実装です。これはドキュメントのExampleほとんどそのままの実装となります。
lib/main.dart
import 'package:flutter/material.dart';
const List<String> list = <String>['Red', 'Blue', 'Green', 'Yellow'];
void main() => runApp(const DropdownButtonApp());
class DropdownButtonApp extends StatelessWidget {
const DropdownButtonApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('DropdownButton Sample')),
body: const Center(
child: DropdownButtonExample(),
),
),
);
}
}
class DropdownButtonExample extends StatefulWidget {
const DropdownButtonExample({super.key});
@override
State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
}
class _DropdownButtonExampleState extends State<DropdownButtonExample> {
String dropdownValue = list.first;
@override
Widget build(BuildContext context) {
return DropdownButton<String>(
value: dropdownValue,
onChanged: (String? value) {
setState(() {
dropdownValue = value!;
});
},
items: list.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
),
);
}).toList(),
);
}
}
メニューアイテムにアイコンも指定できる
メニューアイテムに指定するものはウィジェットのため、アイコンを指定することもできます。
lib/main.dart
class _DropdownButtonExampleState extends State<DropdownButtonExample> {
String dropdownValue = list.first;
@override
Widget build(BuildContext context) {
return DropdownButton<String>(
value: dropdownValue,
onChanged: (String? value) {
setState(() {
dropdownValue = value!;
});
},
items: list.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Icon(
Icons.square,
color: Colors.red,
),
);
}).toList(),
);
}
}
そこでこのようにソースとなるリストをColorsクラスのオブジェクトで作成し、メニュー毎に色を変えるようにしてみました。DropdownButtonのvalueに指定できるのはString型となるため、ColorsクラスのオブジェクトをtoString()により文字列型に変換した値（例：MaterialColor(primary value: Color(0xff4caf50))）を指定するようにしています。
lib/main.dart
import 'package:flutter/material.dart';
const List<Color> list = <Color>[
Colors.red,
Colors.blue,
Colors.green,
Colors.yellow
];
void main() => runApp(const DropdownButtonApp());
class DropdownButtonApp extends StatelessWidget {
const DropdownButtonApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('DropdownButton Sample')),
body: const Center(
child: DropdownButtonExample(),
),
),
);
}
}
class DropdownButtonExample extends StatefulWidget {
const DropdownButtonExample({super.key});
@override
State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
}
class _DropdownButtonExampleState extends State<DropdownButtonExample> {
String dropdownValue = list.first.toString();
@override
Widget build(BuildContext context) {
return DropdownButton<String>(
value: dropdownValue,
onChanged: (String? value) {
setState(() {
dropdownValue = value!;
});
},
items: list.map<DropdownMenuItem<String>>((Color value) {
return DropdownMenuItem<String>(
value: value.toString(),
child: Icon(
Icons.square,
color: value,
),
);
}).toList(),
);
}
}
メニューアイテムにコンテナを指定する
今回は横長の長方形の図形を表示したかったので、Containerクラスを使用しました。
lib/main.dart
class _DropdownButtonExampleState extends State<DropdownButtonExample> {
String dropdownValue = list.first.toString();
@override
Widget build(BuildContext context) {
return DropdownButton<String>(
value: dropdownValue,
onChanged: (String? value) {
setState(() {
dropdownValue = value!;
});
},
items: list.map<DropdownMenuItem<String>>((Color value) {
return DropdownMenuItem<String>(
value: value.toString(),
child: Container(
color: value,
width: 50,
height: 25,
),
);
}).toList(),
);
}
}
以上
2
