1. 연산자 활용과 inputdata 유효성 검사를 사용해보자.
연산자 활용은 js와 동일하고, 유효성 검사는 매뉴얼하게 작성해야 되는 부분이 있다.
2. 입력된 값을 화면에 연동 시켜 보여주고 값이 입력완료 되면 모달창을 바로 닫아주자
이전에 배운 함수를 넘겨주는걸 사용하면 되고, Navigator.pop()을 사용하면 된다.
3. 모달창을 키보드에 가려지지 않게 크게 해보자.
- new_expense.dart
import 'package:flutter/material.dart';
import 'package:expense_tracker/models/expense.dart';
class NewExpense extends StatefulWidget {
const NewExpense({super.key, required this.onAddExpense});
final void Function(Expense expense) onAddExpense;
@override
State<NewExpense> createState() {
return _NewExpenseState();
}
}
class _NewExpenseState extends State<NewExpense> {
final _titleController = TextEditingController();
final _amountController = TextEditingController();
DateTime? _selectedDate;
Category _selectedCategory = Category.leisure;
void _presentDatePicker() async {
final now = DateTime.now();
final firstDate = DateTime(now.year - 1, now.month, now.day);
final pickedDate = await showDatePicker(
context: context,
initialDate: now,
firstDate: firstDate,
lastDate: now,
);
setState(() {
_selectedDate = pickedDate;
});
}
void _submitExpenseData() {
final enteredAmount = double.tryParse(_amountController.text);
final amountIsInvalid = enteredAmount == null || enteredAmount <= 0;
if (_titleController.text.trim().isEmpty ||
amountIsInvalid ||
_selectedDate == null) {
showDialog(
context: context,
builder: (ctx) => AlertDialog(
title: const Text("Invalid Input"),
content: const Text("제대로 입력했는지 확인하세요."),
actions: [
TextButton(
onPressed: () {
Navigator.pop(ctx);
},
child: const Text("Okay"))
],
),
);
return;
}
widget.onAddExpense(
Expense(
title: _titleController.text,
amount: enteredAmount,
date: _selectedDate!,
category: _selectedCategory,
),
);
Navigator.pop(context);
}
@override
void dispose() {
_titleController.dispose();
_amountController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(16, 48, 16, 16),
child: Column(
children: [
TextField(
controller: _titleController,
maxLength: 50,
decoration: const InputDecoration(
label: Text('Title'),
),
),
Row(
children: [
Expanded(
child: TextField(
controller: _amountController,
keyboardType: TextInputType.number,
decoration: const InputDecoration(
prefixText: '\$ ',
label: Text('Amount'),
),
),
),
const SizedBox(width: 16),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
_selectedDate == null
? 'No date selected'
: formatter.format(_selectedDate!),
),
IconButton(
onPressed: _presentDatePicker,
icon: const Icon(
Icons.calendar_month,
),
),
],
),
),
],
),
const SizedBox(height: 16),
Row(
children: [
DropdownButton(
value: _selectedCategory,
items: Category.values
.map(
(category) => DropdownMenuItem(
value: category,
child: Text(
category.name.toUpperCase(),
),
),
)
.toList(),
onChanged: (value) {
if (value == null) {
return;
}
setState(() {
_selectedCategory = value;
});
},
),
const Spacer(),
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Cancel'),
),
ElevatedButton(
onPressed: _submitExpenseData,
child: const Text('Save Expense'),
),
],
),
],
),
);
}
}
1) submitExpenseData부분이 유효성 검사 부분이다. 여기서 trim()은 텍스트 사이 빈칸을 없애주는 역할 (스페이스 빈칸이 텍스트로 인식되는거 방지)
2) onAddExpense 함수 지정 및 widget.onAddExpense 추가하여 사용
- expenses.dart
import 'package:expense_tracker/wigets/expenses_list/expenses_list.dart';
import 'package:expense_tracker/wigets/new_expense.dart';
import 'package:flutter/material.dart';
import 'package:expense_tracker/models/expense.dart';
class Expenses extends StatefulWidget {
const Expenses({super.key});
@override
State<Expenses> createState() {
return _ExpensesState();
}
}
class _ExpensesState extends State<Expenses> {
final List<Expense> _registeredExpenses = [
Expense(
title: 'Flutter Course',
amount: 19.99,
date: DateTime.now(),
category: Category.work,
),
Expense(
title: 'Cinema',
amount: 15.69,
date: DateTime.now(),
category: Category.leisure,
),
];
void _openAddExpenseOverlay() {
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (ctx) => NewExpense(
onAddExpense: _addExpense,
));
}
void _addExpense(Expense expense) {
setState(() {
_registeredExpenses.add(expense);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Flutter ExpenseTracker"),
actions: [
IconButton(
onPressed: _openAddExpenseOverlay, icon: const Icon(Icons.add))
],
),
body: Column(
children: [
const Text('The chart'),
Expanded(child: ExpensesList(expenses: _registeredExpenses)),
],
),
);
}
}
1) _addExpense 부분을 추가해서 인자로 Expense 모델 값을 받고, setState를 통해 받아온 값을 리스트에 추가해주고 화면에 바로 보여주게 해준다.
2) showModalBottomSheet 속성에 isScrollControlled를 true로 해주면 모달 창 크기를 조정가능하게 해준다. (초기값은 풀스크린)
- 결과 화면
'코딩강의 > expense_tracker(플러터-유데미)' 카테고리의 다른 글
| 121. Showing & Managing "Snackbars" (0) | 2023.09.03 |
|---|---|
| 120. Using the Dismissible Widget for Dismissing List Items (0) | 2023.09.03 |
| 115. Adding a Dropdown Button (0) | 2023.08.31 |
| ~114. Working with "Futures" for Handling Data from the Future (0) | 2023.08.29 |
| ~111. Exercise Solution (0) | 2023.08.29 |
