「スクリプちん」のサイトデザインをリニューアル作業中です…^^;

【Flutter】ドロップダウンボタンを表示する

当ページのリンクには広告が含まれています。
Flutter:ドロップダウンボタンの作り方

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

DropdownMenuItemでは、画面に表示する文字列は Child: を使い、実際の値の設定には value: を使います。

そして、ドロップダウンボタンの値を設定したあと、画面上で選択した値を表示するには、画面を再度ビルドするために 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を表示する
1. 選択肢先頭の”A”を表示
Flutter DropdownButtonで選択肢をドロップダウン
2. ドロップダウンして選択肢を表示
Flutter DropdownButtonで選択肢を変更後描画する
3. ”C”を選んで表示

サンプルコードの解説

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

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

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

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

21行目 StatefulWidgetの中身

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

22・23行目 変数の作成

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

26行目 initStateを作成

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

32行目 DropdownMenuItem

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

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

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

49行目 Widget build

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

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

Flutterを学べるオススメ動画

実はこのドロップダウンボタンは、みんなのプログラミングの(通称「みんプロ」)「【ゼロからのFlutter】iOS/Androidアプリを”いっぺんに”開発入門・初級編<みんプロ式> 」という講座を受講して書けるようになったコードです。

実際の講義では、単独でDropdownButtonを作っているのではなくて、いくつかの機能を持ったアプリの一部分としてドロップダウンボタンを作成して表示しています。

なので今回のサンプルコードは、課題として作成しているコードからDropdownButtonの部分を抜き出して作成してみました。この記事では、講義とは少し違う書き方をしてみたところもあります。

<みんプロ>講座の解説には、プログラミングの入門的な内容も少しありますが、私のような、Flutterはおろかアプリ開発自体が初めての自分にとってはすごく有意義な内容ばかりです。

今さら聞かなくてもいいやっていう内容の動画は、再生せずに次の講義へ飛ばしてしまうこともできるけど、私は、そういう内容も2倍速の早送りで全て視聴しています。

なにせ、プログラミングをスクールで学ぶなんて初めてだったので、ちょっとした「へえ〜」っていう発見もあって面白いのです。

いま受講しているのは入門・初級編で、まだまだ始まったばかりなので、今後の中級編も楽しみです。
Flutterのスクールを探している人には、オススメです。日本語ですし。関西弁の。

みんプロを受講してみた感想などはこちら↓

みんプロ以外にも、Udemy iconでもFlutterの講座があります。ご参考まで。

公式サイトでは…

あわせて読みたい
DropdownButton class - material library - Dart API API docs for the DropdownButton class from the material library, for the Dart programming language.

Flutterの公式サイトでは、items: を指定する時点でDropdownMenuItemの値を作成しています。

コードの行数としては、公式サイトの例文の方が少なくてすんでいます。

よかったらシェアしてね!
  • URLをコピーしました!
目次