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

TechCon Official App on Flutter

TechCon Official App on Flutter

Katsumi Onishi

January 30, 2019
Tweet

More Decks by Katsumi Onishi

Other Decks in Technology

Transcript

  1. 目次 2 DeNA TechCon 2019 Why Flutter ? What New

    Challenged? Review 1 3 Appendix 4 2
  2. 3

  3. Why Flutter ? • 12月中旬... • DeNA TechApp 2019 2.6

    開催にあたりオフィシャルアプリを作成した い • iOS / Android 両方でリリースしたい • 短納期なのでハイブリッド? • 先日、Flutter 1.0 リリースされた!! • Flutter Live '18 at 4.Nov in London • 新しい技術にチャレンジ! 7
  4. What New Challenged? • DeNA の Flutter アプリは初めて • どうせなら普段のアプリできないことをやりたい

    • マテリアルデザインの新しいコンポーネントを使用 • Backdrop • Flareでアニメーション • PlatformView で Google Map を表示 • 新しいソフトウェアアーキテクチャ • Redux 8
  5. Timetable with Fixed Header 12 Stack Custom ScrollView Custom ScrollView

    SliverAppBar SliverFixedExtentList ListView ListView タイムテーブルのViewの縦スク ロールを時間のViewにSync
  6. FLARE child: Center( child: FlareActor( "assets/animations/Logo.flr", animation: _animationName, fit: BoxFit.contain,

    callback: (string) { Navigator.of(context) .pushReplacementNamed(AppRoutes.home); }, ), ), 15
  7. PlatformView で Google Map • 組み込みは簡単 • google_maps_flutter を使用 •

    Android のみ実装 • iOS 挙動不安定... • Backdropの影響? 16
  8. What New Challenged? • アーキテクチャー • MultiModule • Flutterでもできる •

    Redux (Flux) 18 App Architecture (Redux) Repository Common Repository Impl
  9. MultiModule <pubspec.yaml> dependencies: flutter: sdk: flutter commons: path: ../commons architecture:

    path: ../architecture repository: path: ../repository repository_cache: path: ../repository_cache 20
  10. Redux class App extends StatelessWidget { /// Store final Store<AppState>

    store = Store<AppState>( appReducer, initialState: AppState.initial(), middleware: createStoreMiddleware(RepositoryCache()), ); @override Widget build(BuildContext context) { return StoreProvider<AppState>( store: store, child: MaterialApp( 23
  11. Redux /// Reducer final appReducer = combineReducers<AppState>([ TypedReducer<AppState, LoadingAction>(_onLoading), TypedReducer<AppState,

    ErrorAction>(_onError), TypedReducer<AppState, SessionsLoadAction>(_onLoadSessions), TypedReducer<AppState, SessionsLoadedAction>(_onLoadedSessions), TypedReducer<AppState, UpdateTabAction>(_onUpdateTab), ]); 24
  12. Redux @immutable class AppState { final bool isLoading; final bool

    hasError; final AppTab activeTab; final List<Session> sessions; 25
  13. Redux /// Sessions Load Future _load(Store<AppState> store, action, NextDispatcher next)

    async { // Dispatch a LoadingAction to show a loading spinner store.dispatch(LoadingAction()); // Get session var sessions = await _repository.getSessionList(); store.dispatch(SessionsLoadedAction(sessions)); next(action); } 27
  14. Redux class TimeTablePage extends StatelessWidget { @override Widget build(BuildContext context)

    { return StoreConnector<AppState, _ViewModel>( onInit: (store) => store.dispatch(SessionsLoadAction()), distinct: true, converter: _ViewModel.fromStore, builder: (context, vm) { if (vm.isLoading) { return Center(child: LoadingIndicator()); } else { return TimeTable( sessions: vm.sessions, ); } }, 28
  15. • TimeTableWidget は力技感.... • Redux • View と Logicの分離 •

    State は Storeで一元管理 • View毎に StoreからViewModelを作成が若干手間 • Middleware内でdispatchさせるとnextのactionは...? • 小規模アプリでは... Review 29
  16. • 課題 • FCM • 通知 の アプリ内表示 • LicensePage

    • 内容に重複が多く法務確認が手間 • Flutter Engineのライセンスまで表示される... • skia で使用している gif ライブラリが MPL 1.1/GPL 2.0/LGPL 2.1 トリプルライセンスであるが、LGPL 2.1 のみ表示される。 • CI • [Jan 23, 2019] Flutter CI v.1.0.0 がBitriseに登場! • もっとはやくに... Review 30