[Flutter]複数選択(multiple)できるドロップダウンボタン(dropdownbutton)を実装する方法

どうも、ちょげ(@chogetarou)です。

複数選択することのできるドロップダウンボタンを実装する方法を紹介します。

方法

プログラマー, プログラミング, コード, 仕事, コンピューター, インターネット, テクノロジー

複数選択できるドロップダウンボタンを実装するには、「multiselect」パッケージを使います。

まず、パッケージを「pubspec.yaml」で追加します。

dependencies:
  multiselect: ^0.0.4

そして、ファイルでインポートします。

import 'package:multiselect/multiselect.dart';

次に、値を保持するリストを用意します。

var selected = <String>[];

最後に、「DropDownMultiSelect」ウェジェットで、複数選択できるドロップダウンボタンを実装します。

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var selected = <String>[];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: DropDownMultiSelect(
          onChanged: (List<String> x) {
            setState(() {
              selected = x; //値の変更
            });
          },
          options: ['a', 'b', 'c', 'd'], //選択できる値
          selectedValues: selected, //用意したリストを指定
          whenEmpty: '選択してください', //プレースホルダー
        ),
      ),
    ));
  }
}