Home > Enterprise >  Update TextEditingController Text with Riverpod
Update TextEditingController Text with Riverpod

Time:08-26

I'm new to Riverpod and am trying to migrate an app over from Provider. If I had a TextField and wanted to set its value based on my Provider model, I would do this:

class MyWidget extends StatefulWidget{
  const MyWidget({ Key? key }) : super(key: key);

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  var controller = TextEditingController();

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    //Set the value here...
    var model = Provider.of<Model>(context);
    controller.text = model.name;
  }

  Widget build(BuildContext context) {
    return TextField(controller: controller)
  }
}

As I understand it, didChangeDependencies() would listen to changes from Provider.of<Model>(context) and update my controller accordingly.

I'm trying to pull off the same thing with Provider, but I can't ever get the TextField's value to show up.

class MyWidget extends ConsumerStatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends ConsumerState<MyWidget> {
  var controller = TextEditingController();

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    //Trying the same thing here...
    final name = ref.watch(providerName);
    controller.text = name;
  }

  Widget build(BuildContext context) {
    final name = ref.watch(providerName);

    return Column(
      children: [
        //This doesn't work:
        TextField(controller: controller),
        //I know my provider has the value, because this works fine:
        Text(name),
      ]
  }
}

How can I get my TextEditingController's text property to update?

CodePudding user response:

String inputText = controller.text;

CodePudding user response:

From Riverpod official website

///1.Create a [StateNotifier] sub-class, StateNotifier is something where you can define functions that can change your state like in this state is of String type, you also can use objects (Classes instead of primitive types)

class Counter extends StateNotifier<String> {
      Counter() : super('');
      
      void changeText(String text){
      
      state=text;

      } 

///2.Create a provider [StateNotifierProvider] with this you can use in your widget

final counterProvider = StateNotifierProvider<Counter, String>((ref) {
  return Counter();
});

///3.Consume the Provider this is how we can attach state with our widget

class Home extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final text = ref.watch(counterProvider);
    return Text('$text');
  }
}

so here you can add you widget like button and onTap executes the code like

 onTap()=>changeText(textController.text);

So your text [Text('$text');] will automatically change.

  • Related