使用 Riverpod 處理身份驗證

Question

我正在嘗試獲取 Riverpod，但我遇到了一些問題。

我創建了一個用於登錄用戶的表單，我試圖在用戶登錄時更改主視圖。我的問題是，當我設置更改狀態並導航回應用程序根目錄時，新狀態不會似乎可用。 但是，如果我保存文件或熱重新加載應用程序，則新狀態可用。

我做錯了什么？

我的 main.dart 文件

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:practical_riverpod/features/authenticated/authentication_state.dart';

import 'package:practical_riverpod/features/signup/signup_screen.dart';

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final auth = watch(authProvider).state;

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Text(auth == null ? "not connected" : auth.firstname),
            RaisedButton(
              child: Text("gooooo"),
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => SignupScreen(),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

我有一個包含狀態通知程序的文件：

import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:practical_riverpod/features/models/user_model.dart';

final authProvider = StateNotifierProvider((ref) {
  return AuthNotifier(null);
});

class AuthNotifier extends StateNotifier<UserModel> {
  AuthNotifier(UserModel state) : super(state);

  setCurrentUser(UserModel user) {
    state = user;
  }

  void clearUser() {
    state = null;
  }
}

注冊屏幕

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:practical_riverpod/features/authenticated/authentication_state.dart';
import 'package:practical_riverpod/features/models/user_model.dart';

class SignupScreen extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final _firstnameController =
        useTextEditingController.fromValue(TextEditingValue.empty);

    final _lastname =
        useTextEditingController.fromValue(TextEditingValue.empty);
    final GlobalKey<FormState> _key = GlobalKey<FormState>();

    final auth = context.read(authProvider);

    return Scaffold(
      body: Column(
        children: [
          SizedBox(
            height: 190,
          ),
          Container(
            padding: EdgeInsets.all(20),
            child: Column(
              children: [
                Text("Signup"),
                Form(
                  key: _key,
                  child: Column(
                    children: [
                      TextFormField(
                        decoration: InputDecoration(hintText: "Your email"),
                        controller: _firstnameController,
                        validator: (value) => _firstnameController.text.isEmpty
                            ? "Can't be empty"
                            : null,
                      ),
                      TextFormField(
                        obscureText: true,
                        onSaved: (newValue) => print(newValue),
                        validator: (value) =>
                            _lastname.text.isEmpty ? "Can't be empty" : null,
                        decoration: InputDecoration(
                          hintText: "Password",
                        ),
                        controller: _lastname,
                      ),
                      RaisedButton(
                        child: Text("Create"),
                        onPressed: () {
                          if (_key.currentState.validate()) {
                            auth.setCurrentUser(
                              UserModel(
                                  firstname: _firstnameController.text,
                                  lastname: "_password.text"),
                            );
                            Navigator.of(context).pop();
                          }
                        },
                      )
                    ],
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

最后是我的 userModel：

class UserModel {
  final String firstname;
  final String lastname;

  UserModel({this.firstname, this.lastname});
}

Answer 1

[Riverpod >= 0.14.0]變化：

final auth = watch(authProvider).state;

到：

final auth = watch(authProvider);

[Riverpod < 0.14.0]變化：

final auth = watch(authProvider).state;

到：

final auth = watch(authProvider.state);

我建議在您的 Riverpod ProviderScope 中添加一個記錄器- 在調試此類問題時它真的很有幫助！