firebase - 如何在 flutter 朔迷离的电子商务应用程序中添加购物车页面?

标签 firebase flutter dart google-cloud-firestore

我正在使用Firebase作为后端。我使用流生成器从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,),
      ],

      );

  }
}

最佳答案

是的,您只能将提供程序(或任何状态管理解决方案)用于购物车页面,但您必须保留这些购物车产品,以便当用户注销或退出您的应用并返回时,他会发现他的购物车产品仍然可用我建议在您的Firestore中创建一个购物车集合,并为每个用户创建一个购物车。

关于firebase - 如何在 flutter 朔迷离的电子商务应用程序中添加购物车页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62512833/

相关文章:

Firebase实时数据库查询Flutter中的所有项目

flutter - Flutter的sqflite查询

arrays - 如何在 Dart 中将对象转换为数组(映射)?

flutter - Dart : Index out of range: index should be less than N: N (where N is the size of file in bytes). 如何修复此运行时错误?

testing - 强制流事件传递

ios - Firebase .childAdded 不起作用,因为观察到的 child 可能还不存在

AngularFirestore : Property 'id' does not exist on type 'QueryDocumentSnapshot<any>'

javascript - Firebase 身份验证在重定向时不进行身份验证

flutter - 状态变化时的 Bloc 导航

firebase - 注册Firebase Flutter时更新displayName