Proper Riverpod Provider for Wrapping TextEditingController

[gawasa29]

I have a scenario where I need to wrap TextEditingController() with a Riverpod provider.
I have tested different providers; ChangeNotifierProvider works correctly.

I think the reason is that TextEditingController() inherits from ChangeNotifier.

Inheritance:
Object -> ChangeNotifier -> ValueNotifier<TextEditingValue> -> TextEditingController

However, Riverpod does not recommend the use of ChangeNotifierProvider. Given this, what is the correct Riverpod provider to use with TextEditingController?

Below is the sample code I am working with:

final textFieldControllerProvider = Provider<TextEditingController>(
  (ref) => TextEditingController(),
);

final textFieldControllerStateProvider = StateProvider<TextEditingController>(
  (ref) => TextEditingController(),
);

final textFieldControllerFutureProvider = FutureProvider<TextEditingController>(
  (ref) => TextEditingController(),
);

final textFieldControllerStreamProvider = StreamProvider<TextEditingController>(
  (ref) => Stream.value(TextEditingController()),
);
final textFieldControllerStateNotifierProvider =
    StateNotifierProvider<TextFieldController, TextEditingController>(
        (ref) => TextFieldController());

final textFieldControllerChangeNotifierProvider =
    ChangeNotifierProvider<TextEditingController>(
  (ref) => TextEditingController(),
);

class TextFieldController extends StateNotifier<TextEditingController> {
  TextFieldController() : super(TextEditingController());
}




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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    print('#build MyWidget');
    final controllerProvider = ref.watch(textFieldControllerProvider);
    final controllerStateProvider = ref.watch(textFieldControllerStateProvider);
    final controllerFutureProvider =
        ref.watch(textFieldControllerFutureProvider);
    final controllerStreamProvider =
        ref.watch(textFieldControllerStreamProvider);
    final textFieldControllerStateNotifier =
        ref.watch(textFieldControllerStateNotifierProvider);
    final controllerChangeNotifierProvider =
        ref.watch(textFieldControllerChangeNotifierProvider);
    return Scaffold(
      appBar: AppBar(
        title: const Text("Riverpod example"),
      ),
      body: Column(
        children: [
          const Text('Provider'),
          TextFormField(
            controller: controllerProvider,
          ),
          Text(controllerProvider.text),
          const Text('StateProvider'),
          TextFormField(
            controller: controllerStateProvider,
          ),
          Text(controllerStateProvider.text),
          const Text('FutureProvider'),
          TextFormField(
            controller: controllerFutureProvider.value,
          ),
          Text(controllerFutureProvider.value?.text ?? ''),
          const Text('StreamProvider'),
          TextFormField(
            controller: controllerStreamProvider.value,
          ),
          Text(controllerStreamProvider.value?.text ?? ''),
          const Text('StateNotifierProvider'),
          TextFormField(
            controller: textFieldControllerStateNotifier,
          ),
          Text(textFieldControllerStateNotifier.text),
          const Text('ChangeNotifierProvider'),
          TextFormField(
            controller: controllerChangeNotifierProvider,
          ),
          Text(controllerChangeNotifierProvider.text),
        ],
      ),
    );
  }
}

[rrousselGit]

Riverpod doesn't recommend using providers to store TextControllers. They belong to the local widget state. So either use a StatefulWidget or flutter_hooks

Using a provider means that if two screens use the same provider, they will share their controller state. This is undesired.

[harunoh1]

@hamza-imran75
Since TextEditingController is immutable and extends ChangeNotifier, probably Notifier is not the best option.

[harunoh1]

The ValueNotifier only listens to a single state.

[hamza-imran75]

Sorry I should've used better wording.

I'm talking about this: https://pub.dev/documentation/riverpod/latest/riverpod/Notifier-class.html

[harunoh1]

You can hold the search value and share between the two screens but you cannot share the same TextEditingController between two screen.(I want to avoid passing TextEditingController to another widget.)

Imagine if you have search_screen and search_result_page and each screens have TextFormFiled to keep the search value.
I wonder how we can update the search value while the user switches page back and forth.

[harunoh1]

Screen A

TextFormField(
                            controller: textController,
                            focusNode: focusNode,
                            textInputAction: TextInputAction.search,
                            onFieldSubmitted: (String searchText) {
                             //update searchText and change the value of text in TextformField on another screen
                            },

Screen B

TextFormField(
                            controller: textController,
                            focusNode: focusNode,
                            textInputAction: TextInputAction.search,
                            onFieldSubmitted: (String searchText) {
                             //update searchText 
                            },

Bad Example

class TextEditingNotifier extends AutoDisposeNotifier<TextEditingController> {
  @override
  TextEditingController build() {
    ref.onDispose(() {
      state.dispose();
    });
    return TextEditingController();
  }

  update(String searchText) {
    state.text = searchText;
  }
}