~~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
사용하는 이유는 서버 걱정 없이 개발
할 수 있습니다. 개발용도 정도의 사용량은 무료로 가능하며, 이용자가 많아지면 돈만 내면 됩니다.
—→
## 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>
—→
https://flutter.dev/docs/get-started/install 에서 다운받아 설치합니다.
flutter create [project_name]
—→
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' <------- `추가` } }
—→
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" }
맨 밑에 추가
apply plugin: 'com.google.gms.google-services'
—→
AndroidX 사용 설정 합니다.
org.gradle.jvmargs=-Xmx1536M android.enableJetifier=true android.useAndroidX=true
—→
firebase_core
firebase_database
를 추가합니다.
dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 firebase_core: ^0.4.0 firebase_database: ^3.0.7
—→
>
## MobX
플러터에서 상태관리를 위해 mobx
를 사용합니다.
(다른것을 사용할 수도 있습니다)
—→
pubspec.yaml
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
—→
lib/store/counter_store.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++; } }
—→
커맨드창에서 실행하면 counter_store.g.dart
파일이 생성됩니다.
flutter packages pub run build_runner build
—→
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(), )); } }
—→
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