Flutter 소개와 Firebase 연동

1. Flutter란?

• 하나의 코드베이스로 모바일, 웹, 데스크톱에서 네이티브로 컴파일 되는 구글의 아름다운 UI 툴킷

Flutter 문서

• 빠른 개발 : Hot reload를 통해 코드의 변경 사항을 빠르게 확인할 수 있다. 이는 UI 구축, 기능 추가, 버그 수정의 용이성을 높여준다.

• 표현력 있고 유연한 UI : Flutter에 내장되어 있는 Material Design과 Cupertino Widget 등을 활용하여 사용자 친화적 UI를 만들 수 있다.

• 네이티브 수준의 성능 : Flutter 위젯은 스크롤, 내비게이션, 아이콘 및 글꼴 등 주요 플랫폼의 차이점을 통합하여 iOS와 Android 모두에서 네이티브 수준의 성능을 보여준다.

 

2. 사용 예시

• Material Design 참고

Material Design

import 'package:flutter/material.dart';

void main() { //void main() => runApp(MyApp());과 동일
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.lightBlueAccent[100], //배경색
        appBar: AppBar( //상단부
          title: Text('I Am DSC'), //텍스트 위젯
          backgroundColor: Colors.blue, //상단부 배경색
        ),
        body: Center( //가운데 정렬 위젯
          child: Image(
            image: AssetImage('images/nunsong.gif'), //이미지 위젯
          ),
        ),
      ),
    );
  }
}

3. 외부 패키지 사용

Page 1 | Top Flutter packages

• 1. 의존성 및 asset 관리를 담당하는 pubspec.yaml 파일의 dependencies에 사용할 패키지를 추가한다.

dependencies:            
  flutter:            
    sdk: flutter            
  cupertino_icons: ^0.1.2      
  english_words: ^3.1.0 //패키지명: 버전(옵션)

 

• 2. main.dart에서 사용할 패키지를 import한다.

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

 

4. Firebase 사용

FlutterFire Overview | FlutterFire

• Firebase를 사용하기 위한 패키지를 pubspec.yaml에 추가한 후 main.dart를 수정한다.
  • 참고 ) Android와 iOS를 위한 설정 필요

• Firebase.initializeApp() 관련 참고

dependencies:
  flutter:
    sdk: flutter

  firebase_core: ^0.3.4 //firebase 앱 사용
  firebase_auth: ^0.8.4+4 //firebase authentication 사용
  cloud_firestore: ^0.9.13+1 //firebase firestore 사용

 

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(); //Firebase.initializeApp() 호출을 통해 Firebase를 사용할 수 있음.
  runApp(FlashChat());
}

1) Authentication

1. • 구글 Firebase에서 제공하는 사용자 관리 솔루션
   • createUserWithEmailAndPassword()와 signInWithEmailAndPassword를 이용한 회원가입, 로그인 예시

//Firebase Auth instance 생성
final _auth = FirebaseAuth.instance; //FirebaseAuth를 사용할 파일에 반드시 포함되어 있어야 함.

//사용자로부터 입력받을 email과 password
String email;
String password;

...

//email 입력창
TextField(
  keyboardType: TextInputType.emailAddress,
  onChanged: (value) {
  	email = value;
  },
),

//password 입력창
TextField(
  keyboardType: TextInputType.emailAddress,
  onChanged: (value) {
  	email = value;
  },
),

//register버튼을 누르면 회원가입 시도
FlatButton(
  title: 'Register',
  onPressed: () async {
  	try {
      final newUser = await _auth.createUserWithEmailAndPassword(
        email: email, password: password); //회원가입
    } catch (e) {
      print(e);
    }
  }
),
        
//login버튼을 누르면 회원가입 시도
FlatButton(
  title: 'Log In',
  onPressed: () async {
  	try {
      final user = await _auth.signInWithEmailAndPassword(
        email: email, password: password); //로그인
    } catch (e) {
      print(e);
    }
  }
),
        
//logout은 signOut()사용
_auth.signOut();

 

2) Firestore

• 유연하고 확장 가능한 NoSQL 클라우드 데이터베이스

//Firestore 인스턴스 생성
final _firestore = FirebaseFirestore.instance;
 
//입력받은 텍스트 저장
String messageText;


//입력받은 텍스트를 Firestore에 저장 
TextField(
  onChanged: (value) {
    messageText = value;
  },
),

FlatButton(
  onPressed: () {
    _firestore.collection('messages').add({ //collection에 새로운 document 추가
      'text': messageText,
      'sender': loggedInUser.email,
    });
  },
),

//실시간 데이터를 화면에 표기
StreamBuilder<QuerySnapshot>(
  builder: (context, snapshot) {
    if (!snapshot.hasData) { //데이터가 없을 때 빈 위젯 반환
      return Center(
        child: CircularProgressIndicator(
          backgroundColor: Colors.lightBlueAccent,
      ),
    );
    }
    
    final messages = snapshot.data.docs;
    List<Text> messageWidgets = []; //데이터 개수만큼 만들어질 위젯을 저장할 배열
    for (var message in messages) {
      final messageText = message.data()['text']; //필드명이 'text'인 key의 값
      final messageSender = message.data()['sender']; //필드명이 'sender'인 key의 값
      final messageWidget = Text('$messageText from $messageSender'); //Text위젯 만들기
      messageWidgets.add(messageWidget); //배열에 추가
     }
     return Column( //데이터를 담은 위젯 반환
       children: messageWidgets,
    );
  },
  stream: _firestore.collection('messages').snapshots(),
),