Combining River pod providers

Question

I'm trying to create a simple riverpod counter app by combining two providers where if the count of one provider changes, the result gets multiplied by the value of the other provider, but I'm getting a compile time error when approaching it the way I have shown in my code. I'm completely new to Riverpod and I'm using flutter riverpod version 2.0.2.

my code:

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final _myCount = StateNotifierProvider((ref) => ItemProvider());
final _myPrice = StateProvider((ref) => 200);

final _priceManager = StateProvider(
  (ref) {
    final myCountProvider = ref.watch(_myCount);
    final myPriceProvider = ref.watch(_myPrice);

   // error
    return (myCountProvider * myPriceProvider);
  },
);

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('RIVERPOD'),
        centerTitle: true,
      ),
      body: Consumer(builder: (context, ref, child) {
        final newCount = ref.watch(_myCount);
        final itemChange = ref.read(_myCount.notifier);
        final multiprovider = ref.watch(_priceManager);
        return Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text("ITEMS: "),
                IconButton(
                    onPressed: () {
                      itemChange.decrement();
                    },
                    icon: const Icon(
                      Icons.arrow_back_ios,
                      size: 12.0,
                    )),
                Text('$newCount'),
                IconButton(
                    onPressed: () {
                      itemChange.increment();
                    },
                    icon: const Icon(
                      Icons.arrow_forward_ios,
                      size: 12.0,
                    )),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text("PRICE: "),
                Text("$multiprovider"),
              ],
            )
          ],
        );
      }),
    );
  }
}

class ItemProvider<int> extends StateNotifier {
  ItemProvider() : super(1);

  void increment() {
    state++;
  }

  void decrement() {
    if (state != 1) {
      state--;
    }
  }
}

The operator '*' can't be unconditionally invoked because the receiver can be 'null'. Try adding a null check to the target ('!'). this appears when i try to use this code( return (myCountProvider * myPriceProvider); ) from the above source code — hughes absalom, Oct 07 '22 at 15:59

score 0 · Answer 1 · answered Oct 07 '22 at 16:40

Your code is mostly good, but you forgot to specify generic types in a bunch of places:

- final _myCount = StateNotifierProvider((ref) => ItemProvider());
+ final _myCount = StateNotifierProvider<ItemProvider, int>((ref) => ItemProvider());

- class ItemProvider<int> extends StateNotifier {
+ class ItemProvider extends StateNotifier<int> {

Combining River pod providers

1 Answers1