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

35b58828e4e24c579c35529061711dfd?s=128

Kenta Suzuki

April 06, 2018
Tweet

Transcript

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

    6 M3 TechTalk @suusan2go
  2. 自己紹介 • Kenta Suzuki / @suusan2go • M3,inc / Software

    Engineer • 経験値で言うとこんな感じ ◦ Ruby > JavaScript > Kotlin(ServerSide) > Golang • どちらかと言えばサーバーサイドエンジニアです! • 最近のお気に入り映画は「バーフバリ 王の凱旋」です
  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で動く
  4. Whit is Dart ? • Googleが開発しているWeb向けのプログラミング言語 • もともとはJavaScriptの代替として開発されていたが、2015 年にはChromeへの組み込みを断念 •

    更に2017年にはGoogleの社内標準言語にTypeScriptが選 ばれてしまう
  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 !
  6. • すごく・・・Javaです・・・ • 所感としては JavaScriptをJavaっぽくしてPythonを隠し味に加えたような感じ • あまり目新しい概念はないので、 Javaやってた人なら凄くとっつきやすそう • コードは以下のリンクから抜粋

    ◦ https://www.dartlang.org/samples/ Dart code
  7. None
  8. None
  9. Dart Cide • Async / Await が使えるのは特徴かもしれない

  10. Making My First Flutter App • もともと鈴木家のための日記アプリみたいなのをReact Nativeで作ってた • flutterが流行ってるし、簡単にそれっぽいUI

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

    Reloadが早い • React Nativeに比べると開発時の挙動が安定している気がす る • 必要なものは公式がライブラリを提供してくれている > Firebase とか
  12. Material DesignなUIを作る • 公式にWidgetsカタログがある。かなり豊富なのでそれだけで、一 般的なUIは作れてしまう。 ◦ https://flutter.io/widgets/material/

  13. Scaffold

  14. Drawer

  15. Bottom Navigation Bar

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

  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, ); }
  18. How is Flutter? cons • WebエンジニアとしてはReactNativeのほうが圧倒的にわかり やすい。JSXのマークアップみたいなもんだし。 • ステート管理のベストプラクティスがよくわからん •

    React NativeほどまだOSSのライブラリが少ない印象
  19. React Nativeでのスタリング インラインのCSSのように 表現できる

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

  21. ステート管理のベストプラクティス • React Nativeだと redux /mobx みたいなものがWebと 同じように使えたけど、Flutterはその辺発展途上な感じ する •

    GitHubに以下のようなIssueがオープン ◦ Better state management solution
  22. 違うページのStateを更新したい ほげったー 2018/04/07 ♡ ほげったー 2018/04/07 ♡ ほげったー 2018/04/07 ♡

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

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

  25. 以上です