😄
DropdownButtonで配列について学ぶ
HTMLのセレクトボタンと同じようなもの
Flutterで、DropdownButtonを使ってみたくて、今回公式ドキュメントや技術記事をみながら作ってみた。
データの型でdouble型を使ってみたかったので、double型のList型を作って、ボタンで選択した数値を追加、更新、削除するビジネスロジックも学んでみた🧑💻
DartのListの使い方が紹介されていたページ
日本語なのでわかりやすいです。Swiftやってたので、すぐ理解できた?
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 = [];
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});
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});
State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
}
class _DropdownButtonExampleState extends State<DropdownButtonExample> {
double dropdownValue = lists.first;
// ボタンの値を保存するリスト
List<double> doubleBox = [];
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: []
Discussion