😄

DropdownButtonで配列について学ぶ

2022/09/04に公開

HTMLのセレクトボタンと同じようなもの

Flutterで、DropdownButtonを使ってみたくて、今回公式ドキュメントや技術記事をみながら作ってみた。
データの型でdouble型を使ってみたかったので、double型のList型を作って、ボタンで選択した数値を追加、更新、削除するビジネスロジックも学んでみた🧑‍💻

DartのListの使い方が紹介されていたページ
日本語なのでわかりやすいです。Swiftやってたので、すぐ理解できた?
https://flutterzero.com/list/
DropDownButtonの公式ドキュメント

デモアプリのソースコード

ポイントは、listsのコードに、ボタンに表示する値を入れて、1.0、2.0と予め決めれた入力ができるように、なることですね。
定数なので、上書きされることはありません。他のページに書いて、このList型のデータを呼び出すこともできます。

const List<double> lists = <double>[1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0];

今回は、データベースは使いませんので、ダミーのデータを一時的に保存するListを用意しました。

class _DropdownButtonExampleState extends State<DropdownButtonExample> {
  // listsの最初の数値を.firstで表示できるように設定する変数。
  double dropdownValue = lists.first;
  // ここにダミーのデータを入れる変数を定義する
  List<double> doubleBox = [];

  @override
  Widget build(BuildContext context) {

main.dart

import 'package:flutter/material.dart';
// DropdownButtonで選択する数値が入ったList
const List<double> lists = <double>[1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0];

void main() => runApp(const DropdownButtonApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('DropdownButton Sample')),
        body: const Center(
          child: DropdownButtonExample(),
        ),
      ),
    );
  }
}

class DropdownButtonExample extends StatefulWidget {
  const DropdownButtonExample({super.key});

  @override
  State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
}

class _DropdownButtonExampleState extends State<DropdownButtonExample> {
  double dropdownValue = lists.first;
  // ボタンの値を保存するリスト
  List<double> doubleBox = [];

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SizedBox(
          width: 160,
          child: DropdownButton<double>(
            isExpanded: true,
            value: dropdownValue,
            icon: const Icon(Icons.arrow_drop_down),
            elevation: 16,
            style: const TextStyle(color: Colors.deepPurple),
            underline: Container(
              height: 2,
              color: Colors.deepPurpleAccent,
            ),
            onChanged: (double? value) {
              // ユーザーが項目を選択したときに呼び出される。
              setState(() {
                dropdownValue = value!;
                print(dropdownValue);
              });
            },
            items: lists.map<DropdownMenuItem<double>>((double value) {
              return DropdownMenuItem<double>(
                value: value,
                child: Text('$value'),
              );
            }).toList(),
          ),
        ),
        ElevatedButton(
            onPressed: () {
              doubleBox.add(dropdownValue);
              print(doubleBox);
            },
            child: Text('追加')),
            const SizedBox(height: 20),
        ElevatedButton(
            onPressed: () {
              doubleBox.insert(1, dropdownValue);
              print(doubleBox);
            },
            child: Text('更新')),
            const SizedBox(height: 20),
            ElevatedButton(
            onPressed: () {
              doubleBox.remove(dropdownValue);
              print(doubleBox);
            },
            child: Text('削除')),
            const SizedBox(height: 20),
            ElevatedButton(
            onPressed: () {
              doubleBox.clear();
              print(doubleBox);
            },
            child: Text('全て削除')),
      ],
    );
  }
}

print文でログにデータの状態を表示

Restarted application in 482ms.
flutter: 1.0
flutter: [1.0]
flutter: 2.0
flutter: [1.0, 2.0]
flutter: 3.0
flutter: [1.0, 2.0, 3.0]
flutter: 5.0
flutter: [1.0, 2.0, 3.0, 5.0]
flutter: 6.0
flutter: [1.0, 2.0, 3.0, 5.0, 6.0]
flutter: 7.0
flutter: [1.0, 2.0, 3.0, 5.0, 6.0, 7.0]
flutter: 8.0
flutter: [1.0, 2.0, 3.0, 5.0, 6.0, 7.0, 8.0]
flutter: [1.0, 8.0, 2.0, 3.0, 5.0, 6.0, 7.0, 8.0]
flutter: [1.0, 2.0, 3.0, 5.0, 6.0, 7.0, 8.0]
flutter: [1.0, 2.0, 3.0, 5.0, 6.0, 7.0]
flutter: []

HTMLのセレクトボタンと同じようなもの

デモアプリのソースコード

Discussion