코딩강의/shopping_list(플러터-유데미)
206. Adding a "New Item" Screen
김마드
2023. 11. 9. 16:57
1. New Item 화면을 만들어보자.
일단 이번 강의에서는 screen폴더를 별도로 만들지 않고, widgets폴더에 전부 넣을 예정이다.
- grocery_list.dart
import 'package:flutter/material.dart';
import 'package:shopping_list/data/dummy_items.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> {
void _addItem() {
Navigator.of(context).push(
MaterialPageRoute(
builder: (ctx) => const NewItem(),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Your Groceries'),
actions: [
IconButton(
onPressed: _addItem,
icon: const Icon(Icons.add),
),
],
),
body: ListView.builder(
itemCount: groceryItems.length,
itemBuilder: (ctx, index) => ListTile(
title: Text(groceryItems[index].name),
leading: Container(
width: 24,
height: 24,
color: groceryItems[index].category.color,
),
trailing: Text(
groceryItems[index].quantity.toString(),
),
),
),
);
}
}
1) 앱바에 newItem 위젯으로 이동할 버튼 생성
- new_item.dart
import 'package:flutter/material.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: const Padding(
padding: EdgeInsets.all(12),
child: Text('The form'),
),
);
}
}