~~NOCACHE~~
~~REVEAL night~~

---->>

# flutter with firebase, mobx

{{tag>flutter 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

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

![](http://snappyimages.nextwavesrl.netdna-cdn.com/img/f1e2cb51f008170fb32fd74fbe01ad58.png?800)

---->

## firebase 프로젝트 생성

[firebase 콘솔](https://console.firebase.google.com/?hl=ko&pli=1)에서 프로젝트를 생성합니다.

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

![](http://snappyimages.nextwavesrl.netdna-cdn.com/img/04c63fa08ba676bdc5a58249184cc4ee.png?500)

---->

### 앱 추가

\\
\\

![](http://snappyimages.nextwavesrl.netdna-cdn.com/img/dcbfa3b2aa34050c7cccc49911eb171c.png?300)


---->

### google-services.json 다운로드

![](http://snappyimages.nextwavesrl.netdna-cdn.com/img/35f88913588181528d42dc0371d1dcc0.png?800)

---->

### google-services.json 파일 복사

![](http://snappyimages.nextwavesrl.netdna-cdn.com/img/1985a8939a0259d16bf17a69acd253e7.png?300)

[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 에서 다운받아 설치합니다.

\\

```shell
flutter create [project_name]
```
---->

### android/build.gradle 파일 변경

```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 변경

```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"
    }
```

맨 밑에 추가

```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` 를 추가합니다.

\\

```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

```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 

```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` 파일이 생성됩니다.

\\

```shell
flutter packages pub run build_runner build
```

![](http://snappyimages.nextwavesrl.netdna-cdn.com/img/62cf02106d615fac64964739bc020b7a.png)

---->

### store 생성 & provider로 전달

```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 사용

```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

\\