⬇️

DropdownButtonを使ってみた

2024/02/01に公開

Flutter

はじめに

今回はいろんなサイトでよく見るドロップダウンメニューを作るために使用されるDropdownButtonを使ってみました。ドロップダウンメニューはアプリなどにおいて複数の選択肢からユーザーに選ばせる際に直感的なUIを提供します。

DropdownButtonとは

DropdownButtonとは項目リストから選択するためのマテリアルデザインです。ボタンには現在選択されている項目が表示されます。またボタンをクリックすると別の項目を選択することができるメニューを開くことができます。以下の３つのプロパティが必要です。
・ items ユーザーが選択できる項目のリストを指定します。
・ onChanged ユーザーが選択した時に呼ばれるコールバック関数を指定します。
・ value　現在選択している項目を指定します。

使用例

以下のようにして使用することができます。今回は九州の都道府県を選択できるものを作成します。

import 'package:flutter/material.dart';

const List<String> kyushuPrefectures = [
  '福岡県',
  '佐賀県',
  '長崎県',
  '熊本県',
  '大分県',
  '宮崎県',
  '鹿児島県',
  '沖縄県'
];

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

class DropdownButtonApp extends StatelessWidget {
  const DropdownButtonApp({super.key});
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
       home: Scaffold(
         body: Center(
           child: DropdownButtonExample(),
         ), 
       ),
    );
  }
}

class DropdownButtonExample extends StatefulWidget {
  const DropdownButtonExample({super.key});
  
  @override
  State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
}

class _DropdownButtonExampleState extends State<DropdownButtonExample> {
  String dropdownValue = kyushuPrefectures.first;
  
  @override 
  Widget build(BuildContext context) {
    return SizedBox(
      width: 100,
      child: DropdownButton<String>(
       value: dropdownValue,
       onChanged: (String? newValue) {
         setState(() {
           print(newValue);
           if (newValue != null) {
               dropdownValue = newValue;
           }
         }); 
       },
       items: kyushuPrefectures.map<DropdownMenuItem<String>>((String value) {
         return DropdownMenuItem<String>(
           value: value,
           child: Text(value),
         );
       }).toList(),
    ),
      );
  }
}

以下の図のようになります。

dropdownvalueに九州の都道府県が入っているリストの先頭を入れて、それをvalueに指定します。そうすることでここでは福岡が最初の状態で表示されることになります。
onChangedコールバックでは新しい選択がnullでない場合にdropdownValueを更新し、setStateを呼び出してUIの再構築を行ないます。
itemsプロパティではkyushuPrefecturesをmapメソッドを使用して、DropdownMenuItem<String>のリストに変換しています。

おわりに

最後まで読んでいただきありがとうございました。この記事では、Flutterの基本的なWidgetであるDropdownButtonの使用方法について解説しました。今回の例では、基本的なプロパティにしかふれていません。他にもいろんなプロパティがあるので、気になる方は実際に試してみるのがいいかもしれないです。

DropdownButtonを使ってみた

はじめに

DropdownButtonとは

使用例

おわりに

参考文献

Discussion