코딩강의/shopping_list(플러터-유데미)
~208. A Form-aware Dropdown Button
김마드
2023. 11. 12. 17:50
1. 새로운 스크린에 form형식과 드랍다운 버튼을 만들어보자
- new_item.dart
import 'package:flutter/material.dart';
import 'package:shopping_list/data/categories.dart';
class NewItem extends StatefulWidget {
const NewItem({super.key});
@override
State<NewItem> createState() {
return _NewItemState();
}
}
class _NewItemState extends State<NewItem> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Add a new item'),
),
body: Padding(
padding: const EdgeInsets.all(12),
child: Form(
child: Column(
children: [
TextFormField(
maxLength: 50,
decoration: const InputDecoration(
label: Text('Name'),
),
validator: (value) {
return 'Demo...';
},
), // instead of TextField()
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(
child: TextFormField(
decoration: const InputDecoration(
label: Text('Quantity'),
),
initialValue: '1',
),
),
const SizedBox(width: 8),
Expanded(
child: DropdownButtonFormField(
items: [
for (final category in categories.entries)
DropdownMenuItem(
value: category.value,
child: Row(
children: [
Container(
width: 16,
height: 16,
color: category.value.color,
),
const SizedBox(width: 6),
Text(category.value.title),
],
),
),
],
onChanged: (value) {},
),
),
],
),
],
),
),
),
);
}
}
1) 그냥 드랍다운만 하면 value값이 칸에 안들어가는데 form안에 있으면, value값을 선택하면 자동으로 들어간다.
2) for (final category in categories.entries) 이부분에서 entries의 의미는 map에서 key값과 value값을 선택 할 수 있게 해준다.
다음 강의에 이어서 form 부분을 꾸며보자. (유효성 검사 포함)
- 결과 화면
