TechCon Official App on Flutter Katsumi Onishi Android Engineer 株式会社ディー・エヌ・エー @katsummy

目次 2 DeNA TechCon 2019 Why Flutter ? What New Challenged? Review 1 3 Appendix 4 2

3

4 DeNAでは、ゲームやエンタメだけでなく、 Eコマース、ソーシャルLIVE、ヘルスケア、オートモーティブ、 そして横浜DeNAベイスターズのようなスポーツなど、様々な事業を行っています。 また、技術の力で事業の未来をリードするため、様々なチャレンジも行っています。 DeNA TechCon はこれらのチャレンジの中から、 技術的に特に面白いものを厳選して皆さんにお披露目するお祭りです。

5 今年のテーマは「SHIFT UP」です。 『面白かったー！』と思っていただく工夫を凝らしてお待ちしてますので、 みなさまぜひお越しください！

6 12月中旬... Why Flutter ?

Why Flutter ? • 12月中旬... • DeNA TechApp 2019 2.6 開催にあたりオフィシャルアプリを作成した い • iOS / Android 両方でリリースしたい • 短納期なのでハイブリッド? • 先日、Flutter 1.0 リリースされた!! • Flutter Live '18 at 4.Nov in London • 新しい技術にチャレンジ！ 7

What New Challenged? • DeNA の Flutter アプリは初めて • どうせなら普段のアプリできないことをやりたい • マテリアルデザインの新しいコンポーネントを使用 • Backdrop • Flareでアニメーション • PlatformView で Google Map を表示 • 新しいソフトウェアアーキテクチャ • Redux 8

What New Challenged? • マテリアルデザインの新しいコンポーネントを使用 • Backdrop - Material Design 9 Back layer Front layer Subheader

Backdrop 10

Timetable with Fixed Header 11

Timetable with Fixed Header 12 Stack Custom ScrollView Custom ScrollView SliverAppBar SliverFixedExtentList ListView ListView タイムテーブルのViewの縦スク ロールを時間のViewにSync

FLARE • 2Dimensions社無償公開の2Dのベクターアニメーションツール • エクスポートしたアニメーションをそのままFlutterで再生が可能 13

FLARE • Splash 14 2D - denaxtech - Logo

FLARE child: Center( child: FlareActor( "assets/animations/Logo.flr", animation: _animationName, fit: BoxFit.contain, callback: (string) { Navigator.of(context) .pushReplacementNamed(AppRoutes.home); }, ), ), 15

PlatformView で Google Map • 組み込みは簡単 • google_maps_flutter を使用 • Android のみ実装 • iOS 挙動不安定... • Backdropの影響？ 16

TechCon Official App 17 16:9

What New Challenged? • アーキテクチャー • MultiModule • Flutterでもできる • Redux (Flux) 18 App Architecture (Redux) Repository Common Repository Impl

MultiModule 19

MultiModule dependencies: flutter: sdk: flutter commons: path: ../commons architecture: path: ../architecture repository: path: ../repository repository_cache: path: ../repository_cache 20

Redux • 採用箇所 • Backdrop / TimeTable 21 isLoading activeTab

Store Redux 22 Action Widget Middleware Repository State Reducer State ViewModel Dispatch

Redux class App extends StatelessWidget { /// Store final Store store = Store( appReducer, initialState: AppState.initial(), middleware: createStoreMiddleware(RepositoryCache()), ); @override Widget build(BuildContext context) { return StoreProvider( store: store, child: MaterialApp( 23

Redux /// Reducer final appReducer = combineReducers([ TypedReducer(_onLoading), TypedReducer(_onError), TypedReducer(_onLoadSessions), TypedReducer(_onLoadedSessions), TypedReducer(_onUpdateTab), ]); 24

Redux @immutable class AppState { final bool isLoading; final bool hasError; final AppTab activeTab; final List sessions; 25

Redux /// Middleware List> createStoreMiddleware(Repository repository) { _repository = repository; return [ TypedMiddleware(_load), ]; } 26

Redux /// Sessions Load Future _load(Store 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

Redux class TimeTablePage extends StatelessWidget { @override Widget build(BuildContext context) { return StoreConnector( 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

• TimeTableWidget は力技感.... • Redux • View と Logicの分離 • State は Storeで一元管理 • View毎に StoreからViewModelを作成が若干手間 • Middleware内でdispatchさせるとnextのactionは...? • 小規模アプリでは... Review 29

• 課題 • 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

Appendix 31 ソースコードは公開します! will soon 詳しくはGitHubで!

32 テックコン 検索 ブースも出 します!