Как реализовать оформление заказа / корзины на Flutter с помощью Firestore - PullRequest
Новая
       7

Как реализовать оформление заказа / корзины на Flutter с помощью Firestore

0 голосов
/ 05 января 2019

Я делаю приложение для студенческого совета моей школы. Я использую Cloud Firestore, чтобы вытащить список продуктов, и теперь у меня есть GridView, показывающий сетку карт GestureDetector, которая показывает название продуктов. В моей коллекции есть названия продуктов и цены. Как создать оформление заказа в «тестовом» контейнере, в котором отображается список продуктов и количество, выбранное при касании карт? И затем, когда щелкает FloatingActionButton, количество удаляется из Cloud Firebase и корзина сбрасывается? Я добавил свой код ниже, а также скриншот. Скриншот симулятора 

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()),
            );
            },),
          ],
        ),
      ),
    );
  }
}

Большое спасибо!

...