flutter with firebase, mobx

환경 설정

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 설정

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를 사용합니다.
(다른것을 사용할 수도 있습니다)

• https://mobx.pub/getting-started

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

• https://github.com/DeveloperLibs/flutter_firebase_database/blob/master/pubspec.yaml