ChangeNotifierProvider异步方法调用后Text组件未刷新问题

你在代码中创建了两个完全独立、互不关联的UserLoginProvider实例：

• 第一个是_LoginPageState中手动初始化的实例，按钮点击触发的loginUser逻辑、变量修改、notifyListeners()调用全部作用在这个实例上
• 第二个是ChangeNotifierProvider通过create回调新建的实例，Consumer组件监听的是这个实例，它从来没收到过值变更的通知，自然不会触发Text组件的重绘更新。

另外你把isLoading、http实例写在了Provider类的外部作为顶层变量，会导致多实例场景下状态共享混乱，属于不规范写法。

1. 删除State类中手动实例化的UserLoginProvider对象，全程通过Provider官方提供的方法获取组件树中已注册的Provider实例，不要手动new。
2. 把类外的顶层变量移到UserLoginProvider类内部作为成员变量，避免全局状态污染。
3. 按钮点击回调中，通过Provider.of<UserLoginProvider>(context, listen: false)获取正确的Provider实例再调用登录方法。
4. 如果需要展示请求加载状态，在修改isLoading = true后立刻调用notifyListeners()，保证加载状态同步到UI。

修正后的代码 #

userloginprovider.dart #

class UserLoginProvider with ChangeNotifier {
  // 移入类内部管理
  bool isLoading = false;
  final HttpService http = HttpService();

  String loginMessage = '';
  late UserAuthorizationResponse userRegistrationResponse;

  Future loginUser(userData) async {
    Response response;
    try {
      isLoading = true;
      // 加载状态变更立刻通知UI
      notifyListeners();
      response = await http.loginUser('api/v1/login/', userData);
      isLoading = false;

      if (response.statusCode == 200) {
        var newReponse = response.data;
        userRegistrationResponse =
            UserAuthorizationResponse.fromJson(newReponse['data']);
        loginMessage = newReponse['message'];
      } else {
        print('status code is not 200.');
      }
    } on Exception catch (e) {
      isLoading = false;
      loginMessage = e.toString().substring(11);
    }    
    notifyListeners();
  }
}

userloginscreen.dart #

class _LoginPageState extends State<LoginPage> {
  // 删除手动实例化的UserLoginProvider
  final usernameController = TextEditingController();
  final passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ChangeNotifierProvider(
        create: (context) => UserLoginProvider(),
        child: Consumer<UserLoginProvider>(
          builder: (context, provider, child) {
            return Container(
              padding: const EdgeInsets.all(8.0),
              width: double.infinity,
              height: double.infinity,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(provider.loginMessage),
                  AuthorizationButtons(
                    fieldName: 'Username',
                    textEditingController: usernameController,
                  ),
                  AuthorizationButtons(
                    fieldName: 'Password',
                    textEditingController: passwordController,
                  ),
                  OutlinedButton(
                    onPressed: () {
                      final userData = {
                        'username': usernameController.text,
                        'password': passwordController.text,
                      };
                      // 获取树中注册的正确Provider实例调用方法
                      Provider.of<UserLoginProvider>(context, listen: false).loginUser(userData);
                    },
                    child: const Text('Submit'),
                  )
                ],
              ),
            );
          },
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 补全控制器释放逻辑避免内存泄漏
    usernameController.dispose();
    passwordController.dispose();
    super.dispose();
  }
}

• 使用Provider做状态管理时，不要手动实例化被Provider托管的类，所有实例获取都走Provider.of、Consumer、Selector等官方方法，保证整个子树拿到的是同一个实例。
• 所有需要被Provider监听的状态变量都要写在Provider类内部，不要用顶层全局变量，否则会脱离生命周期管理，出现多页面状态串扰的问题。

内容的提问来源于stack exchange，提问作者coder