Как мне добавить счетчик, который показывает, сколько товаров каждого из них добавлено в корзину в flutter

#flutter #dart

#flutter #dart

Вопрос:

Основной класс

Я хочу добавить счетчик, который подсчитывает, сколько товаров было добавлено в корзину для одного товара. Мой текущий код принимает общее количество товаров в корзине и выводит его на лист списка каждого товара в корзине, который не является тем, что я хочу.

 import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'cart.dart';
import 'dish_object.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        backgroundColor: Colors.redAccent,
      ),
      home: MyHomePage(title: 'The Wing Republic'),
    );
  }
}
 

Класс домашней страницы

 class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Dish> _dishes = List<Dish>();

  List<Dish> _cartList = List<Dish>();

  @override
  void initState() {
    super.initState();
    _populateDishes();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: <Widget>[
          Padding(
            padding: const EdgeInsets.only(right: 16.0, top: 8.0),
            child: GestureDetector(
              child: Stack(
                alignment: Alignment.topCenter,
                children: <Widget>[
                  Icon(
                    Icons.shopping_basket,
                    size: 35.0,
                  ),
                  if (_cartList.length > 0)
                    Padding(
                      padding: const EdgeInsets.only(left: 2.0),
                      child: CircleAvatar(
                        radius: 8.0,
                        backgroundColor: Colors.red,
                        foregroundColor: Colors.white,
                        child: Text(
                          _cartList.length.toString(),
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 12.0,
                          ),
                        ),
                      ),
                    ),
                ],
              ),
              onTap: () {
                if (_cartList.isNotEmpty)
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => Cart(_cartList),
                    ),
                  );

                setState(() {
                  if (_cartList.isEmpty) {
                    Fluttertoast.showToast(
                        msg: "Cart Empty, Add items to Cart",
                        toastLength: Toast.LENGTH_LONG,
                        gravity: ToastGravity.BOTTOM,
                        timeInSecForIosWeb: 1,
                        backgroundColor: Colors.red,
                        textColor: Colors.white,
                        fontSize: 16.0);
                  }
                });
              },
            ),
          )
        ],
      ),
      body: _buildGridView(),
    );
  }
 

Класс BuildListView

 ListView _buildListView() {
    return ListView.builder(
      itemCount: _dishes.length,
      itemBuilder: (context, index) {
        var item = _dishes[index];
        return Padding(
          padding: const EdgeInsets.symmetric(
            horizontal: 8.0,
            vertical: 2.0,
          ),
          child: Card(
            elevation: 4.0,
            child: ListTile(
              leading: Text(item.category),
              /*Icon(
                item.icon,
                color: item.color,
              ),*/
              title: Text(item.brandName),
              subtitle: Text(item.price.toString()),
              trailing: GestureDetector(
                child: (!_cartList.contains(item))
                    ? Icon(
                        Icons.add_circle,
                        color: Colors.green,
                      )
                    : Icon(
                        Icons.remove_circle,
                        color: Colors.red,
                      ),
                onTap: () {
                  setState(() {
                    if (!_cartList.contains(item))
                      _cartList.add(item);
                    else
                      _cartList.remove(item);
                  });
                },
              ),
            ),
          ),
        );
      },
    );
  }
 

GridView class

 GridView _buildGridView() {
    return GridView.builder(
        padding: const EdgeInsets.all(4.0),
        gridDelegate:
            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
        itemCount: _dishes.length,
        itemBuilder: (context, index) {
          var item = _dishes[index];
          return Card(
              elevation: 4.0,
              child: Stack(
                fit: StackFit.loose,
                alignment: Alignment.center,
                children: <Widget>[
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      /*Icon(
                        item.icon,
                        color: (_cartList.contains(item))
                            ? Colors.grey
                            : item.color,
                        size: 100.0,
                      ),*/
                      Text(item.category),
                      Text(
                        item.brandName,
                        textAlign: TextAlign.center,
                        style: Theme.of(context).textTheme.subhead,
                      ),
                      Text(
                        "R"   item.price.toString(),
                        textAlign: TextAlign.right,
                      )
                    ],
                  ),
                  Padding(
                    padding: const EdgeInsets.only(
                      right: 8.0,
                      bottom: 8.0,
                    ),
                    child: Align(
                      alignment: Alignment.bottomRight,
                      child: GestureDetector(
                        child: (!_cartList.contains(item))
                            ? Icon(
                                Icons.add_circle,
                                color: Colors.green,
                              )
                            : Icon(
                                Icons.remove_circle,
                                color: Colors.red,
                              ),
                        onTap: () {
                          setState(() {
                            if (!_cartList.contains(item))
                              _cartList.add(item);
                            else
                              _cartList.remove(item);
                          });
                        },
                      ),
                    ),
                  ),
                ],
              ));
        });
  }
 

