如何在 Riverpod 中显示来自 StateNotifier 的小吃店？

Question

I have the following class that is working fine.

class CartRiverpod extends StateNotifier<List<CartItemModel>> {

    CartRiverpod([List<CartItemModel> products]) : super(products ?? []);

        void add(ProductModel addProduct) {
            bool productExists = false;
                for (final product in state) {
                    if (product.id == addProduct.id) {
                        print("not added");
                        productExists = true;
                    }
                    else {
                    }
                 }
        if (productExists==false)
            {
                state = [
                    ...state, new CartItemModel(product: addProduct),
                ];
                print("added");
             }

    }

    void remove(String id) {
      state = state.where((product) => product.id != id).toList();
    }
  }

The code above works perfectly. In my shopping cart, I want to limit the order of products to just 1 unit, that is why I am doing the code above. It works as I expected. The only thing now is that, I'd like to show a snackbar alerting the user that he or she can only order 1 unit of each product.

How do I add a snackbar inside my StateNotifier?

Answer 1

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/all.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
part 'cart_list_page.freezed.dart';

final cartListPageStateNotifierProvider =
    StateNotifierProvider((ref) => CartListPageStateNotifier(ref.read));

final cartListProvider = StateProvider((ref) {
  return <CartListItemModel>[];
}); // this holds the cart list, at initial, its empty

class CartListPage extends StatefulWidget {
  @override
  _CartListPageState createState() => _CartListPageState();
}

class _CartListPageState extends State<CartListPage> {
  final _scaffoldKey = GlobalKey<ScaffoldState>();
  List<CartListItemModel> productsToBeAddedToCart = [
    CartListItemModel(id: 1, name: "Apple"),
    CartListItemModel(id: 2, name: "Tomatoes"),
    CartListItemModel(id: 3, name: "Oranges"),
    CartListItemModel(id: 4, name: "Ginger"),
    CartListItemModel(id: 5, name: "Garlic"),
    CartListItemModel(id: 6, name: "Pine"),
  ];

  @override
  Widget build(BuildContext context) {
    return ProviderListener<CartListState>(
      provider: cartListPageStateNotifierProvider.state,
      onChange: (context, state) {
        return state.maybeWhen(
          loading: () {
            final snackBar = SnackBar(
              duration: Duration(seconds: 2),
              backgroundColor: Colors.yellow,
              content: Text('updating cart....'),
            );
            return _scaffoldKey.currentState.showSnackBar(snackBar);
          },
          success: (info) {
            final snackBar = SnackBar(
              duration: Duration(seconds: 2),
              backgroundColor: Colors.green,
              content: Text('$info'),
            );
            _scaffoldKey.currentState.hideCurrentSnackBar();
            return _scaffoldKey.currentState.showSnackBar(snackBar);
          },
          error: (errMsg) {
            final snackBar = SnackBar(
              duration: Duration(seconds: 2),
              backgroundColor: Colors.red,
              content: Text('$errMsg'),
            );
            _scaffoldKey.currentState.hideCurrentSnackBar();
            return _scaffoldKey.currentState.showSnackBar(snackBar);
          },
          orElse: () => SizedBox.shrink(),
        );
      },
      child: Scaffold(
        key: _scaffoldKey,
        body: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: Column(
            children: [
              SizedBox(height: 40),
              Expanded(
                child: ListView.builder(
                  itemCount: productsToBeAddedToCart.length,
                  itemBuilder: (context, index) {
                    final item = productsToBeAddedToCart[index];
                    return ListTile(
                      title: Text("${item.name}"),
                      leading: CircleAvatar(child: Text("${item.id}")),
                      trailing: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          IconButton(
                            icon: Icon(Icons.add),
                            onPressed: () => context
                                .read(cartListPageStateNotifierProvider)
                                .addProduct(item),
                          ),
                          SizedBox(width: 2),
                          IconButton(
                            icon: Icon(Icons.remove),
                            onPressed: () => context
                                .read(cartListPageStateNotifierProvider)
                                .removeProduct(item),
                          ),
                        ],
                      ),
                    );
                  },
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class CartListPageStateNotifier extends StateNotifier<CartListState> {
  final Reader reader;
  CartListPageStateNotifier(this.reader) : super(CartListState.initial());

  addProduct(CartListItemModel product) async {
    state = CartListState.loading();
    await Future.delayed(Duration(seconds: 1));
    var products = reader(cartListProvider).state;
    if (!products.contains(product)) {
      reader(cartListProvider).state.add(product);
      return state =
          CartListState.success("Added Successfully ${product.name}");
    } else {
      return state = CartListState.error(
          "cannot add more than 1 product of the same kind");
    }
  }

  removeProduct(CartListItemModel product) async {
    state = CartListState.loading();
    await Future.delayed(Duration(seconds: 1));
    var products = reader(cartListProvider).state;
    if (products.isNotEmpty) {
      bool status = reader(cartListProvider).state.remove(product);
      if (status) {
        return state =
            CartListState.success("removed Successfully ${product.name}");
      } else {
        return state;
      }
    }
    return state = CartListState.error("cart is empty");
  }
}

@freezed
abstract class CartListState with _$CartListState {
  const factory CartListState.initial() = _CartListInitial;
  const factory CartListState.loading() = _CartListLoading;
  const factory CartListState.success([String message]) = _CartListSuccess;
  const factory CartListState.error([String message]) = _CartListError;
}

@freezed
abstract class CartListItemModel with _$CartListItemModel {
  factory CartListItemModel({final String name, final int id}) =
      _CartListItemModel;
}

Answer 2

DON'T show snackbar here. You need to listen to the needed value in the widget tree as the follows:

@override
  Widget build(BuildContext context, WidgetRef ref) {
    ref.listen(cartListPageStateNotifierProvider, (value) {
      // show snackbar here...
    });
    ...
  }