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. Flutterでアプリ作った
    作ってる話
    Making My First Flutter App
    2018 / 4/ 6 M3 TechTalk
    @suusan2go

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    https://www.dartlang.org/samples/
    Dart code

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. How is Flutter? pros
    ● Material DesignなUIを作るのは簡単
    ● 挙動がネイティブっぽい(※WEBエンジニアの感想です)
    ● Reloadが早い
    ● React Nativeに比べると開発時の挙動が安定している気がす

    ● 必要なものは公式がライブラリを提供してくれている > Firebase
    とか

    View full-size slide

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

    View full-size slide

  11. Bottom
    Navigation
    Bar

    View full-size slide

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

    View full-size slide

  13. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. 違うページのStateを更新したい
    ほげったー
    2018/04/07 ♡
    ほげったー
    2018/04/07 ♡
    ほげったー
    2018/04/07 ♡



    ほげったー
    2018/04/07 ♡
    今日はテックトーク
    でした。
    とってもたのしかっ
    たです。
    Flutterの話が一番
    おもしろかったで

    すずお
    これを押したときに元のページの♡を
    ♥にしたい
    普通にやるとsetStateする関数をこのWidgetに渡すこと
    になる?
    ページが複雑になってきたときどうすればいいんだろうか
    Hogetter

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. 以上です

    View full-size slide