FirebaseͰ θϩ͔ΒΞϓϦΛ࡞Δ
 Flutter Meetup Tokyo #4  pixiv.inc @consomme72 / Tadashi Yamazaki 

ࣗݾ঺հ
 ࢁ࡚ ਖ਼ / Tadashi Yamazaki Twitter: @consomme72 ϐΫγϒגࣜձࣾ ΫϦΤΠλʔࣄۀ෦ AndroidΞϓϦΤϯδχΞ 

BOOTH
 ಉਓࢽɺάοζɺ ΞΫηαϦʔͳͲΛ खܰʹൢചͰ͖ΔαʔϏε ※ٕज़ॻଟ਺ൢചதʂ 

 ࠷ۙձࣾͰ FlutterΛ࢖͍ͬͯΔͷͰ ஌ݟڞ༗ 

 Flutter x Firebase 

https://github.com/flutter/plugins/blob/master/FlutterFire.md
 

 ؆қTumblrతΞϓϦΛ࡞Δ 

 Setup Firebase 

 ͍͍ͩͨެࣜʹॻ͍ͯ͋ΔͷͰ ཁ఺͚ͩ https://codelabs.developers.google.com/codelabs/flutter-firebase/ 

https://console.firebase.google.com/
 

iOS/Android྆ํͷઃఆΛߦ͏
 

Android
 ΞϓϦΛొ࿥͢Δࡍʹ σόοάkeystoreͷSHA-1Λొ࿥ ʢGoogleAuthͰඞཁʣ 

Android
 google-services.jsonɹΛ appҎԼʹ഑ஔ 

Android
 app/build.gradle build.gradle buildscript { … dependencies { … classpath 'com.google.gms:google-services:3.2.1' … } } apply plugin: 'com.google.gms.google-services' 

iOS
 ී௨ʹόϯυϧIDΛهೖ 

iOS
 $ open ios/Runner.xcworkspace ͰXCodeΛىಈͯ͠ RunnerσΟϨΫτϦʹ GoogleService-Info.plistɹΛ഑ஔ 

• Firebase AuthenticationʢϢʔβʔೝূʣ • Google AuthenticationʢGoogleೝূʣ • Cloud Firestoreʢσʔλϕʔεʣ • Cloud Storageʢը૾อଘʣ
 ࠓճ࢖͏ػೳ 

 flutter: sdk: flutter # For Firebase firebase_auth: ^0.5.19 google_sign_in: ^3.0.5 cloud_firestore: ^0.7.4 firebase_storage: ^1.0.1 pubspec.yaml 

 Firebase Authentication 

 Firebase Console Ͱ ࢖͍͍ͨೝূํࣜΛ ༗ޮʹ͓ͯ͘͠ ࣄલઃఆ 

 CFBundleURLTypes CFBundleTypeRole Editor CFBundleURLSchemes com.googleusercontent.apps.${hoge} iOS : Info.plist ʹ௥ه 

 … REVERSED_CLIENT_ID com.googleusercontent.apps.${hoge} … GoogleServices-Info.plist ͔Βίϐϖ 

 class _AuthScreenState extends State { final GoogleSignIn _googleSignIn = new GoogleSignIn( scopes: [ 'email' ] ); final FirebaseAuth _firebaseAuth = FirebaseAuth.instance; Future _signIn() async { GoogleSignInAccount account = await _googleSignIn.signIn(); GoogleSignInAuthentication authentication = await account.authentication; FirebaseUser user = await _firebaseAuth.signInWithGoogle( accessToken: authentication.accessToken, idToken: authentication.idToken, ); return user; } 

 child: new FlatButton( child: const Text('Sign in'), color: Colors.blue, textColor: Colors.white, onPressed: () { _signIn() .then((user) { Navigator.pushReplacement(context, new MaterialPageRoute( builder: (context) => new TimelineScreen() )); } ) .catchError((e) => Scaffold.of(context).showSnackBar(new SnackBar( content: new Text(e.toString()), ))); }, 

 Firebase Cloud Storage 

 Future _send(String body) async { Uri imageUrl; int time = DateTime.now().millisecondsSinceEpoch; String uuid = Uuid().v4(); if (_image != null) { StorageUploadTask uploadTask = FirebaseStorage.instance .ref() .child('image') .child(uuid + '-' + time.toString()) .putFile(_image); imageUrl = (await uploadTask.future).downloadUrl; } … } 

 Cloud Firestore 

 import 'dart:async'; import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:sampleboard/model/post.dart'; final CollectionReference postCollection = Firestore.instance.collection('posts'); class FirestoreService { Stream getPostList() { return postCollection.orderBy('order').snapshots(); } … } FirestoreService::getList 

 Future createPost(String body, String image, int order) { final TransactionHandler handler = (Transaction transaction) async { final DocumentSnapshot snapshot = await transaction.get(postCollection.document()); final Post post = new Post(snapshot.documentID, body, image, order, 0); final Map data = post.toMap(); await transaction.set(snapshot.reference, data); return data; }; return Firestore.instance.runTransaction(handler).then((mapData) { return Post.fromMap(mapData); }); } FirestoreService::createPost 

 Future updatePost(Post post) { final TransactionHandler handler = (Transaction transaction) async { final DocumentSnapshot snapshot = await transaction.get(postCollection.document(post.id)); await transaction.update(snapshot.reference, post.toMap()); return {'updated': true}; }; return Firestore.instance.runTransaction(handler).then((result) { return result['updated']; }); } FirestoreService::updatePost 

 StreamSubscription postSubscription; @override void initState() { super.initState(); _posts = new List(); postSubscription?.cancel(); postSubscription = db.getPostList().listen((QuerySnapshot snapshot) { List posts = snapshot.documents.map((snapshot) => Post.fromMap(snapshot.data)).toList(); setState(() { _posts = posts; }); }); } getList 

 Demo 

 Tips? 

 υϝΠϯࢦఆͰ Create flutter create —org ${domain} ※Tips -i ͰiOSͷݴޠࢦఆ -a ͰAndroidͷݴޠࢦఆ $ flutter create \ --org "net.pixiv.flutter" \ -i swift \ -a kotlin \ pixiv-flutter 

 Multidex͕ ඞཁ Firebaseͷplugin͕ ΊͬͪΌϝιου਺ଟ͍ͷͰ MultidexͷઃఆͨͿΜඞਢ android { … defaultConfig { multiDexEnabled true } … } 

• αʔόΛ༻ҙ͠ͳ͍͍ͯ͘ͷ͸ΞϓϦΤϯδχΞͱָͯ͠ • Plugin͕ἧ͍ͬͯΔͷͰਂ͘ߟ͑ͣʹ࣮૷Ͱ͖Δ • ઃఆΛ๨ΕΔͱϋϚΔͷͰυΩϡϝϯτ͸͔ͬ͠ΓಡΉ • iOSͱAndroidͰผͷઃఆΛ͢Δ৔߹΋ଟ͍ • ΤϥʔϩάͩͱԿ͕͓͔͍͠ͷ͔શવΘ͔Βͳ͍ • ެࣜGithub΍StackOverflowΛۦ࢖͢Δ
 ·ͱΊ 

• Flutter Firestore example - Firebase Firestore CRUD with ListView - grokonez • https://grokonez.com/flutter/flutter-firestore-example-firebase-firestore-crud- operations-with-listview • Flutter Institute — Firebase Firestore • https://flutter.institute/firebase-firestore/
 References 

 Thanks! https://github.com/consomme/sample-board-flutter