Zenn
🐣

【Flutter】DropdownButtonプルダウン機能を持ったボタン

2024/03/26に公開
2件
Flutter
tech

DropdownButtonはタップすると、あらかじめ設定しておいた選択肢(プルダウン）の中から値を選択することができます
記述の仕方

//プルダウンの初期値を１にしselectValue変数を定義
int selectValue = 1;

DropdownButton(
 value:selectValue,
items:
//一つ目のDropdownMenuItemを'選択肢１'とし、value:1として
[DropdownMenuItem (
child:Text（'選択肢１'),
value:1;
...//同じように選択肢2.3を追加
],
//引数をnewValueと定義、setstateの中でselectValueに代入※as int としているのは最初に定義したselectValue変数がintなのでint型でキャストする必要がある
onChanged:(newValue){
setState((){
 selectValue = newValue as int;
});
})

このように三つの選択肢を持ったボタンを追加できる

備考

onCanged:(newValue){
setState((){
selectValue = newValue as int;
print(selectValue);
});
}
このようにprintを追加してみると
flutter: 2
flutter: 3

のように出力されることから、DropdownButtonはValueの整数の値のみを使用して選択肢を出力していることがわかる

Discussion

JboyHashimotoJboyHashimoto

コードブロックは、色をつけると見やすくなりますよ。
バッククォートの後に、dartとつけてみてください。

https://zenn.dev/zenn/articles/markdown-guide

pull downはEnumで作る人が多い気がするから、僕は真似して使ってますね。引数付きのEnumが多いかな。
ご興味あればお試しください。

import 'package:flutter/material.dart';

// 引数付きのEnum選択肢が１〜３
enum SelectEnum {
  ONE(value: '選択肢1'),
  TWO(value: '選択肢2'),
  THREE(value: '選択肢3');

  final String value;
  const SelectEnum({required this.value});
}

// pull down Widget
class PulldownWidget extends StatefulWidget {
  const PulldownWidget({super.key});

  @override
  State<PulldownWidget> createState() => _PulldownWidgetState();
}

class _PulldownWidgetState extends State<PulldownWidget> {
  SelectEnum? _selectedValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Pulldown')),
      body: Center(
        // DropdownButtonにSelectEnumをデータ型として指定
        child: DropdownButton<SelectEnum>(
          // 選択された値を_selectedValueに格納
          value: _selectedValue,
          // SelectEnum.valuesをSelectEnum型のリストに変換
          items: SelectEnum.values.map((SelectEnum value) {
            return DropdownMenuItem<SelectEnum>(
              value: value,
              child: Text(value.value),
            );
          }).toList(),
          // 選択された値を_selectedValueに格納。onChangedで選択された値を取得
          onChanged: (SelectEnum? value) {
            // setStateでpull downの値が変わると画面を更新する
            setState(() {
              _selectedValue = value;
            });
          },
        ),
      ),
    );
  }
}