1. DropdownButton을 추가해보자.
- new_expense.dart
import 'package:flutter/material.dart';
import 'package:expense_tracker/models/expense.dart';
class NewExpense extends StatefulWidget {
const NewExpense({super.key});
@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;
});
}
@override
void dispose() {
_titleController.dispose();
_amountController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
var test = Category.values.map(
(e) => "$e",
);
return Padding(
padding: const EdgeInsets.all(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: () {
print(_titleController.text);
print(_amountController.text);
},
child: const Text('Save Expense'),
),
],
),
],
),
);
}
}
1) DropdownButton 부분 확인 - enum값.name을 하면 해당 값을 string화 해서 볼 수 있다.
나머지 부분은 눈으로 따라가보면 이해됨
- 결과 화면
'코딩강의 > expense_tracker(플러터-유데미)' 카테고리의 다른 글
| 120. Using the Dismissible Widget for Dismissing List Items (0) | 2023.09.03 |
|---|---|
| ~119. Creating a Fullscreen Modal (0) | 2023.09.02 |
| ~114. Working with "Futures" for Handling Data from the Future (0) | 2023.08.29 |
| ~111. Exercise Solution (0) | 2023.08.29 |
| ~107. Handling User (Text) Input with the TextField Widget (0) | 2023.08.28 |
