如何在 flutter 上为我的电子商务应用添加购物车页面？

Question

我使用 firebase 作为后端。 我使用 stream 构建器从 firebase 检索产品。我查看了提供者，但所有教程也使用了产品页面的提供者。我可以仅将提供者用于购物车吗？我该怎么做？或者有没有其他方法来实现购物车页面？ 这是产品页面的代码。

class Shop extends StatefulWidget {

  final User currentUser;
  final String prodId;
  final String onwerId;
  Shop({ this.currentUser,
    this.prodId,

    this.onwerId});

  @override
  _ShopState createState() => _ShopState( prodId: this.prodId,ownerId:this.onwerId);
}

class _ShopState extends State<Shop> {
 final _firestore = Firestore.instance;
  String postOrientation = "grid";
  String shopOrientation = "grid";
  bool isFollowing = false;
  bool isLoading = false;
  String uid="";
  String prodId;
  String ownerId;
  Prod products;
  _ShopState({
    this.prodId, this.products,this.ownerId,
  });
  
  @override
  Widget build(BuildContext context) {
    return
      Scaffold(
        appBar:  AppBar(backgroundColor: kSecondaryColor,
          title: Text(   'Shop',
            style: TextStyle(
                fontFamily :"MajorMonoDisplay",
                fontSize:  35.0 ,
                color: Colors.white),),
          iconTheme: new IconThemeData(color: kSecondaryColor),
        ),
        backgroundColor: kPrimaryColor,

        body:StreamBuilder(
            stream: Firestore.instance.collectionGroup("userProducts").snapshots(),
            builder: (context, snapshot) {
              if (!snapshot.hasData) {
                return circularProgress();
              } else {
                return new ListView.builder(
                    itemCount: snapshot.data.documents.length,
                    itemBuilder: (context, index) {
                      DocumentSnapshot ds = snapshot.data.documents[index];
                      return new ShopItem(
                        shopmediaUrl: ds['shopmediaUrl'],
                        productname: ds['productname'],
                        price: ds['price'],
                        photoUrl: ds['photoUrl'],
                        username: ds['username'],
                        prodId: ds['prodId'],
                        userId: ds['userId'],
                        ownerId: ds['ownerId'],
                      );
                    }
                );
              }
            }
        ),

        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.black38,
          onPressed: ()
          async{ Navigator.push(context, MaterialPageRoute(builder: (context) =>Uploadecom(currentUser: currentUser, )));
          },
          child: Icon(Icons.add_box),
        ),
      );
  }
}
class ShopItem extends StatelessWidget {
  final String username;
  final String prodId;
  final String ownerId;
  final String photoUrl;
  final String shopmediaUrl;
  final String productname;
  final String price;
  final String userId;

  ShopItem({
    this.ownerId,
    this.prodId,
    this.shopmediaUrl,
    this.username,
    this.photoUrl,
    this.price,
    this.productname,
    this.userId,
  });

  showProduct(context) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => ProductScreen(
          prodId: prodId,
          userId: ownerId,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
//    configureshopmediaPreview(context);
    return
//
      Column( children: <Widget>[
        Stack(
          children: <Widget>[
            Container(
              child:Row(
                children: <Widget>[
                  Expanded(
                    child: Container(
//                                width: 360,
                      height: 400.0,

                      child:AspectRatio(
                        aspectRatio: 16 / 9,
                        child:Container(

                          child: DecoratedBox(
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                  image: NetworkImage(
                                      shopmediaUrl),
                                  fit: BoxFit.cover),
                            ),
                          ),

                        ),
                    ),
                    ),
                  )],

              ),


            ),
            Positioned(
              bottom: 10,
              left: 10,
              child: Container(
                height: 40,
                width: 40,
                child: cachedNetworkImage(photoUrl),
              ),
            ),
            Positioned(
              bottom: 20,
              left: 60,
              child: Container(
                child: Text(username,style: TextStyle(color: Colors.white,fontWeight:FontWeight.bold),),

              ),
            ),


            Container(
              alignment: Alignment.bottomRight,
              child:  Container(
                alignment: Alignment.bottomRight,
                child: GFButton(
                  onPressed: () => showProduct(context) ,
                  text: "More",
                  icon: Icon(Icons.card_travel),
                  shape: GFButtonShape.pills,

                ),
              ),
            ),

          ],

        ),
        Row(
          children: <Widget>[
            Container(
              child: Text(productname,style: TextStyle(color: kText,fontSize: 30.0,fontWeight:FontWeight.bold),),
            ),
          ],
        ),
        Row(
          children: <Widget>[
            Container(  child: Text('₹',style: TextStyle(color: kText,)),
            ),
            Container(
              child: Text(price,style: TextStyle(color: kText,fontSize: 20.0,fontWeight:FontWeight.bold),),
            ),

          ],
        ),
        Divider(color: kGrey,),
      ],

      );

  }
}

Answer 1

是的，您可以仅将供应商（或任何 state 管理解决方案）用于购物车页面，但您必须保留这些购物车产品，以便当用户注销或退出您的应用程序并返回时，他会发现他的购物车产品仍然可用，用于持久化我建议在您的 Firestore 中创建一个购物车集合，并为每个用户创建一个购物车。