Flutter购物车页面ListView.builder无法渲染商品数据求助

问题根源 #

1. Provider实例不共享：CartPage中通过ChangeNotifierProvider(create: (context) => CartItems())创建了全新的CartItems实例，和HomePage中维护的购物车实例不是同一个，导致添加的商品数据无法同步到购物车页面。
2. 文字颜色与背景冲突：购物车列表项的背景是黑色，但文字未设置浅色，可能导致商品信息因颜色重叠无法显示。
3. 错误的实例调用：HomePage中print(CartItems().cartItems)创建了新的CartItems实例，无法打印真实的购物车数据。

修复步骤 #

1. 统一Provider实例 #

移除CartPage中的ChangeNotifierProvider，直接使用上层（HomePage）提供的CartItems实例，确保数据共享。

2. 修复文字颜色 #

为购物车列表项的文字设置浅色，避免与黑色背景冲突。

3. 修正实例调用 #

删除HomePage中创建新CartItems实例的错误打印，改为打印当前维护的购物车数据。

修改后的代码 #

CartPage.dart #

import 'package:flutter/material.dart';
import 'package:groceryapp/model/cart_model2.dart';
import 'package:provider/provider.dart';

class CartPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        iconTheme: IconThemeData(
          color: Colors.grey[800],
        ),
      ),
      body: Consumer<CartItems>(
        builder: (context, dataProvider, child) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Padding(
                padding: EdgeInsets.symmetric(horizontal: 24.0),
                child: Text(
                  "Ödeme",
                  style: TextStyle(
                    fontSize: 36,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: ListView.builder(
                    itemCount: dataProvider.cartItems.length,
                    padding: EdgeInsets.all(12),
                    itemBuilder: (context, index) {
                      return Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: Container(
                          decoration: BoxDecoration(
                              color: Colors.black,
                              borderRadius: BorderRadius.circular(8)),
                          child: ListTile(
                            title: Text(
                              dataProvider.cartItems[index]["name"],
                              style: const TextStyle(fontSize: 18, color: Colors.white),
                            ),
                            subtitle: Text(
                              '${dataProvider.cartItems[index]["price"]}₺',
                              style: const TextStyle(fontSize: 12, color: Colors.white70),
                            ),
                            trailing: IconButton(
                              icon: const Icon(Icons.cancel, color: Colors.white),
                              onPressed: () => dataProvider.cartListeSil(index),
                            ),
                          ),
                        ),
                      );
                    },
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(36.0),
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    color: Colors.green,
                  ),
                  padding: const EdgeInsets.all(24),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            'Ödenecek Tutar',
                            style: TextStyle(color: Colors.green[200]),
                          ),
                          const SizedBox(height: 8),
                          Text(
                            '₺${dataProvider.ToplamHesapla()}',
                            style: const TextStyle(
                              fontSize: 18,
                              fontWeight: FontWeight.bold,
                              color: Colors.white,
                            ),
                          ),
                        ],
                      ),
                      TextButton(
                        onPressed: () {
                          Navigator.pushReplacementNamed(context, "/paymentpage");
                        },
                        child: Container(
                          decoration: BoxDecoration(
                            border: Border.all(color: Colors.green.shade200),
                            borderRadius: BorderRadius.circular(28),
                          ),
                          padding: const EdgeInsets.all(12),
                          child: const Row(
                            children: [
                              Text(
                                'Ödeme',
                                style: TextStyle(color: Colors.white),
                              ),
                              Icon(
                                Icons.arrow_forward_ios,
                                size: 16,
                                color: Colors.white,
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              )
            ],
          );
        },
      ),
    );
  }
}

HomePage.dart #

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../components/grocery_item_tile.dart';
import '../components/urun_list.dart';
import '../model/cart_model2.dart';
import 'cart_page.dart';
import 'package:firebase_storage/firebase_storage.dart';

FirebaseStorage storage = FirebaseStorage.instance;
class HomePage extends StatelessWidget {
  HomePage({Key? key}) : super(key: key);
  final _firestore = FirebaseFirestore.instance;
  final CartItems _cartItems = CartItems();

