1. 값을 저장하고, 다른 화면에 그 값을 넘겨주는 것을 배워보자.
2. 손으로 휘리릭해서 항목 지워보는 것을 배워보자.
- new_item.dart
import 'package:flutter/material.dart';
import 'package:shopping_list/data/categories.dart';
import 'package:shopping_list/models/category.dart';
import 'package:shopping_list/models/grocery_item.dart';
class NewItem extends StatefulWidget {
const NewItem({super.key});
@override
State<NewItem> createState() {
return _NewItemState();
}
}
class _NewItemState extends State<NewItem> {
final _formKey = GlobalKey<FormState>();
var _enteredName = '';
var _enteredQuantity = 1;
var _selectedCategory = categories[Categories.vegetables]!;
void _saveItem() {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
Navigator.of(context).pop(
GroceryItem(
id: DateTime.now().toString(),
name: _enteredName,
quantity: _enteredQuantity,
category: _selectedCategory,
),
);
}
}
@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(
key: _formKey,
child: Column(
children: [
TextFormField(
maxLength: 50,
decoration: const InputDecoration(
label: Text('Name'),
),
validator: (value) {
if (value == null ||
value.isEmpty ||
value.trim().length <= 1 ||
value.trim().length > 50) {
return 'Must be between 1 and 50 characters.';
}
return null;
},
onSaved: (value) {
// if (value == null) {
// return;
// }
_enteredName = value!;
},
), // instead of TextField()
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(
child: TextFormField(
decoration: const InputDecoration(
label: Text('Quantity'),
),
keyboardType: TextInputType.number,
initialValue: _enteredQuantity.toString(),
validator: (value) {
if (value == null ||
value.isEmpty ||
int.tryParse(value) == null ||
int.tryParse(value)! <= 0) {
return 'Must be a valid, positive number.';
}
return null;
},
onSaved: (value) {
_enteredQuantity = int.parse(value!);
},
),
),
const SizedBox(width: 8),
Expanded(
child: DropdownButtonFormField(
value: _selectedCategory,
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) {
setState(() {
_selectedCategory = value!;
});
},
),
),
],
),
const SizedBox(height: 12),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () {
_formKey.currentState!.reset();
},
child: const Text('Reset'),
),
ElevatedButton(
onPressed: _saveItem,
child: const Text('Add Item'),
)
],
),
],
),
),
),
);
}
}
1) var _enteredName = '';
var _enteredQuantity = 1;
var _selectedCategory = categories[Categories.vegetables]!;
--> 값을 저장할 변수를 만들어 둔다.
2)
void _saveItem() {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
Navigator.of(context).pop(
GroceryItem(
id: DateTime.now().toString(),
name: _enteredName,
quantity: _enteredQuantity,
category: _selectedCategory,
),
);
}
}
--> 값을 저장할 함수. 유효성 검사가 true(문제 없이 pass)가 되면 save함수를 실행하는데, 이게 실행 되면 각 TextFormField의 onSaved가 실행되는 원리이다. 그리고 뒤로 가기가 되면서 값을 전달해준다.
3) 드랍다운버튼 값은 Form형식이 아니기 때문에 별도로 setState를 통해 값을 저장해준다.
- grocery_list.dart
import 'package:flutter/material.dart';
import 'package:shopping_list/models/grocery_item.dart';
import 'package:shopping_list/widgets/new_item.dart';
class GroceryList extends StatefulWidget {
const GroceryList({super.key});
@override
State<GroceryList> createState() => _GroceryListState();
}
class _GroceryListState extends State<GroceryList> {
final List<GroceryItem> _groceryItems = [];
void _addItem() async {
final newItem = await Navigator.of(context).push<GroceryItem>(
MaterialPageRoute(
builder: (ctx) => const NewItem(),
),
);
if (newItem == null) {
return;
}
setState(() {
_groceryItems.add(newItem);
});
}
void _removeItem(GroceryItem item) {
setState(() {
_groceryItems.remove(item);
});
}
@override
Widget build(BuildContext context) {
Widget content = const Center(child: Text('No items added yet.'));
if (_groceryItems.isNotEmpty) {
content = ListView.builder(
itemCount: _groceryItems.length,
itemBuilder: (ctx, index) => Dismissible(
onDismissed: (direction) {
_removeItem(_groceryItems[index]);
},
key: ValueKey(_groceryItems[index].id),
child: ListTile(
title: Text(_groceryItems[index].name),
leading: Container(
width: 24,
height: 24,
color: _groceryItems[index].category.color,
),
trailing: Text(
_groceryItems[index].quantity.toString(),
),
),
),
);
}
return Scaffold(
appBar: AppBar(
title: const Text('Your Groceries'),
actions: [
IconButton(
onPressed: _addItem,
icon: const Icon(Icons.add),
),
],
),
body: content,
);
}
}
1) 이제 더미데이터가 아닌, 실제 입력된 값을 받아서 쓸 수 있다.
2) final List<GroceryItem> _groceryItems = [];
void _addItem() async {
final newItem = await Navigator.of(context).push<GroceryItem>(
MaterialPageRoute(
builder: (ctx) => const NewItem(),
),
);
if (newItem == null) {
return;
}
setState(() {
_groceryItems.add(newItem);
});
}
--> _groceryItems 리스트에 넘겨 받은 값을 담을 것이다. async await는 화면 push할때 값을 기다려야 하기 때문에 사용한다. 그리고 값을 받아오면 add를 통해 _groceryItems에 값을 넣어준다.
해당 리스트에 값을 담을 것이다.
3) void _removeItem(GroceryItem item) {
setState(() {
_groceryItems.remove(item);
});
}
--> _groceryItems에서 값을 삭제해주는 함수
4) 기존 ListTile을 Dismissible 위젯으로 감싸준다. 해당 위젯은 슬라이드를 통해 값을 삭제해줄 수 있는 위젯이다.
onDismissed: (direction) {
_removeItem(_groceryItems[index]);
},
key: ValueKey(_groceryItems[index].id),
--> ValueKey 클래스 (플러터 내장 클래스)를 통해 키 값을 지정해주어야하고, onDismissed를 통해 원하는 값을 삭제해준다.
5) 메인 화면에 값이 없으면 'No items added yet.가 나온다. 조건에 따라 body에 쓰일 content가 변경 되게끔 세팅했다.
