open:flutter-firebase


~~REVEAL night~~

—→

>

# flutter with firebase, mobx

, ,

—→

환경 설정


<fragment-block fade-up>1. firebase 설정</fragment-block>
<fragment-block fade-up>2. flutter 설정</fragment-block>
<fragment-block fade-up>3. mobx 설정</fragment-block>

—→

>

# firebase

홈페이지: https://firebase.google.com/?hl=ko

사용하는 이유는 서버 걱정 없이 개발 할 수 있습니다. 개발용도 정도의 사용량은 무료로 가능하며, 이용자가 많아지면 돈만 내면 됩니다.

—→

firebase 프로젝트 생성

firebase 콘솔에서 프로젝트를 생성합니다.

url : https://console.firebase.google.com/?hl=ko&pli=1

—→

앱 추가




—→

google-services.json 다운로드

—→

google-services.json 파일 복사

[project_name]/android/app 으로




다운받은




google-services.json 파일을 복사 합니다.

—→

>

## flutter 설정

<fragment-block>1. 프로젝트 생성</fragment-block>
<fragment-block>2. android/build.gradle 수정</fragment-block>
<fragment-block>3. android/app/build.gradle 수정</fragment-block>
<fragment-block>4. android/gradle.properties 수정</fragment-block>
<fragment-block>5. pubspec.yaml 수정</fragment-block>

—→

flutter 프로젝트 생성


https://flutter.dev/docs/get-started/install 에서 다운받아 설치합니다.


snippet.shell
flutter create [project_name]

—→

android/build.gradle 파일 변경

snippet.javascript
buildscript {
    ext.kotlin_version = '1.2.71'
    repositories {
        google()
        jcenter()
    }
 
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath 'com.google.gms:google-services:4.3.2'   <------- `추가`
    }
}

—→

android/app/build.gradle 변경

snippet.javascript
defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.rmaru.mart"   <----- firebase app 이름과 동일하게 설정
        minSdkVersion 16
        targetSdkVersion 28
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }

맨 밑에 추가

snippet.javascript
apply plugin: 'com.google.gms.google-services'

—→

android/gradle.properties 수정

AndroidX 사용 설정 합니다. 

org.gradle.jvmargs=-Xmx1536M
android.enableJetifier=true
android.useAndroidX=true

—→

pubspec.yaml 수정


  • firebase_core
  • firebase_database 를 추가합니다.


snippet.javascript
dependencies:
  flutter:
    sdk: flutter
 
  cupertino_icons: ^0.1.2
  firebase_core: ^0.4.0
  firebase_database: ^3.0.7

—→

>

## MobX


플러터에서 상태관리를 위해 mobx를 사용합니다.


(다른것을 사용할 수도 있습니다)


—→

MobX 관련 패키지 추가

pubspec.yaml

snippet.javascript
dependencies:
 
  ...
 
  provider: ^3.1.0+1
  mobx: ^0.3.9+1
  flutter_mobx: ^0.3.3+1
 
...
 
dev_dependencies:
 
  ...
 
  build_runner: ^1.7.2
  mobx_codegen: ^0.3.10

—→

store 파일 생성

lib/store/counter_store.dart

snippet.dart
import 'package:mobx/mobx.dart';
 
// Include generated file
part 'counter_store.g.dart';
 
// This is the class used by rest of your codebase
class CounterStore = _CounterStore with _$CounterStore;
 
// The store-class
abstract class _CounterStore with Store {
  @observable
  int value = 0;
 
  @action
  void increment() {
    value++;
  }
}

—→

build run


커맨드창에서 실행하면 counter_store.g.dart 파일이 생성됩니다.


snippet.shell
flutter packages pub run build_runner build

—→

store 생성 & provider로 전달

snippet.dart
import 'package:flutter/material.dart';
import 'package:mart_firebase/screen/home_screen.dart';
import 'package:mart_firebase/store/counter_store.dart';
import 'package:provider/provider.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
        providers: [
          Provider<CounterStore>(builder: (_) => CounterStore()),
          // Provider<SearchStore>(builder: (_) => SearchStore()),
        ],
        child: MaterialApp(
          title: 'Flutter Demo',
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            primarySwatch: Colors.green,
            backgroundColor: Colors.grey,
          ),
          home: HomeScreen(),
          // home: SearchResultScreen(),
        ));
  }
}

—→

store 사용

snippet.dart
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:mart_firebase/store/counter_store.dart';
import 'package:provider/provider.dart';
 
class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}
 
class _HomeScreenState extends State<HomeScreen> {
  CounterStore _counterStore;   // <--- 클래스 변수 선언
 
  void _increment() {
    _counterStore.incrementTimes(2);
  }
 
  @override
  Widget build(BuildContext context) {
    _counterStore = Provider.of<CounterStore>(context);  // <--- 스토어 할당
 
    return Scaffold(
        appBar: AppBar(
          title: Text('main screen'),
        ),
        body: Column(
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                _counterStore.increment();   // <--- 스토어 액션 호출
              },
              child: Text('Increase', style: TextStyle(fontSize: 20)),
            ),
            RaisedButton(
              onPressed: _increment,
              child: Text('increment * 2'),
            ),
            Observer(
              builder: (context) => Text('${_counterStore.value}'),  // <--- 스토어 값 사용
            )
          ],
        ));
  }
}

—→

>

## Ref


관련 문서