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

Transcript

1. Flutterでアプリ作った
   作ってる話
   Making My First Flutter App
   2018 / 4/ 6 M3 TechTalk
   @suusan2go
   

   View Slide

2. 自己紹介
   ● Kenta Suzuki / @suusan2go
   ● M3,inc / Software Engineer
   ● 経験値で言うとこんな感じ
   ○ Ruby > JavaScript > Kotlin(ServerSide) > Golang
   ● どちらかと言えばサーバーサイドエンジニアです！
   ● 最近のお気に入り映画は「バーフバリ 王の凱旋」です
   

   View Slide

3. What is Flutter ?
   ●
   Flutter is Google’s mobile UI framework for
   crafting high-quality native interfaces on iOS
   and Android in record time.
   ●
   Dartで動く
   

   View Slide

4. Whit is Dart ?
   ● Googleが開発しているWeb向けのプログラミング言語
   ● もともとはJavaScriptの代替として開発されていたが、2015
   年にはChromeへの組み込みを断念
   ● 更に2017年にはGoogleの社内標準言語にTypeScriptが選
   ばれてしまう
   

   View Slide

5. 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 !
   

   View Slide

6. ● すごく・・・Javaです・・・
   ● 所感としては JavaScriptをJavaっぽくしてPythonを隠し味に加えたような感じ
   ● あまり目新しい概念はないので、
   Javaやってた人なら凄くとっつきやすそう
   ● コードは以下のリンクから抜粋
   ○
   https://www.dartlang.org/samples/
   Dart code
   

   View Slide

7. View Slide

8. View Slide

9. Dart Cide
   ● Async / Await が使えるのは特徴かもしれない
   

   View Slide

10. Making My First Flutter App
    ● もともと鈴木家のための日記アプリみたいなのをReact Nativeで作ってた
    ● flutterが流行ってるし、簡単にそれっぽいUI が作れるらしいとのことで書
    き換えてみた
    ● バックエンドはもともとGolangで自前で書いてたんだけどFirebaseにして
    みた
    ● なんでCross-Platformなもの使ってるかというと、自分がiPhoneで奥さん
    がAndroidつかってるから！！！！iPhone使ってくれ頼む！
    

    View Slide

11. How is Flutter? pros
    ● Material DesignなUIを作るのは簡単
    ● 挙動がネイティブっぽい(※WEBエンジニアの感想です)
    ● Reloadが早い
    ● React Nativeに比べると開発時の挙動が安定している気がす
    る
    ● 必要なものは公式がライブラリを提供してくれている > Firebase
    とか
    

    View Slide

12. Material DesignなUIを作る
    ● 公式にWidgetsカタログがある。かなり豊富なのでそれだけで、一
    般的なUIは作れてしまう。
    ○ https://flutter.io/widgets/material/
    

    View Slide

13. Scaffold
    

    View Slide

14. Drawer
    

    View Slide

15. Bottom
    Navigation
    Bar
    

    View Slide

16. React Likeなステート管理
    setStateで値を更新する
    とbuildが走る
    Widgetからはその値を参
    照するだけで良い
    

    View Slide

17. 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,
    );
    }
    

    View Slide

18. How is Flutter? cons
    ● WebエンジニアとしてはReactNativeのほうが圧倒的にわかり
    やすい。JSXのマークアップみたいなもんだし。
    ● ステート管理のベストプラクティスがよくわからん
    ● React NativeほどまだOSSのライブラリが少ない印象
    

    View Slide

19. React Nativeでのスタリング
    インラインのCSSのように
    表現できる
    

    View Slide

20. Flutterでのスタイリング
    PaddingのWidgetで
    WrapしてPaddingを表現
    

    View Slide

21. ステート管理のベストプラクティス
    ● React Nativeだと redux /mobx みたいなものがWebと
    同じように使えたけど、Flutterはその辺発展途上な感じ
    する
    ● GitHubに以下のようなIssueがオープン
    ○ Better state management solution
    

    View Slide

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

    View Slide

23. 最後にいま作りかけのやつデモ
    ● と思ったけどうまく動かなかったので、Flutterのデモ
    

    View Slide

24. まとめてないまとめ
    ● Flutterは結構よさそう
    ● でもWEBエンジニアがとっつきやすいのはreact Nativeだと思う
    ● FlutterもすごいけどFirebaseもすごい
    

    View Slide

25. 以上です
    

    View Slide