Riverpod doesn't rebuild UI

Question

Consumer Widget doesn't rebuild when I input new items on textfields, how can i solve this problem?(I can only see new items when i do hot restart)

This is where i use consumer widget :

    import 'package:flutter/material.dart';
    import 'package:flutter_riverpod/flutter_riverpod.dart';
    import 'package:riverpodtx/providers/txprovider.dart';
    
    final transactionProvider = StateNotifierProvider((ref) => TxState());
    
    class CurrTx extends ConsumerWidget {
      //Current transaction List
      @override
      Widget build(BuildContext context, ScopedReader watch) {
        final txList = watch(transactionProvider.state);
        return Container(
            height: 240,
            margin: EdgeInsets.only(top: 15),
            child: ListView(
              children: txList.map((e) {
                return ListTile(
                  tileColor: Colors.pink,
                  title: Text(e.title),
                  leading: Text(e.price),
                );
              }).toList(),
            ));
      }
    }

This is where i used my submit button to add new items :

    
    class NewTx extends StatelessWidget {
      final TextEditingController titleController = TextEditingController(text: '');
      final TextEditingController priceController = TextEditingController(text: '');
    
      @override
      Widget build(BuildContext context) {
        return Container(
            child:
                Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
          TextField(
            controller: titleController,
            decoration: InputDecoration(labelText: 'Title'),
          ),
          TextField(
            decoration: InputDecoration(labelText: 'Price'),
            controller: priceController,
            keyboardType: TextInputType.number,
          ),
          Container(
              alignment: AlignmentDirectional.bottomEnd,
              child: IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () => context.read(transactionProvider).addTx(
                      Transaction(titleController.text, priceController.text))))
        ]));
      }
    }

This is the StateNotifier :

import 'package:riverpodtx/models/transaction.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class TxState extends StateNotifier<List<Transaction>> {
  TxState([List<Transaction>? _transaction]) : super(_transaction ?? []);
  void addTx(Transaction tx) {
    state.add(tx);
  }
}

Answer 1

For StateNotifier to trigger an update to the state, you have to actually update the state object.

That is, the state must be replaced with something that is not equal to the old value as evaluated by the equality operator ==, to trigger notifications to its listeners.

Instead of using List.add, try creating a new List using the spread operator ... instead:

class TxState extends StateNotifier<List<Transaction>> {
  TxState([List<Transaction>? _transaction]) : super(_transaction ?? []);
  void addTx(Transaction tx) {
    state = [...state, tx];
  }
}