【Flutter】DropdownButtonを表示する

FlutterでDropdownButtonを表示したい！

概要

今回の記事では、FlutterでDropdownButtonを表示する手順を掲載する。

仕様書

環境

Android Studio Giraffe | 2023.2.1 Patch 2
Flutter 3.19.6

手順書

画面のど真ん中にDropdownButtonを表示する例。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: const DropdownButtonSample1()
      )
    )
  );
}

class DropdownButtonSample1 extends StatefulWidget {
  const DropdownButtonSample1({super.key});
  @override
  DropdownButtonState createState() => DropdownButtonState();
}

class DropdownButtonState extends State<DropdownButtonSample1> {
  String? selectedDropdownMenuItem = '1';

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: DropdownButton<String>(
          value: selectedDropdownMenuItem,
          onChanged: (String? v) {
            setState(() {
              selectedDropdownMenuItem = v;
            });
          },
          items: const [
            DropdownMenuItem(
              value: '1',
              child: Text('One'),
            ),
            DropdownMenuItem(
              value: '2',
              child: Text('Two'),
            ),
            DropdownMenuItem(
              value: '3',
              child: Text('Three'),
            )
          ],
        ),
      ),
    );
  }
}

StatefulWidgetを使って選択してる値を保存する必要がある。StatelessWidgetの中の変数でなんとかしようとすると選択がUIに反映されないのに注意。

まとめ（感想文）

TextEditingControllerのDropdownButton版があっても良いと思う今日この頃。