  @override
  Widget build(BuildContext context) {
    CollectionReference damacanaRef = _firestore.collection("damacana");
    return StreamBuilder<QuerySnapshot>(
      stream: damacanaRef.snapshots(),
      builder: (BuildContext contex, AsyncSnapshot asyncSnapshot) {
        if (asyncSnapshot.hasError) {
          return Center(child: Text("Error: ${asyncSnapshot.error}"));
        } else {
          if (asyncSnapshot.hasData) {
            return ChangeNotifierProvider.value(
              value: _cartItems,
              child: Scaffold(
                appBar: AppBar(
                  backgroundColor: Colors.transparent,
                  elevation: 0,
                  leading: Padding(
                    padding: const EdgeInsets.only(left: 24.0),
                    child: Icon(
                      Icons.location_on,
                      color: Colors.grey[700],
                    ),
                  ),
                  title: Text(
                    'Istanbul, Cekmekoy ',
                    style: TextStyle(
                      fontSize: 16,
                      color: Colors.grey[700],
                    ),
                  ),
                  centerTitle: false,
                  actions: [
                    Padding(
                      padding: const EdgeInsets.only(right: 24.0),
                      child: Container(
                        padding: EdgeInsets.all(16),
                        decoration: BoxDecoration(
                          color: Colors.grey[200],
                          borderRadius: BorderRadius.circular(12),
                        ),
                        child: Icon(
                          Icons.person,
                          color: Colors.grey,
                        ),
                      ),
                    ),
                  ],
                ),
                floatingActionButton: FloatingActionButton(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(5)),
                  backgroundColor: Colors.black,
                  onPressed: () => Navigator.pushNamed(context, "/cartpage"),
                  child: const Column(
                    children: [
                      Padding(
                        padding: EdgeInsets.all(8.0),
                        child: Icon(Icons.shopping_bag),
                      ),
                      Text("Sepet")
                    ],
                  ),
                ),
                body: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const SizedBox(height: 48),
                    const Padding(
                      padding: EdgeInsets.symmetric(horizontal: 24.0),
                      child: Text('Merhaba,'),
                    ),
                    const SizedBox(height: 4),
                    const Padding(
                      padding: EdgeInsets.symmetric(horizontal: 24.0),
                      child: Text(
                        "Sizin için ürünlerimiz",
                        style: TextStyle(
                          fontSize: 36,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                    const SizedBox(height: 24),
                    const Padding(
                      padding: EdgeInsets.symmetric(horizontal: 24.0),
                      child: Divider(),
                    ),
                    const SizedBox(height: 24),
                    Row(
                      children: [
                        Padding(
                          padding:
                              const EdgeInsets.only(bottom: 40.0, left: 20),
                          child: Text(
                            "${_firestore.collection("damacana").id}",
                            style: const TextStyle(
                              fontSize: 18,
                            ),
                          ),
                        ),
                        Padding(
                          padding:
                              const EdgeInsets.only(bottom: 40.0, left: 20),
                          child: Text(
                            "${_firestore.collection("PetSu").id}",
                            style: const TextStyle(
                              fontSize: 18,
                            ),
                          ),
                        ),
                        Padding(
                          padding:
                              const EdgeInsets.only(bottom: 40.0, left: 20),
                          child: Text(
                            "${_firestore.collection("Meşrubatlar").id}",
                            style: const TextStyle(
                              fontSize: 18,
                            ),
                          ),
                        ),
                      ],
                    ),
                    Expanded(
                      child: StreamBuilder<QuerySnapshot>(
                        stream: _firestore.collection('damacana').snapshots(),
                        builder: (context, snapshot) {
                          if (asyncSnapshot.hasError) {
                            return Center(
                                child: Text("Hata: ${asyncSnapshot.error}"));
                          } else if (snapshot.hasData) {
                            List<Widget> widgets = [];
                            snapshot.data!.docs.forEach((doc) {
                              String name = doc['name'];
                              String price = doc['price'];
                              String size = doc['size'];

                              widgets.add(urun_info(
                                  name: name,
                                  price: price,
                                  size: size,
                                  onPressed: () {
                                    _cartItems.cartListeEkle({
                                      "name": name,
                                      "price": price,
                                      "size": size,
                                    });
                                    print(_cartItems.cartItems);
                                  }
                              ));
                            });

                            return GridView.count(
                              crossAxisCount: 2,
                              childAspectRatio: 1 / 1.5,
                              children: widgets,
                            );
                          } else {
                            return CircularProgressIndicator();
                          }
                        },
                      ),
                    ),
                  ],
                ),
              ),
            );
          } else {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
        }
      },
    );
  }
}

内容的提问来源于stack exchange，提问作者Serhat GENÇ