対象者（私）

React は結構触ったことがある。
Flutter はチュートリアルをこなしたぐらいで雰囲気程度の理解。

これまでやったこと

syunyo 2021/06/28に更新

wasabeef さんが書いている blueprint を動作させながら勉強してみる

FirebaseCrashAnalytics や、Dio がWebに対応しておらず中々動作しない。
とはいえ、MVVM, RiverPod や fvm などは参考になった。

今後は Flutter の勉強をしながら簡単なモックを作ってみる。

syunyo 2021/07/19に更新

Riverpod の使い方

https://note.com/mxiskw/n/n5c06bc2dd0d5

syunyo 2021/07/19に更新

だんだんわかってきたので、最初に生成されるプロジェクトを改変していく形で整えていく。

ディレクトリ構成参考

syunyo 2021/06/27

AutoRouter の導入

変更点

# pubspec.yaml
dependencies:
  auto_route: ^2.0.0 

dev_dependencies:
  auto_route_generator: ^2.0.0
  build_runner:

// app/route/route.dart
import 'package:auto_route/auto_route.dart';
import 'package:app/pages/signIn/sign_in_page.dart';

@MaterialAutoRouter(
  replaceInRouteName: 'Page,Route',
  routes: <AutoRoute>[
    AutoRoute(page: SignInPage, initial: true),
  ],
)
class $AppRouter {}

反映

以下を実行。app/route/route.gr.dart にスクリプトが生成される

fvm flutter packages pub run build_runner build

syunyo 2021/06/28に更新

Firebase Hosting 連携

GithubActions は flutter install とキャッシュの箇所を書き直した

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - master
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: setup cache
        uses: actions/cache@v1
        with:
          path: /Users/runner/hostedtoolcache/flutter
          key: ${{ runner.OS }}-flutter-install-cache
      - name: install flutter
        uses: subosito/flutter-action@v1
        with:
          flutter-version: '2.2.2' # .fvm と合わせておく
          channel: 'stable'
      - name: flutter dependencies install
        run: flutter pub get
      - run: flutter build web
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_TITI_FLUTTER }}'
          channelId: live
          projectId: titi-flutter
        env:
          FIREBASE_CLI_PREVIEWS: hostingchannels

syunyo 2021/07/05

Dart のコンストラクタ。結構特殊

特に factory の使い方がクセなので、使い方を覚えておく

syunyo 2021/07/05に更新

テーマ管理

標準のやりかた

dynamic_theme プラグインの使用

wasabeef さんの Riverpod を使ったテーマ管理

難しいことはせず、シンプルに普通に標準で用意されているテーマ管理でいいと思う。

syunyo 2021/07/05に更新

API系

まず非同期処理の記述にクセ
Promise → Future

やはり Dio はまだ Web に対応してなさそう。

http を使う。
https://pub.dev/packages/http

syunyo 2021/07/05

Token 管理

syunyo 2021/07/19

Firebase Auth

syunyo 2021/07/20に更新

Deeplink

メールアプリの起動

syunyo 2021/08/12に更新

RouteGuard

Firebase 認証情報を確認し、認証済みでなければログイン画面に遷移する。

Issue に上がっているのは iOS, Android 想定（直接そのページに遷移できない前提）のものが多い。
Webの場合URLを指定すれば直接そのページに飛べるため、ページにアクセスする度に認証が必要となる。

AutoRoute の AutoRouteGuard を継承すれば実装可能。
Firebase連携では、HotReload と手動のページ更新で挙動が異なるので気をつける。
HotReload では fsAuthStateChange が呼び出されなかったり
手動更新では、user情報の取得に時間がかかり、user が null で読み込まれる場合がある。

以下コードの一部

class AuthGuard extends AutoRouteGuard {
  void _navigateUser(NavigationResolver resolver, StackRouter router) async {
    final userState = getCurrentUserState(router);
    print('AuthGuard navigateUser: $userState');
    switch (userState?.state) {
      case UserAuthState.unAuth:
        // 未認証時はログインページへ
        router.push(LogInRoute(onResult: (user) {
          _navigateUser(resolver, router);
        }));
        break;
      case UserAuthState.unVerifyEmail:
        // メールアドレス認証待ちページへ
        router.push(ConfirmMailRoute(onResult: (user) {
          _navigateUser(resolver, router);
        }));
        break;
      case UserAuthState.verified:
        // 認証済み
        resolver.next(true);
        break;
      case UserAuthState.loading:
        await new Future.delayed(new Duration(seconds: 1));
        _navigateUser(resolver, router);
        break;
      default:
    }
  }

  UserState? getCurrentUserState(StackRouter router) {
    // riverpod の Provider から取得
    final context = router.navigatorKey.currentContext;
    final userState = context!.read(authControllerProvider);
    return userState;
  }

  @override
  void onNavigation(NavigationResolver resolver, StackRouter router) {
    _navigateUser(resolver, router);
  }
}

@MaterialAutoRouter(
  replaceInRouteName: 'Page,Route',
  routes: <AutoRoute>[
    AutoRoute(page: SignUpPage, path: '/signup'),
    AutoRoute(page: LogInPage, path: '/login'),
    AutoRoute(page: ConfirmMailPage, path: '/confirm-mail'),
    AutoRoute(
        page: ChatPage, path: '/chat', guards: [AuthGuard], initial: true),
  ],
)
class $AppRouter {}

syunyo 2021/10/03

Flutter 勉強ログ