🫳

DropdownMenuに関してまとめてみた

2024/02/22に公開

Flutter

はじめに

以前にDropdownButtonに関してまとめたと思うのですが、今回は Dropdownmenuに関してまとめたいと思います。UIを構築する時にユーザーがリストなどから選択できるWidgetが必要になることはよくあるので、DropdownMenuを使えるようになることで実装の幅が広がると思います。

DropdownMenuとは

DropdownMenuとはユーザーがオプションのリストから選択できるWidgetです。TextFieldから開くことができ、選択されたメニュー項目がフィールドに表示されます。また、テキスト入力に基づいてリストをフィルタリングしたり、メニューリストから１つの項目を検索することもできます。

使い方

以下のコードを入力することでドロップダウンメニューを表示できます。

DropdownMenu(
           dropdownMenuEntries: <DropdownMenuEntry<Color>>[
             DropdownMenuEntry(value: Colors.red, label: 'Red'),
             DropdownMenuEntry(value: Colors.blue, label: 'Blue'),
             DropdownMenuEntry(value: Colors.purple, label: 'Purple'),
             DropdownMenuEntry(value: Colors.green, label: 'Green'),
           ],

DropdownMenuEntryで選択肢を作成することができます。valueはエントリーを識別するための値で処理などに使用されるデータを記述します。ラベルは実際に選択肢に表示される項目名を記述します。

また、DropdownMenuにはonSelectedコールバックが必要です。ここには選択肢が選択された時の処理を記述します。

 onSelected: (color) {
             if(color != null){
               print(color);
             }
           },

選択した項目のvalueの値がcolorの中に入ります。colorがnull出ない時にコンソールに値が表示されます。

メニューリストを入力したテキストでフィルタリングしたい時には以下のようにします。

enableFilter: true,

最後にWidgetの見た目を変えることもできます。以下のように入力することで大きさや入力フィールドを補助するオプションをつけることも可能です。

width: 500,
label: Text('Select Color'),
helperText: 'Display selected color in console',

最後にコードの全文を表示します。

コード

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dropdown Menu'),
        ), 
        body: Center(
         child: DropdownMenu(
           width: 500,
           label: Text('Select Color'),
           helperText: 'Display selected color in console',
           enableFilter: true,
           onSelected: (color) {
             if(color != null){
               print(color);
             }
           },
           dropdownMenuEntries: <DropdownMenuEntry<Color>>[
             DropdownMenuEntry(value: Colors.red, label: 'Red'),
             DropdownMenuEntry(value: Colors.blue, label: 'Blue'),
             DropdownMenuEntry(value: Colors.purple, label: 'Purple'),
             DropdownMenuEntry(value: Colors.green, label: 'Green'),
           ],
        ),
        ),
      ),
    );
  }
}

おわりに

今回はDropdownMenuに関してまとめました。実際にユーザーにリストから選択してもらう機会は多いと思うのでしっかりと身につけたいと思います。他にもプロパティはあるので、ぜひ実際に自分で手を動かして試してみてください。最後まで読んでいただきありがとうございました。

DropdownMenuに関してまとめてみた

はじめに

DropdownMenuとは

使い方

おわりに

参考文献

Discussion