Flutter flatter-Cubit加载状态管理重定向到页面-生成页面的2个版本

对不起，我是法国人

我在flatter（dart）中开发，当我想在表单提交（使用“反应表单”包，但也使用经典表单）和Cubit加载状态步骤后重定向到页面时，我在使用Cubit（Bloc）的代码中体验到一种奇怪的行为：我看到对页面的两次调用（两次构建），这会产生某种“扑动”效果，这意味着最终用户看到界面充电两次

这是我在颤振中的第一次应用

我创建了一个包含登录表单的应用程序：提交表单时，我打印另一个表单

在我的应用程序开始时，我正在使用“auto_route”包，每次登录过程后单击文本字段时，我都会刷新页面。因此，我无法在文本字段中写入任何内容

我认为问题来自“被动表单”包，因此我向该包的github存储库打开了一个问题：

但是，由于我没有看到问题出在哪里，我又回到了我的应用程序的更基本的开发，以及管理页面路由的更基本的方法，以便向“反应式表单”包的维护人员解释我的问题，这是一个非常好的人，他真的试图帮助我

但即使是维护人员也不明白我为什么会有这个问题

现在，我将更简单的代码缩减为一页

目前，当我在文本字段中单击时，我没有问题，但我看到界面构建了两次，并且Cubit加载状态可能解释了我最初出现问题的原因

所以现在我试图理解为什么在调试我的原始代码之前要构建两次接口

我认为我的主要问题是Cubit加载状态正在等待同步小部件返回，但当我尝试重定向到另一个页面时，它需要一个异步操作（使用“auto_route”包或更简单地使用“Navigator.push（）”操作）

但我不知道如何在一个Cubit加载状态中调用未来，它等待一个经典的小部件

我试过这个：

小部件myAuthBuildLoaded（上下文）{
Timer.run（）{
推送（上下文，MaterialPage路由（生成器：（上下文）=>主页（1））；
});
返回容器（）；
}

因此，我认为返回的小部件“return Container（）”一次构建接口，而Navigator.push（）一次构建接口。 我试图直接返回“Navigator.push”，但我有一个错误（因为它不是一个小部件）

对于这个问题，我真的非常感谢你的帮助。 谢谢

这是我的完整代码（更简单的版本）

我的pubspec.yaml文件：

name: myapi
description: MyApi mobile application
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1
environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  bloc: ^7.0.0
  flutter_bloc: ^7.0.0
  reactive_forms: ^10.0.3

dependency_overrides:

dev_dependencies:

flutter:
  generate: true
  uses-material-design: true
  assets:
    - assets/images/

名称：myapi
说明：MyApi移动应用程序
发布到：“无”#如果要发布到pub.dev，请删除此行
版本：1.0.0+1
环境：
sdk:“>=2.12.0我相信我已经解决了您的问题。这个问题存在于您的
BlocConsumer
小部件中

每当
AuthCubit
的状态更改时，
BlocConsumer
小部件的
builder
方法会被多次调用。这将导致
myAuthBuildLoaded（）
推两次页面。这就是导致闪烁效果的原因。要避免这种情况，请参阅下面的示例。
BlocConsumer
小部件的
侦听器
方法在每次状态更改时只调用一次。这应该可以解决您的问题


衬衫消费者(
侦听器：（上下文、状态）{
如果（状态为AuthError）{
myAuthBuildError（上下文，state.message）；
} //
//把这个加在这里。
else if（状态为AuthLoaded）{
myAuthBuildLoaded（上下文）；
}
},
生成器：（上下文、状态）{
如果（状态为AuthInitial）{
返回myAuthBuildInitial（上下文）；
} // 
else if（状态为AuthLoading）{
返回myAuthBuildLoading（上下文）；
} //
//把这个移到这里。
//else if（状态为AuthLoaded）{
//返回myAuthBuildLoaded（上下文）；
//} //
否则{
//如果出现错误，我们在这里调用初始小部件并处理
//上述侦听器出错
返回myAuthBuildInitial（上下文）；
}
},
),

我不确定这是否是您试图解决的问题。请告诉我是否可以在其他方面提供帮助！
即使我在已连接页面中用文本小部件替换表单，我也会遇到问题。在调试控制台中，我看到：2[log]在我替换的“ConnectedFirstPage”类中生成ConnectedFirstPagechild:ReactiveFormBuilder…“by:child:Text（“已连接”，style:TextStyle（fontwweight:fontwweight.bold，color:Colors.red）），是的！！！这就是解决方案！你救了我的命！：-）
[✓] Flutter (Channel stable, 2.0.6, on macOS 11.2.1 20D74 darwin-arm, locale fr-FR)
    • Flutter version 2.0.6 at /opt/homebrew/Caskroom/flutter/1.22.6/flutter
    • Framework revision 1d9032c7e1 (4 weeks ago), 2021-04-29 17:37:58 -0700
    • Engine revision 05e680e202
    • Dart version 2.12.3

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/mycompany/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      I believe that I have solved your problem. This problem lies within your 
BlocConsumer
 widget.

The 
builder
 method of the 
BlocConsumer
 widget is called multiple times whenever the state of your 
AuthCubit
 changes. This results in 
myAuthBuildLoaded()
 pushing the page twice. That is what is causing the flickering effect. To avoid this, see the example below. The 
listener
 method of the 
BlocConsumer
 widget is only called once on every state change. That should revolve your problem.


BlocConsumer<AuthCubit,AuthState>(
  listener: (context, state) {
    if (state is AuthError) {
      myAuthBuildError(context, state.message);
    } //
    // Add this here.
    else if (state is AuthLoaded) {
      myAuthBuildLoaded(context);
    }
  },
  builder: (context, state) {
    if (state is AuthInitial) {
      return myAuthBuildInitial(context);
    } // 
    else if (state is AuthLoading) {
      return myAuthBuildLoading(context);
    } //
    // Remove this here.
    // else if (state is AuthLoaded) {
    //  return myAuthBuildLoaded(context);
    //} //
    else {
      // In case of error we call the initial widget here and we handle the
      // error with the above listener
      return myAuthBuildInitial(context);
    }
  },
),