Flutter で iOS / Android アプリを高速リプレイスした話

Flutter で iOS / Android アプリを高速リプレイスした話

D18b9be7ff4e3541bc9e203bc2cb8acc?s=128

Yota Ishikawa

January 30, 2019
Tweet

Transcript

  1. Flutter  iOS / Android     2019/01/30

    Yota Ishikawa
  2. 2  ( 2018  9! ):  12 :

      #"%'  &$ !
  3. 3 !  )$ : Objective-C / Java '( (

      ) 1. Swift / Kotlin 2. React Native 3. Flutter 4. Cordova + SPA 5. Xamarin 6. Kotlin Native 'Flutter + Swift / Kotlin     &  Swift / Kotlin 4 9 10 React Native 7 8 7 Flutter 10 7 8 Cordova + SPA 8 7 6 10#%*"     
  4. 4   Flutter  

  5. 5 

  6. 6 Dart +       

    iOS Android
  7. 7   UI Widget 3rd Party   UI

  8. 8   +  IDE   

  9. 9  • -> (60 fps) 16 !%() • G3

      '%) A< • Dart FC • "#.? 7E • CI / CD =; :  • *49,D+ (GitHub 525,) • Google Push  • Fuchsia OS • Firebase .?   (B0/8) • @  (→)!&$() )
  10. 10  •     • Storyboard 

     •  /   !
  11. 11   Tips 

  12. 12    <Bloc (Business Logic Component) > https://www.youtube.com/watch?v=RS36gBEp8OI

    () https://steemit.com/utopian-io/@tensor/using-the-bloc-pattern-to-build- reactive-applications-with-streams-in-dart-s-flutter-framework https://github.com/filiph/state_experiments/blob/master/shared/lib/src/bl oc_complex/main.dart https://medium.com/flutter-jp/bloc-provider-70e869b11b2f < > https://github.com/mercari/mtc2018-app https://github.com/flutter/flutter/tree/master/examples/flutter_gallery () Cartune (https://note.mu/najeira/n/n8924408dd07b) < > https://medium.com/@salvatoregiordanoo/flavoring-flutter- 392aaa875f36 <  > https://medium.com/flutter-community/flutter-layout-cheat-sheet- 5363348d037e () <Codelab by Google> https://codelabs.developers.google.com/?cat=Flutter <Internationalization> https://medium.com/@anilcan/flutter-internationalization-by-using-json- files-f91468d86df0 <Flutter Tokyo Meetup> https://flutter-jp.connpass.com/presentation <Qiita Advent Calendar> https://qiita.com/advent-calendar/2018/flutter <> https://medium.com/flutter-jp/flutter-learning-c5640c5f05b9 <tips> https://medium.com/flutter-jp/tips-b2487a63a8
  13. 13  Package  Plugin • dio … ' HttpClient

    • url_launcher … "  URL " • vibrate … 0- • share … *+ SNS     • rxdart … Rx !" • intl … 1000 1,000&( # • image_picker … ).$/ • shared_preferences … !  %,
  14. 14   Bloc ( )  Stateful Widget ()

    class Bloc { HogeBloc hoge; FugaBlog fuga; Bloc() { hoge = HogeBloc(); fuga = FugaBlog(); } } class BlocProvider extends InheritedWidget { final Bloc bloc; BlocProvider({ Key key, Bloc bloc, Widget child, }) : bloc = bloc ?? Bloc(), super(key: key, child: child); @override bool updateShouldNotify(InheritedWidget oldWidget) => true; static Bloc of(BuildContext context) => (context.inheritFromWidgetOfExactType(BlocProvider) as BlocProvider).bloc; }
  15. 15 '  • WebView Plugin https://pub.dartlang.org/packages/flutter_webview_plugin → & 

     https://pub.dartlang.org/packages/webview_flutter →  () Google $ %… !#" -  # - 2'   - $% URL  "  - iOS / Android !( - &  …
  16. 16        iOS /

    Android  5MB        iOS 139 MB 104 MB 49 MB Android 63 MB 24 MB 24 MB
  17. 17      • OS $ Dart

     93% + • !,) 75% +  74: iOS (Storyboard, Objective-C: 9,977 ) Android (XML: 3,430 , Java: 12,622 ) &2: Flutter (Dart: 6,088 , Swift 236 , Kotlin 219 )  3%"'- /%" 0*.5(    #UI   16