如何使用提供程序包重新加载无状态类的小部件树答案

【问题标题】：How to use provider package to reload a widget tree of a stateless class如何使用提供程序包重新加载无状态类的小部件树
【发布时间】：2022-11-02 12:59:34
【问题描述】：

这是从互联网获取数据的逻辑，加载未完成时显示progressbar小部件，加载完成时显示带有文本字段、图片等的完整小部件树

首先在mainscreen 我检查数据是否从firebase下载

Future<void> getCurrentDriverInfo() async {
    // doublenotification++;
    currentFirebaseUser = FirebaseAuth.instance.currentUser!;
    await driversRef
        .child(currentFirebaseUser!.uid)
        .once()
        .then((DatabaseEvent databaseEvent) {
      if (databaseEvent.snapshot.value != null) {
        driversInformation = Drivers.fromSnapshot(databaseEvent.snapshot);
      }
    });
    ScaffoldMessenger.of(context)
        .showSnackBar(SnackBar(content: Text("Driver detail downloaded")));
    Provider.of<AppData>(context, listen: false).getDriverDetailsDownload(true);
  }

这是提供者类

class AppData extends ChangeNotifier {
  bool driverDetaildownloaded = false;
  void getDriverDetailsDownload(bool driverDetaildownload) {
    driverDetaildownloaded = driverDetaildownload;
    print("Driverdownload" + driverDetaildownload.toString());
    notifyListeners();
  }

现在在这个案例中，我想检查数据是否没有下载然后只显示进度条，当数据下载时关闭进度条并显示小部件树

class ProfileTabPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black87,
      body: SafeArea(
        child: Provider.of<AppData>(context, listen: false)
                .driverDetaildownloaded
            ? Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                 
                  Text(
                    driversInformation!.name!,
                    style: TextStyle(
                      fontSize: 65.0,
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontFamily: 'Signatra',
                    ),
                  ),
                ]
              )
            : Center(child: CircularProgressIndicator()),
      ),
    );
  }
}

但是 CircularProgressIndicator() 不会关闭并加载小部件。怎么了？

【问题讨论】：

标签： flutter dart provider

【解决方案1】：

在你的用户界面中：你必须设置听真，

body: SafeArea(
        child: Provider.of<AppData>(context, listen: true)
                .driverDetaildownloaded
        .....

另一种选择：使用消费者

body: SafeArea(
        child: Consumer<AppData>(
     builder:(context,state,child) {
    return state.isDownloaded  
        ? your widget
        : CircularProgressIndicator(); 
    }
    )

【讨论】：

不行，在下载之前我无法将其设置为 true，因为它给出了一个空错误 Provider.of<AppData>(context, listen: false).getDriverDetailsDownload(true); 这就是我使用 progressbar 的原因。等待从 firebase 下载数据。然后将布尔值设置为true，当我将其设置为true时，进度条将关闭并显示小部件
更新了我的答案。我在想，isdownloaded 是加载状态。实际上，你必须倾听变化，更新你的 UI
信不信由你，我几分钟前刚刚写了同样的代码。
不过，我会接受你的回答。

【解决方案2】：

class ProfileTabPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black87,
      body: SafeArea(
          child: Consumer<AppData>(
        builder: (context, value, child) => value.driverDetaildownloaded == true
            ? Column(  )
            : Center(child: CircularProgressIndicator()),
      )),
    );
  }
}

【讨论】：