Cannot retrieve text from textfield with Riverpod - flutter

Question

My code
class _GenericTextFieldState extends State<GenericTextField> {
#override
Widget build(BuildContext context) {
return CupertinoTextField(
controller: textFieldController,
padding: EdgeInsets.all(8),
prefix: Icon(Icons.email_outlined),
placeholder: widget.hint,
);
}
}
final textFieldController = TextEditingController();
final textFieldProvider = Provider<String> ( (_) => textFieldController.text);
the textFieldController is supplying the string to the textFieldProvider.
I am trying to get the string in another file using the consumer widget like so
class LoadingButton extends ConsumerWidget {
LoadingButton(this.buttonName);
final String buttonName;
#override
Widget build(BuildContext context,ScopedReader watch) {
String textInput = watch(textFieldProvider);
return RoundedLoadingButton(
successColor: mainColor,
errorColor: Colors.orange,
height: 40,
color: mainColor,
child: Text(buttonName, style: TextStyle(color: Colors.white)),
controller: _btnController,
onPressed: (){
mLog("Input from provider username: $textInput");
},
);
}
}
However the textInput variable is always empty.
What am I missing.

Answer 1

you can use onChanged with StateProvider
something like this
Full Example
final textFieldProvider = StateProvider<String>((ref) => "");
class Main extends StatelessWidget {
const Main({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return ProviderScope(
child: Scaffold(
appBar: AppBar(
title: Text('Title'),
),
body: Column(
children: [
Container(),
_GenericTextFieldState(),
LoadingButton("Test")
],
),
),
);
}
}
class _GenericTextFieldState extends StatelessWidget {
const _GenericTextFieldState({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return CupertinoTextField(
padding: EdgeInsets.all(8),
prefix: Icon(Icons.email_outlined),
placeholder: "Input text",
onChanged: (text) {
context.read(textFieldProvider).state = text;
},
);
}
}
class LoadingButton extends ConsumerWidget {
LoadingButton(this.buttonName);
final String buttonName;
#override
Widget build(BuildContext context, ScopedReader watch) {
String textInput = watch(textFieldProvider).state;
return RaisedButton(
child: Text(buttonName, style: TextStyle(color: Colors.white)),
onPressed: () {
print("Input from provider username: $textInput");
},
);
}
}