Flutter Riverpod技术问题：List类型StateNotifier状态变更时无法通知Consumer重建

Alright, let's break down what's going wrong here and fix it step by step — your issue boils down to three key mistakes in how you're using Riverpod with a StateNotifier and list state.

1. You're using the wrong provider type for your StateNotifier #

Your CounterState is a StateNotifier, but you're creating it with a StateProvider — that's a critical mismatch. StateProvider is designed for simple, standalone state values, while StateNotifier requires a StateNotifierProvider to properly connect it to the Riverpod ecosystem and trigger state change notifications.

2. You're not updating the list state correctly #

Riverpod detects state changes by checking if the reference to the state object has changed. Since lists are mutable, calling state.add(p) modifies the existing list but doesn't change its reference — so Riverpod thinks nothing has changed, and won't rebuild your ConsumerWidget.

The correct way to update list state is to create a new list instance and assign it to state. Your second attempt at the add method was actually correct in theory, but it didn't work because of the provider type mistake.

3. Your widget is watching the wrong thing #

You're currently watching the notifier instead of the state itself. When you do watch(CounterState.provider.notifier).state.length, you're bypassing Riverpod's state change listening mechanism. You should directly watch the provider to get the current state.

Fixed Full Code #

Here's the corrected version of your code that works as expected:

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

void main() {
 runApp(const MyApp());
}

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

 @override
 Widget build(BuildContext context) {
 return ProviderScope(
 child: MaterialApp(
 home: MyHomePage(),
 ),
 );
 }
}

class CounterState extends StateNotifier<List<int>> {
 // Use StateNotifierProvider instead of StateProvider
 static final provider = StateNotifierProvider<CounterState, List<int>>(
 (ref) => CounterState(),
 );

 int get last {
 print('last');
 return state.last;
 }

 int get length {
 print('len');
 return state.length;
 }

 // Correct way to update list state: create a new list instance
 void add(int p) {
 state = [...state, p];
 }

 CounterState() : super(<int>[0]);
}

class MyHomePage extends ConsumerWidget {
 @override
 Widget build(BuildContext context, WidgetRef ref) {
 void _incrementCounter() {
 final _count = Random.secure().nextInt(100);
 // Call the add method on the notifier instead of modifying state directly
 ref.read(CounterState.provider.notifier).add(_count);
 }

 // Watch the provider directly to get the current state
 final count = ref.watch(CounterState.provider).length;
 return Scaffold(
 appBar: AppBar(),
 body: Center(
 child: Text(
 'You have pushed the button this many times: $count',
 ),
 ),
 floatingActionButton: FloatingActionButton(
 onPressed: _incrementCounter,
 child: const Icon(Icons.add),
 ),
 );
 }
}

Why your previous attempts failed: #

• Direct state.add(p): Modified the existing list but didn't change its reference, so Riverpod didn't detect a state change.
• Your second add attempt: The logic (state = [...state, p]) was correct, but since you used StateProvider instead of StateNotifierProvider, Riverpod wasn't set up to listen to state changes from your StateNotifier.
• Your third add attempt: You spent a lot of time copying elements but still ended up modifying the original state list instead of assigning a new instance to state.

内容的提问来源于stack exchange，提问作者Adnan