Flutterで複数選択ドロップダウンを実装できる「multi_dropdown」の使い方

フォームやフィルタリング機能を作るときに「複数選択ができるドロップダウン」が欲しくなることがあるかと思います。
そんな時、パッケージ multi_dropdown を使えば、簡単に複数選択可能なドロップダウンメニューを実装できます。

今回は、基本的な使い方をサンプルコード付きで紹介します。

---

インストール

まずは pubspec.yaml に追加します。

dependencies:
  flutter:
    sdk: flutter
  multi_dropdown: ^2.0.0  # バージョンは最新を確認してください

その後、flutter pub get を実行してください。

---

基本的な使い方

import 'package:flutter/material.dart';
import 'package:multi_dropdown/multiselect_dropdown.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("multi_dropdown サンプル")),
        body: const Padding(
          padding: EdgeInsets.all(16.0),
          child: MultiDropdownExample(),
        ),
      ),
    );
  }
}

class MultiDropdownExample extends StatefulWidget {
  const MultiDropdownExample({super.key});

  @override
  State<MultiDropdownExample> createState() => _MultiDropdownExampleState();
}

class _MultiDropdownExampleState extends State<MultiDropdownExample> {
  final MultiSelectController<String> _controller = MultiSelectController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        MultiSelectDropDown<String>(
          controller: _controller,
          options: const [
            ValueItem(label: 'Apple', value: 'apple'),
            ValueItem(label: 'Banana', value: 'banana'),
            ValueItem(label: 'Orange', value: 'orange'),
            ValueItem(label: 'Grapes', value: 'grapes'),
          ],
          selectionType: SelectionType.multi,
          chipConfig: const ChipConfig(wrapType: WrapType.wrap),
          dropdownHeight: 200,
          optionTextStyle: const TextStyle(fontSize: 16),
          selectedOptionIcon: const Icon(Icons.check_circle),
          hint: "フルーツを選択してください",
          onOptionSelected: (options) {
            debugPrint("選択中: ${options.map((e) => e.value).toList()}");
          },
        ),
        const SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            debugPrint("最終的な選択: ${_controller.selectedOptions.map((e) => e.value).toList()}");
          },
          child: const Text("選択内容を確認"),
        )
      ],
    );
  }
}

---

ポイント

• MultiSelectDropDown がメインウィジェット
• options に ValueItem(label, value) を渡す
• selectionType を SelectionType.multi にすれば複数選択可能
• controller を使えば外部から選択内容を取得できる

---

まとめ

multi_dropdown を使えば、シンプルに複数選択ドロップダウンを実装できます。
特にフォーム入力や検索条件の絞り込みなどに便利です。

公式ドキュメントはこちら: pub.dev/packages/multi_dropdown