Firebase 仅在热重新加载后显示结果的颤振提供程序

我是一个初学者，我正在使用提供商按照教程构建一个应用程序。其逻辑是，当您单击“类别”小部件时，它将引导您进入一个包含该类别产品的页面。除了我必须首先刷新代码以显示结果外，逻辑工作正常。坦率地说，我不知道我做错了什么

在主页中，使用listview生成器呈现Categories小部件

Container(
                height: 75,
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: categoryProvider.categories.length,
                  itemBuilder: (context, index) {
                    return GestureDetector(
                      onTap: () async {
                        await productProvider.loadProductsByCategory(
                            categoryName:
                                categoryProvider.categories[index].name);
                        changeScreen(
                            context,
                            CategoryScreen(
                                categoryModel:
                                    categoryProvider.categories[index]));
                      },
                      child: CategoriesWidget(
                          category: categoryProvider.categories[index]),
                    );
                  },
                ),
              )

主飞镖 我正在听这样的节目

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MultiProvider(
      providers: [
        ChangeNotifierProvider.value(value: AppProvider()),
        ChangeNotifierProvider.value(value: UserProvider.initialize()),
        ChangeNotifierProvider.value(value: CategoryProvider.initialize()),
        ChangeNotifierProvider.value(value: MarketProvider.initialize()),
        ChangeNotifierProvider.value(value: ProductProvider.initialize()),
      ],
      child: MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Akatale',
          theme: ThemeData(
            primaryColor: Colors.black,
          ),
          home: ScreenController())));
}

class ScreenController extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final auth = Provider.of<UserProvider>(context);

    switch (auth.status) {
      case Status.Uninitialized:
        return Loading();
      case Status.UnAuthenticated:
      case Status.Authenticating:
        return SignInScreen();
      case Status.Authenticated:
        return MainScreen();
      default:
        return SignInScreen();
    }
  }
}

void main（）{
WidgetsFlutterBinding.ensureInitialized（）；
runApp（多供应商）(
供应商：[
ChangeNotifierProvider.value（值：AppProvider（）），
ChangeNotifierProvider.value（值：UserProvider.initialize（）），
ChangeNotifierProvider.value（值：CategoryProvider.initialize（）），
ChangeNotifierProvider.value（值：MarketProvider.initialize（）），
ChangeNotifierProvider.value（值：ProductProvider.initialize（）），
],
孩子：MaterialApp(
debugShowCheckedModeBanner:false，
标题:"阿卡塔雷",，
主题：主题数据(
原色：颜色。黑色，
),
主页：ScreenController（））；
}
类ScreenController扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
最终认证=提供者（上下文）；
交换机（身份验证状态）{
案例状态。未初始化：
返回加载（）；
案例状态。未经验证：
案例状态。验证：
返回符号屏幕（）；
案例状态。已验证：
返回主屏幕（）；
违约：
返回符号屏幕（）；
}
}
}

产品服务 这样，我就可以按类别的名称从firestore获取产品，并将它们添加到列表中

class ProductService extends ChangeNotifier {
  String collection = "products";
  Firestore _firestore = Firestore.instance;


  Future<List<ProductModel>> getProductsByCategory({String category}) async {
    List<ProductModel> products = [];
    _firestore
        .collection(collection)
        .where("category", isEqualTo: category)
        .getDocuments()
        .then((result) {
      for (DocumentSnapshot product in result.documents) {
        products.add(ProductModel.fromSnapshot(product));
      }
    });
    return products;
  }
}

class ProductService扩展了ChangeNotifier{
String collection=“products”；
Firestore _Firestore=Firestore.instance；
未来的getProductsByCategory（{String category}）异步{
列出产品=[]；
_火库
.收集（收集）
.其中（“类别”，isEqualTo:category）
.getDocuments（）
.然后（（结果）{
for（DocumentSnapshot结果文件中的产品）{
products.add（ProductModel.fromSnapshot（product））；
}
});
退货产品；
}
}

产品供应商 在这里，我有在小部件中调用的公共方法

class ProductProvider with ChangeNotifier {
  ProductService _productService = ProductService();
  List<ProductModel> products = [];
  List<ProductModel> productsByCategory = [];


  ProductProvider.initialize() {
    _loadProducts();
   
  }

  //Private method Load products to List
  Future _loadProducts() async {
    products = await _productService.getProducts();
    notifyListeners();
  }

  //public method to Load products to List by category
  Future loadProductsByCategory({String categoryName}) async {

    productsByCategory =
        await _productService.getProductsByCategory(category: categoryName);

    notifyListeners();
  }
}

使用ChangeNotifier类ProductProvider{
ProductService_ProductService=ProductService（）；
列出产品=[]；
列出产品类别=[]；
ProductProvider.initialize（）{
_loadProducts（）；
}
//私有方法加载要列出的产品
Future\u loadProducts（）异步{
products=wait_productService.getProducts（）；
notifyListeners（）；
}
//按类别将产品加载到列表的公共方法
Future loadProductsByCategory（{String categoryName}）异步{
产品分类=
wait_productService.getProductsByCategory（类别：categoryName）；
notifyListeners（）；
}
}

类别页面 这是根据所选类别呈现产品的地方

class CategoryScreen extends StatelessWidget {
  final CategoryModel categoryModel;

  const CategoryScreen({Key key, this.categoryModel}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final productProvider = Provider.of<ProductProvider>(context);
    return Scaffold(
      body: SafeArea(
          child: ListView(
        children: [
          Text(categoryModel.name),
          Column(
            children: productProvider.productsByCategory.map((item) {
              return GestureDetector(
                  onTap: () {
                    //Load details page
                  },
                  child: ProductWidget(
                    product: item,
                  ));
            }).toList(),
          ),
        ],
      )),
    );
  }
}

class CategoryScreen扩展了无状态小部件{
最终分类模型分类模型；
const CategoryScreen（{Key-Key，this.categoryModel}）：super（Key:Key）；
@凌驾
小部件构建（构建上下文）{
final productProvider=Provider.of（上下文）；
返回脚手架(
正文：安全区(
子：ListView(
儿童：[
文本（categoryModel.name），
纵队(
子项：productProvider.productsByCategory.map（（项）{
返回手势检测器(
onTap:（）{
//加载详细信息页面
},
子：ProductWidget(
产品:第，
));
}).toList（），
),
],
)),
);
}
}

将显示一个空白页

但在进行热重新加载时，产品会出现

---

在

getProductsByCategory

中，在

ProductsService

中，您没有等待

getDocuments

。 因此，虽然文档将被加载，但在实际加载它们之前，它已经在模型中调用了notifyListeners。 因此，当您使用热重新加载进行重建时，它们会显示出来

---

要解决此问题，只需等待服务中的getDocuments

纠正我的错误，但通过浏览您的代码，我没有发现一个小部件正在侦听ProductProvider您是对的。如果我认为你的意思是什么，我已经编辑了这个问题来补充这一点。我在main.dart文件中这样做