Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flutterでアプリ作ってる話

 Flutterでアプリ作ってる話

社内のテックトークで話しました

スライド内のリンク
Sample Code | Dart
https://www.dartlang.org/samples/
Fluttter Material Components Widgets
https://flutter.io/widgets/material/
React Native Version
https://github.com/suusan2go/familog-api-deprecated
Golang API
https://github.com/suusan2go/familog-app-deprecated

Kenta Suzuki

April 06, 2018
Tweet

More Decks by Kenta Suzuki

Other Decks in Programming

Transcript

  1. 自己紹介 • Kenta Suzuki / @suusan2go • M3,inc / Software

    Engineer • 経験値で言うとこんな感じ ◦ Ruby > JavaScript > Kotlin(ServerSide) > Golang • どちらかと言えばサーバーサイドエンジニアです! • 最近のお気に入り映画は「バーフバリ 王の凱旋」です
  2. What is Flutter ? • Flutter is Google’s mobile UI

    framework for crafting high-quality native interfaces on iOS and Android in record time. • Dartで動く
  3. Is Dart Dead ? • 実はAdwards / Adsenceのバックエンド / フロントエンドはDartで書

    かれているらしい(バックエンドは何かで聞いただけなのでガセか も) ◦ The new AdWords UI uses Dart — we asked why • 「Announcing Dart 2: Optimized for Client-Side Development」 で、Dartをクライアントサイドのプログラミング言語として再起動し てくぜ!とDartのプロダクトマネージャーが宣言 • Dart is not dead !
  4. Making My First Flutter App • もともと鈴木家のための日記アプリみたいなのをReact Nativeで作ってた • flutterが流行ってるし、簡単にそれっぽいUI

    が作れるらしいとのことで書 き換えてみた • バックエンドはもともとGolangで自前で書いてたんだけどFirebaseにして みた • なんでCross-Platformなもの使ってるかというと、自分がiPhoneで奥さん がAndroidつかってるから!!!!iPhone使ってくれ頼む!
  5. How is Flutter? pros • Material DesignなUIを作るのは簡単 • 挙動がネイティブっぽい(※WEBエンジニアの感想です) •

    Reloadが早い • React Nativeに比べると開発時の挙動が安定している気がす る • 必要なものは公式がライブラリを提供してくれている > Firebase とか
  6. Firebaseとの連携 例 google認証 final googleSignIn = new GoogleSignIn() final auth

    = FirebaseAuth.instance GoogleSignInAccount user = google SignIn.currentUser if(user == null) { await googleSignIn.signIn() // Googleアカウントでログイン } if(auth.currentUser() == null) { GoogleSignInAuthentication credentials = await googleSignIn.currentUser.authentication; await auth.signInWithGoogle( // Firebaseに取得したクレデンシャルでログイン idToken: credentials.idToken, accessToken: credentials.accessToken, ); }
  7. 違うページのStateを更新したい ほげったー 2018/04/07 ♡ ほげったー 2018/04/07 ♡ ほげったー 2018/04/07 ♡

    ・ ・ ・ ほげったー 2018/04/07 ♡ 今日はテックトーク でした。 とってもたのしかっ たです。 Flutterの話が一番 おもしろかったで す すずお これを押したときに元のページの♡を ♥にしたい 普通にやるとsetStateする関数をこのWidgetに渡すこと になる? ページが複雑になってきたときどうすればいいんだろうか Hogetter