[FLUTTER] 할 일 관리 앱 만들기 (파이어베이스 연동)

test_app.zip

0.13MB

1. 웹 브라우저에서 아래 파이어베이스 웹사이트에 접속하고 구글 계정으로 로그인한다.

https://firebase.google.com

 

728x90

 

2. 웹 브라우저에서 아래와 같이 [시작하기] 버튼을 클릭한다.

 

300x250

 

3. 웹 브라우저에서 아래와 같이 [프로젝트 만들기] 버튼을 클릭한다.

 

4. 웹 브라우저에서 아래와 같이 [프로젝트 이름]을 입력하고 [계속] 버튼을 클릭한다.

 

5. 웹 브라우저에서 아래와 같이 [이 프로젝트에서 Google 애널리틱스 사용 설정] 스위치 항목을 끄고 [프로젝트 만들기] 버튼을 클릭한다.

 

6. 웹 브라우저에서 아래와 같이 [계속] 버튼을 클릭한다.

 

7. 웹 브라우저에서 아래와 같이 [안드로이드 아이콘]을 클릭한다.

 

8. [비주얼 스튜디오 코드]의 [android / app / build.gradle] 파일에서 아래와 같이 "com.example.test_app"를 복사한다.

 

9. 웹 브라우저에서 아래와 같이 [Android 패키지 이름] 항목에 [비주얼 스튜디오 코드]에서 복사한 문자열을 붙여넣고 [앱 등록] 버튼을 클릭한다.

 

10. 웹 브라우저에서 아래와 같이 [google-services.json 다운로드] 버튼을 클릭하고 [google-services.json] 파일을 다운로드한다.

 

11. [google-services.json] 파일을 아래와 같이 [android / app] 폴더 아래로 이동시킨다.

 

12. 웹 브라우저에서 아래와 같이 [다음] 버튼을 클릭한다.

 

13. 웹 브라우저에서 아래와 같이 [복사하기 아이콘]을 클릭한다.

 

14. [비주얼 스튜디오 코드]의 [android / build.gradle] 파일에서 아래와 같이 코드를 붙여넣는다.

 

15. 웹 브라우저에서 아래와 같이 [복사하기 아이콘]을 클릭한다.

 

16. [비주얼 스튜디오 코드]의 [android / app / build.gradle] 파일에서 아래와 같이 코드를 붙여넣는다.

 

17. 웹 브라우저에서 아래와 같이 [다음] 버튼을 클릭한다.

 

18. 웹 브라우저에서 아래와 같이 [콘솔로 이동] 버튼을 클릭한다.

 

19. 웹 브라우저에서 아래와 같이 [Cloud Firestore]를 클릭한다.

 

20. 웹 브라우저에서 아래와 같이 [데이터베이스 만들기] 버튼을 클릭한다.

 

21. 웹 브라우저에서 아래와 같이 [테스트 모드에서 시작] 라디오 버튼을 체크하고 [다음] 버튼을 클릭한다.

 

22. 웹 브라우저에서 아래와 같이 [사용 설정] 버튼을 클릭한다.

 

23. 웹 브라우저에서 아래와 같이 파이어베이스 콘솔에서 Firestore 설정이 완료된 것을 확인할 수 있다.

 

24. [비주얼 스튜디오 코드]의 [android / app / build.gradle] 파일에서 아래와 같이 코드를 수정한다.

 

25. [비주얼 스튜디오 코드]의 [pubspec.yaml] 파일에서 아래와 같이 코드를 추가한다.

 

26. [비주얼 스튜디오 코드]에서 아래와 같이 [Get Packages 아이콘]을 클릭한다.

 

27. 웹 브라우저에서 아래와 같이 [컬렉션 시작] 항목을 클릭한다.

 

28. 웹 브라우저에서 아래와 같이 [컬렉션 ID] 항목을 입력하고 [다음] 버튼을 클릭한다.

 

29. 웹 브라우저에서 아래와 같이 [자동 ID] 항목을 클릭한다.

 

30. 웹 브라우저에서 아래와 같이 필드를 추가하고 [저장] 버튼을 클릭한다.

 

31. 웹 브라우저에서 컬렉션과 문서가 생성된 것을 확인할 수 있다.

 

32. 아래와 같이 소스 코드를 입력한다.

▶ main.dart

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

void main() {
  runApp(TestApplication());
}

class Todo {
  String title;
  bool isDone;

  Todo(this.title, {this.isDone = false});
}

class TestApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  TextEditingController _todoController = TextEditingController();

  @override
  void dispose() {
    _todoController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('남은 할 일'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child: TextField(
                    controller: _todoController,
                  ),
                ),
                RaisedButton(
                  child: Text('추가'),
                  onPressed: () => _addTodo(Todo(_todoController.text)),
                ),
              ],
            ),
            StreamBuilder<QuerySnapshot>(
                stream: Firestore.instance.collection('todo').snapshots(),
                builder: (context, snapshot) {
                  if (!snapshot.hasData) {
                    return CircularProgressIndicator();
                  }
                  final documents = snapshot.data.documents;
                  return Expanded(
                    child: ListView(
                      children:
                          documents.map((doc) => _buildItem(doc)).toList(),
                    ),
                  );
                }),
          ],
        ),
      ),
    );
  }

  Widget _buildItem(DocumentSnapshot snapshot) {
    final todo = Todo(snapshot['title'], isDone: snapshot['isDone']);
    return ListTile(
      title: Text(
        todo.title,
        style: todo.isDone
            ? TextStyle(
                decoration: TextDecoration.lineThrough,
                fontStyle: FontStyle.italic,
              )
            : null,
      ),
      trailing: IconButton(
        icon: Icon(Icons.delete_forever),
        onPressed: () => _deleteTodo(snapshot),
      ),
      onTap: () => _toggleTodo(snapshot),
    );
  }

  void _addTodo(Todo todo) {
    setState(() {
      Firestore.instance
          .collection('todo')
          .add({'title': todo.title, 'isDone': todo.isDone});
      _todoController.text = "";
    });
  }

  void _deleteTodo(DocumentSnapshot snapshot) {
    Firestore.instance
        .collection('todo')
        .document(snapshot.documentID)
        .delete();
  }

  void _toggleTodo(DocumentSnapshot snapshot) {
    Firestore.instance
        .collection('todo')
        .document(snapshot.documentID)
        .updateData({'isDone': !snapshot['isDone']});
  }
}

 

33. 아래와 같이 프로그램이 실행된다.

 

※ 각자의 google-services.json 파일이 android / app 폴더에 존재해야 한다.