Help with riverpod.

[Parixit2411]

Hello! I am facing an issue with Riverpod in one of my projects. To simplify debugging, I created a smaller project to replicate the problem, but the issue persists.

I have two screens:

• Screen 1: The user can enter their name and click a button to navigate to Screen 2.
• Screen 2: It greets the user with Hello, $username.

The problem is that I cannot retrieve the username in Screen 2. I have added the relevant code below.

Screen1:

class Screen1 extends ConsumerWidget {
  const Screen1({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    TextEditingController nameController = TextEditingController();
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blueGrey,
        title: const Text('Screen 1'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextField(
            controller: nameController,
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Enter your name',
            ),
          ),
          ElevatedButton(
            onPressed: () {
              ref
                  .read(usernameProvider.notifier)
                  .setUsername(nameController.text);
              //print(ref.watch(usernameProvider));
              Navigator.push(context, MaterialPageRoute(builder: (context) {
                return const Screen2();
              }));
            },
            child: const Text('Go to Screen 2'),
          ),
        ],
      ),
    );
  }
}

Screen2:

class Screen2 extends ConsumerWidget {
  const Screen2({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final username = ref.watch(usernameProvider);
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blueGrey,
          title: const Text('Screen 2'),
        ),
        body: Center(
          child: Text(
            'Hello, $username',
            style: const TextStyle(fontSize: 24),
          ),
        ));
  }
}

Notifier:

import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'username.g.dart';

@riverpod
class Username extends _$Username {
  @override
  String? build() {
    print(':::: BUILD ::::: $state');
    return null;
  }

  void setUsername(String username) {
    print('::: PARAMETER ::::: $username');
    state = username;
    print(':::: STATE ::::: $state');
  }
}

I am getting "StateError (Bad state: Tried to read the state of an uninitialized provider)" error where I am calling ref.watch in screen2. When I enable the watch comment in screen1 everything is working fine.