【Flutter】ドロップダウンボタン（プルダウンメニュー）の作り方

2021-02-182022-11-26

当ページのリンクには広告が含まれています。

Flutterでドロップダウンボタンを作成するには、「DropdownMenuItem」で設定した値を、「DropdownButton」の「items:」に指定します。

ドロップダウンボタンの値を設定したあとの再表示には、「SetState()」で再ビルドを忘れずに！

「ドロップダウンボタン」のサンプルコード　　

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DropdownButton Demo',
      theme: ThemeData.dark(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<DropdownMenuItem<int>> _items = List();
  int _selectItem = 0;

  @override
  void initState() {
    super.initState();
    setItems();
    _selectItem = _items[0].value;
  }

  void setItems() {
    _items
      ..add(DropdownMenuItem(
        child: Text('A', style: TextStyle(fontSize: 40.0),),
        value: 1,
      ))
      ..add(DropdownMenuItem(
        child: Text('B', style: TextStyle(fontSize: 40.0),),
        value: 2,
      ))
      ..add(DropdownMenuItem(
        child: Text('C', style: TextStyle(fontSize: 40.0),),
        value: 3,
      ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DropdownButton(
          items: _items,
          value: _selectItem,
          onChanged: (value) => {
            setState(() {
              _selectItem = value;
            }),
          },
        ),
      ),
    );
  }
}

実行結果

Flutter DropdownButtonを表示する — 選択肢先頭の「A」を表示

Flutter DropdownButtonで選択肢をドロップダウン — ユーザーがドロップダウンして選択肢を表示

Flutter DropdownButtonで選択肢を変更後描画する — 選ばれた「C」を選んで表示

サンプルコードの解説

このコードでは、値のセットを描画操作から切り離して考えているので、動作を段階的に考えることができます。

1行目　material.dartのインポート

import 'package:flutter/material.dart';

material.dartをインポートしています。

以後のサンプルコードのドロップダウンボタンは、「Material Components」の「DropdownButton」を使います。

21行目〜　StatefulWidgetの中身

class _MyHomePageState extends State<MyHomePage> {
　・・・

このクラスの中で、DropdownButtonに直接関わるコードを書いていきます。

22・23行目　変数の作成

class _MyHomePageState extends State<MyHomePage> {
  List<DropdownMenuItem<int>> _items = List();
  int _selectItem = 0;

DropdownButtonにセットするDropdownMenuItemのリストとして、_itemsを作成。整数型。
画面で選択された値を格納するための変数として、_selectItemを作成。これも整数型。

26行目　initStateを作成

  void initState() {
    super.initState();
    setItems();
    _selectItem = _items[0].value;
  }

値をセットするのは、画面が最初にbuildされるときだけでいいので、initStateの中に、DropdownMenuItemでリストを作成する処理setItems()を入れておきます。

32行目　DropdownMenuItem

  void setItems() {
    _items
      ..add(DropdownMenuItem(
        child: Text('A', style: TextStyle(fontSize: 40.0),),
        value: 1,
      ))
      ..add(DropdownMenuItem(
        child: Text('B', style: TextStyle(fontSize: 40.0),),
        value: 2,
      ))
      ..add(DropdownMenuItem(
        child: Text('C', style: TextStyle(fontSize: 40.0),),
        value: 3,
      ));
  }

28行目で呼び出している「setItems()」の中身です。
DropdownMenuItemを使って選択肢を作っています。

表示する文字は、「A」、「B」、「C」。
それに対応する内部データは、「1」、「2」、「3」。

ここで作った値の先頭のデータを、表示する項目の初期値として29行目で設定しています。

49行目　Widget build

  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DropdownButton(
          items: _items,
          value: _selectItem,
          onChanged: (value) => {
            setState(() {
              _selectItem = value;
            }),
          },
        ),
      ),
    );

52行目のDropdownButtonで画面に表示します。
すでに作成しておいた変数を、items:とvalue:にセットします。

onChanged:で、値が選択されたときの動作を設定しています。
_selectItemへの値の代入をsetStateの中に入れることで、変更した値が画面に反映されます。