Класс PopulateDishes для моего списка

 void _populateDishes() {
    var list = <Dish>[
      Dish(
        category: 'Gin Cocktails',
        brandName: "Clover Club",
        price: 65,
      ),
      Dish(
        category: 'WHISK(e)Y COCKTAILS',
        brandName: 'Select Reserve',
        price: 40,
      ),
      Dish(
        category: 'COGNAC/BRANDY COCKTAILS',
        brandName: 'Side Car',
        price: 110,
      ),
      Dish(
        category: 'RUM COCKTAILS',
        brandName: 'Mojito',
        price: 60,
      ),
      Dish(
        category: 'TEQUILLA COCKTAILS',
        brandName: "Margarita",
        price: 65,
      ),
      Dish(
        category: 'VODKA COCKTAILS',
        brandName: 'Cosmopolitan',
        price: 80,
      ),
      Dish(
        category: 'MOCKTAILS',
        brandName: 'Pina Colada ',
        price: 45,
      )
    ];

    setState(() {
      _dishes = list;
    });
  }
}
 

класс корзины

 import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'dish_object.dart';

class Cart extends StatefulWidget {
  final List<Dish> _cart;
  Cart(this._cart);

  @override
  _CartState createState() => _CartState(this._cart);
}

class _CartState extends State<Cart> {
  _CartState(this._cart);

  List<Dish> _cart;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cart'),
        actions: <Widget>[
          IconButton(
              icon: Icon(Icons.send_rounded),
              onPressed: () {
                if (_cart.isNotEmpty) {
                  setState(() {
                    Fluttertoast.showToast(
                        msg: "Order Confirmed",
                        toastLength: Toast.LENGTH_LONG,
                        gravity: ToastGravity.BOTTOM,
                        timeInSecForIosWeb: 1,
                        backgroundColor: Colors.grey,
                        textColor: Colors.white,
                        fontSize: 16.0);
                  });
                }
                if (_cart.isEmpty) {
                  setState(() {
                    Fluttertoast.showToast(
                        msg: "Cart Empty",
                        toastLength: Toast.LENGTH_LONG,
                        gravity: ToastGravity.BOTTOM,
                        timeInSecForIosWeb: 1,
                        backgroundColor: Colors.red,
                        textColor: Colors.white,
                        fontSize: 16.0);
                  });
                }
              }),
          if (_cart.length > 0)
            Padding(
              padding: const EdgeInsets.only(left: 0.0),
              child: CircleAvatar(
                radius: 8.0,
                backgroundColor: Colors.red,
                foregroundColor: Colors.white,
                child: Text(
                  _cart.length.toString(),
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 12.0,
                  ),
                ),
              ),
            ),
        ],
      ),
      body: ListView.builder(
        itemCount: _cart.length,
        itemBuilder: (context, index) {
          var item = _cart[index];
          return Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 2.0),
            child: Card(
              elevation: 4.0,
              child: ListTile(
                leading: Text(item.brandName  
                    "n"  
                    item.category  
                    "n"  
                    "R"  
                    item.price.toString()),
                title: Text(_cart.length.toString()),
                subtitle:GestureDetector(
                  child: Icon(
                    Icons.add,
                    color: Colors.green,
                  ),
                  onTap: () {

                    setState(() {

                      _cart.add(item);
                    });
                  },
                )
                ,
                trailing: GestureDetector(
                    child: Icon(
                      Icons.remove_circle,
                      color: Colors.red,
                    ),
                    onTap: () {
                      setState(() {
                        _cart.remove(item);
                      });
                    }),
                isThreeLine: true,
              ),
            ),
          );
        },
      ),
    );
  }
}
 

Комментарии:

1. эй, если ваш код сработал, напишите ответ здесь

Ответ №1:

В настоящее время, в соответствии с вашей программой, в вашей корзине может быть только один товар любого блюда. Если вам нужно несколько количеств одного и того же товара, вам также придется изменить эту логику:

 if (!_cartList.contains(item))
  _cartList.add(item);
else 
  _cartList.remove(item);
 

И поддерживайте карту типа map<Блюдо, количество>. Нажав на кнопку добавить, проверьте, существует ли блюдо уже на карте. Если существует, добавьте количество, иначе поместите это блюдо на карту с начальным количеством, равным 1. И аналогичная логика для удаления из корзины.
Наконец, чтобы отобразить общее количество товаров в корзине, перейдите по этой карте и продолжайте добавлять количество каждого блюда.

Комментарии:

1. Я потерялся в соответствии с вашим ответом

2. Что вас смущает?

3. Куда мне поместить карту <Блюдо, количество>

4. Вместо List<Блюдо> _cart, используйте map<Блюдо, int>

Ответ №2:

Вы можете создать класс CartItem, который содержит блюдо и счетчик, вместо того, чтобы добавлять блюдо непосредственно в корзину, вы создаете новый CartItem и передаете блюдо в качестве аргумента, затем внутри корзины вы проверяете, существует ли товар уже, если это так, вы увеличиваете счетчик.

Комментарии:

1. позвольте мне попробовать это

2. здравствуйте, но как обновить счетчик