1. firebase의 db를 사용해보자.
파이어베이스 회원가입을 하고, 빌드 -> 리얼타임데이터베이스에서 생성하면 되고 처음에는 테스트모드로 만들어보자.
먼저 파이어베이스와 송신하기 위해 아래 http 패키지를 다운받자.
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:shopping_list/data/categories.dart';
import 'package:shopping_list/models/category.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();
final url = Uri.https('flutter-study-1acb3-default-rtdb.firebaseio.com',
'shopping-list.json');
http.post(
url,
headers: {
'Content-Type': 'application/json',
},
body: json.encode(
{
'name': _enteredName,
'quantity': _enteredQuantity,
'category': _selectedCategory.title,
},
),
);
// Navigator.of(context).pop();
}
}
@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'),
)
],
),
],
),
),
),
);
}
}
--> save이후 나의 파이어베이스 db로 데이터가 전송된다. 이때 https 앞에 주소는 아래 내가 만든 주소이다.
그릭고 두번째 인자인 shopping-list로 값들을 분류해주는 것 같다. 그리고 _selectedCategory.title 에서 뒤에 title이 붙은 이유는 category는 클래스 형식이라 보낼수가 없기 때문에 title 문자값만 보낸 것이다.
