[Flutter] firebase에 데이터 추가하기

폼을 입력하고, 그 폼에 입력된 데이터들을 firebase 에 저장하는 코드를 구현해봤다.

역시 직접 해보는 건 또 다르구나 유독 느낀 파트였다.

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:snackparty/model/party.dart';

class AddPartyScreen extends StatefulWidget {
  const AddPartyScreen({Key? key}) : super(key: key);

  @override
  State<AddPartyScreen> createState() => _AddPartyScreenState();
}

class _AddPartyScreenState extends State<AddPartyScreen> {
  final controllerPartyTitle = TextEditingController();
  final controllerDate = TextEditingController();
  final controllerTime = TextEditingController();
  final controllerPlace = TextEditingController();
  final controllerInfo = TextEditingController();

  @override
  Widget build(BuildContext context) {
    CollectionReference party = FirebaseFirestore.instance.collection('party');
    return Scaffold(
      appBar: AppBar(
        title: Text('파티 생성'),
      ),
      body: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Expanded(
                child: SingleChildScrollView(
              child: Column(
                children: [
                  Container(
                    child: TextFormField(
                      decoration: InputDecoration(
                        labelText: '파티명',
                        hintText: '파티명을 입력하세요',
                      ),
                      controller: controllerPartyTitle,
                    ),
                    padding: EdgeInsets.all(5),
                  ),
                  Container(
                    child: FormBuilderDateTimePicker(
                      controller: controllerDate,
                      name: '날짜',
                      inputType: InputType.date,
                      decoration: const InputDecoration(labelText: '날짜'),
                    ),
                    padding: EdgeInsets.all(5),
                  ),
                  Container(
                    child: FormBuilderDateTimePicker(
                      controller: controllerTime,
                      name: '시간',
                      inputType: InputType.time,
                      decoration: const InputDecoration(labelText: '시간'),
                    ),
                    padding: EdgeInsets.all(5),
                  ),
                  Container(
                    child: TextFormField(
                      controller: controllerPlace,
                      decoration: InputDecoration(
                        labelText: '장소',
                        hintText: '장소를 입력하세요',
                      ),
                    ),
                    padding: EdgeInsets.all(5),
                  ),
                  Container(
                    child: TextFormField(
                      controller: controllerInfo,
                      minLines: 6,
                      keyboardType: TextInputType.multiline,
                      maxLines: null,
                      //expands: true,
                      decoration: InputDecoration(
                        labelText: '추가 설명',
                        hintText: '추가설명을 입력하세요',
                      ),
                    ),
                    padding: EdgeInsets.all(5),
                  ),
                  SizedBox(
                    width: double.infinity,
                    child: ElevatedButton(
                        child: Text('생성하기'),
                        onPressed: () {
                          final party = Party(
                            partytitle: controllerPartyTitle.text,
                            place: controllerPlace.text,
                            info: controllerInfo.text,
                            partymember: [],
                          );
                          createParty(party);
                          showDialog(
                              barrierDismissible: false,
                              context: context,
                              builder: (BuildContext context) {
                                return AlertDialog(
                                  shape: RoundedRectangleBorder(
                                      borderRadius:
                                          BorderRadius.circular(10.0)),
                                  //Dialog Main Title
                                  title: Column(
                                    children: <Widget>[
                                      new Text("파티 신청 완료"),
                                    ],
                                  ),
                                  //
                                  content: Column(
                                    mainAxisSize: MainAxisSize.min,
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: <Widget>[
                                      Text(
                                        "곧 만나요!",
                                      ),
                                    ],
                                  ),
                                  actions: <Widget>[
                                    new FlatButton(
                                      child: new Text("확인"),
                                      onPressed: () {
                                        Navigator.pop(context);
                                        Navigator.pop(context);
                                      },
                                    ),
                                  ],
                                );
                              });
                        }),
                  ),
                ],
              ),
            ))
          ],
        ),
      ),
    );
  }
}

Future createParty(Party party) async {
  final docParty = FirebaseFirestore.instance.collection('party').doc();
  final json = party.toJson();
  await docParty.set(json);
}

일단 폼에 입력된 데이터들을 다루려면 controller 선언이 필요했다.

그리고 TextField 에다가 controller 속성에 등록해줘야한다.

 

나는 createParty 라는 생성함수를 만들어줬다

여기에 docParty 에다가 party라는 collection을 연결해주고 

party를 json 형태로 바꿔서 docParty에 넣어주도록 했다.

 

생성하기 버튼을 누르면 dialog가 뜨도록 한번 해봤다.

dialog 의 확인 버튼을 누르면 화면이 뒤로 한번만 가길래

뒤로 가는 기능을 두번 넣었더니 처음 홈 화면으로 가게 구현됐다(이게된다구..?👀)

onPressed: () {
                                        Navigator.pop(context);
                                        Navigator.pop(context);
                                      },

아직 Party  model 에 시간과 날짜를 추가해두지 않았다

보니까 다른 일반적인 텍스트랑 다르기도하고

포맷팅 하는 과정이 필요한것같아서 일단 두었다.

또 구현하러 가야지🔥