[Flutter] ドロップダウンメニューで色を選べるようにする

こんにちは、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(),
    );
  }
}

以上