Flutter入門してみた

最後のスライドのデモ動画のリンクは以下です。
https://docs.google.com/file/d/1O_EjgVpUbFzMJ4MeCCd4ApQE8la9mUaC/preview

Transcript

1. Flutter入門してみた
2. 自己紹介 名前 にしやま @nsym__m 職業 サーバーサイドエンジニア Go, PHP, JavaScriptなど 趣味 アニメ、漫画、プログラム、犬と猫
3. 目次 - Flutterてなに？ - なぜFlutter - どんなことした？ - よく使われるライブラリ調べた - デフォルトで作られるカウンターアプリの MVVM化 - アプリによくある画面下のタブバーの実装 - 歩数計測 - デモ動画
4. 　Flutterてなに？ - クロスプラットフォームのフレームワーク - iOS, Android, Web, Windows, macOS, Linuxの開発が出来る - Googleが開発してるFuchsiaという独自のOSのUIを開発することも出来る
 - FuchsiaはNest hub(Googleのスマートホームのデバイス)に使われている
 - Googleが開発している - 言語はDart - DartもGoogleが開発してる - 宣言的UI
5. なぜFlutter - アプリの開発もできるようになりたい気持ちがある - ネイティブの方がいいのでは？ - iOSはネイティブの開発も少しあったが、 iOS/Androidどちらも開発できるようになりたいので Flutter を選んでみた - React Nativeは？ - React Nativeは落ち目感があるし前職の経験から良い思い出がないので使う気になれない - React NativeはWeb開発者が使うことが多い印象だったが、 Flutterはアプリ開発者が使うことが多 い印象で（アプリエンジニアに受け入れられてるという意味で） React Nativeよりも盛り上がりが長そ う
6. どんなことした？ - よく使われるライブラリを調べた - デフォルトでできるカウンターアプリのMVVM化 - アプリによくある画面下のタブバーの実装 - 歩数計測（途中）
7. よく使われるライブラリを調べた - Riverpodという状態管理ライブラリがよく使われる - デフォルトで使えるStatefulWidgetというWidget(画面を描画する為の機能 )ではUIの中にロジック の処理を書くことになってしまう - 規模が大きくなるにつれてつらくなるので、 UIとロジックの分離の為に Riverpodというライブラリが 使われる - Widgetの外にステート(アプリで持ってる状態 )を持つのでWidget内ではステートの読み取りと更新 処理の呼び出しだけで良くなる
8. デフォルトで作られるカウンターアプリのMVVM化（1） - MVVM+Repositoryパターンで作った - なぜMVVM？ - Riverpodを使ったFlutterでのMVVMには賛否あるみたいだったので、とりあえず使ってみて判断す る為 - 中規模くらいのアプリだとこのくらい（ MVVM+Repository）の構成がちょうど良さそうな気がした - そもそもMVVMとは？ - Model, View, ViewModelの略 - 従来のアプリでよく使われていた MVC(Model View Controller)だとModelのデータの変更をViewに 伝えにくいという問題があった - MVVMではデータバインディングという機能で ViewModelで持ってるデータの変更を即座に Viewに 伝えることができる - ReactやVue.jsでも使われている
9. デフォルトで作られるカウンターアプリのMVVM化（2） （続き） - Repositroyとは？ - データを取得する際にどこから取得しているのか隠蔽し、データを取得する側が取得元のことを気 にしなくてよくする為のデザインパターン - アプリでは独自のサーバから APIでデータを取得したり Firebaseから取得したりRedisから取得した りローカル保存のデータを取得したりといろいろな取得もとがあるので、データを使う側の階層では それらを気にする必要がなくなる
10. アプリによくある 画面下タブバーの実装 これのこと
11. 簡単に解説 タブバーの種類を指定 タブバーの状態を管理を定義 ↑で定義したbaseTabViewProviderの監視 タブバーをタップした時の処理 items: const [ BottomNavigationBarItem(icon: Icon(Icons.home), label: 'home'), BottomNavigationBarItem( icon: Icon(Icons.calendar_month), label: 'calendar'), BottomNavigationBarItem(icon: Icon(Icons.home), label: 'health'), ], final baseTabViewProvider = StateProvider((ref) => PageType.home); enum PageType { home, calendar, health } final page = ref.watch(baseTabViewProvider.state); onTap: (int index) => page.state = PageType.values[index],
12. - healthというパッケージを利用 - https://pub.dev/packages/health - iOSはヘルスケアからデータを取得する - AndroidはGoogle Fitというアプリからデータを取得する - Google Fitがインストールされていないと使えない - 審査には動画でアプリの必要性を説明しないといけないらしい - かなりめんどくさそう - Google Fitがインストールされていないと使えない歩数計アプリって微妙では？と思った 歩数計測
13. デモ動画 表示媒体によっては GoogleDriveの動画に 遷移します