[Flutter]Firebase、 RiverpodでのLogin実装

Flutter2.10にアップデートしたので、

flutter create -t skeleton .

で作られたテンプレートを元にして以前作成したログインサンプルを書き換えてみました。

一番下まで行けばサンプルのリンクがあります。

今回作成したもののpubspec.yamlは

name: flutter_login_sample_20220219
description: A new Flutter project.

# Prevent accidental publishing to pub.dev.
publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ">=2.16.1 <3.0.0"

dependencies:
  firebase_auth: ^3.3.7
  firebase_core: ^1.12.0
  flutter:
    sdk: flutter
  flutter_hooks: ^0.18.2+1
  flutter_localizations:
    sdk: flutter
  freezed_annotation: ^0.14.3
  hooks_riverpod: ^1.0.3

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^1.0.0
  build_runner: ^2.1.2
  freezed: ^0.14.5
  json_serializable: ^5.0.0

flutter:
  uses-material-design: true

  # Enable generation of localized Strings from arb files.
  generate: true

  assets:
    # Add assets from the images directory to the application.
    - assets/images/

以前のもの：利用しているパッケージは以下の通りです。

environment:
 sdk: ">=2.7.0 <3.0.0"
dependencies:
 flutter:
   sdk: flutter

 # The following adds the Cupertino Icons font to your application.
 # Use with the CupertinoIcons class for iOS style icons.
 cupertino_icons: ^0.1.3
 firebase_core: ^0.5.0
 cloud_firestore: ^0.14.1+3
 firebase_auth: ^0.18.0+1
 provider: ^4.1.3
 firebase_storage: ^4.0.0
 flutter_hooks: ^0.14.0
 hooks_riverpod: ^0.11.1
 state_notifier: ^0.6.0
 freezed_annotation: ^0.12.0
 
dev_dependencies:
 flutter_test:
   sdk: flutter
 freezed: ^0.12.1
 build_runner: ^1.10.1

main.dartは以下の通り、ポイントはmain()のProviderScope()、FutureBuilder(future: Firebase.initializeApp())

Firebase.initializeApp()で読み込みが完了したらRootPage()が表示される。

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:xxx/root.dart';
import 'package:xxx/view/error_page.dart';

void main() {
 runApp(
   ProviderScope(
     child: MyApp(),
   ),
 );
}
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return FutureBuilder(
     future: Firebase.initializeApp(),
     builder: (BuildContext context, snapshot) {
       // 取得が完了していないときに表示するWidget
       if (snapshot.connectionState != ConnectionState.done) {
         // インジケーターを回しておきます
         return const CircularProgressIndicator();
       }
       if (snapshot.hasError) {
         return MaterialApp(
           title: 'xxx',
           home: ErrorPage(),
         );
       }
       // データが取得できなかったときに表示するWidget
       if (!snapshot.hasData) {
         return Text('データが見つかりません');
       }
       // Once complete, show your application
       return MaterialApp(
         title: 'xxx',
         home: RootPage(),
       );
     },
   );
 }
}

root.dartは以下の通り、 ポイントはuseEffect((){},[]);