Question

我正在为我学校的学生会开发一个应用程序。我正在使用Cloud Firestore拉出产品列表，现在有一个GridView显示一个GestureDetector卡网格，其中显示了产品名称。在我的收藏中，我有产品名称和价格。如何在“测试”容器中创建结帐，该结帐显示轻敲卡片时选择的产品和数量的列表？然后，当单击FloatingActionButton时，是否从Cloud Firebase中删除了数量并重置了购物车？我在下面添加了我的代码以及屏幕截图。 Simulator Screenshot

import 'package:flutter/material.dart';
import 'package:stuco2/ui/stock.dart';
import'package:cloud_firestore/cloud_firestore.dart';



class Checkout extends StatefulWidget {
  @override
  _CheckoutState createState() => _CheckoutState();
}

Widget _buildGridItem (BuildContext context, DocumentSnapshot document){
  return GestureDetector(
    child: Card(
      elevation: 5.0,
      child: new Container(
        alignment: Alignment.center,
        child: Text(document['name']),
      ),
    )
  );
}

class _CheckoutState extends State<Checkout> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(

      body: Column(
        children: <Widget>[
          Flexible(
          child: StreamBuilder(
            stream: Firestore.instance.collection('products').snapshots(),
            builder: (context, snapshot) {
              if (!snapshot.hasData) return const Text("Loading....");
              return  GridView.builder(
                  itemCount: snapshot.data.documents.length,
                  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
                  itemBuilder: (context, index) => _buildGridItem(context, snapshot.data.documents[index])
              );
          }
          )
        ),
          Container(
            padding: EdgeInsets.all(8.0),
            alignment: Alignment.bottomCenter,
            color: Colors.blueGrey,
            child: Text('test'),
          )
      ]
      ),
      floatingActionButtonLocation:
      FloatingActionButtonLocation.endDocked,
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.payment), onPressed: () {},),
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        notchMargin: 4.0,
        child: new Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            IconButton(icon: Icon(Icons.cancel), onPressed: () {},),
            IconButton(icon: Icon(Icons.developer_board), onPressed: () {Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => Stock()),
            );
            },),
          ],
        ),
      ),
    );
  }
}

非常感谢！

如何使用Firestore在Flutter上实施结帐/购物篮

0 个答案: