How can i get text value from TextField while using a ViewModelProvider? - flutter

Question

I have a form (a bunch of TextField widgets), i get the data from a REST API and load it to the view using a ViewModelProvider.
Now i want to press a button "Save", get the text value of the TextField widgets and pass the data to the REST API.
I searched for how to get the value of the TextField to use it elsewhere and all i found was similar to this :
class _MyCustomFormState extends State<MyCustomForm> {
// Create a TextEditingController as a variable
final myController = TextEditingController();
#override
void dispose() {
myController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Retrieve Text Input'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
// Set the created TextEditingController as the controller of the Text Field
controller: myController,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
// Use the text attribute of the TextEditingController variable
content: Text(myController.text),
);
},
);
},
tooltip: 'Show me the value!',
child: Icon(Icons.text_fields),
),
);
}
}
(This code snippet was taken from the Flutter website)
My problem is that i use a ViewModelProvider and i need to create the TextEditingController inside the
builder attribute of the ViewModelProvider to set the text that was retreived from the HTTP call.
Here is my current code, i left only one TextField because they are practically the same.
class SettingsView extends StatelessWidget {
const SettingsView({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return ViewModelProvider<SettingsViewModel>.withConsumer(
viewModel: SettingsViewModel(),
onModelReady: (model) => model.getSettings(),
builder: (context, model, child) => Center(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
TextField(
decoration: new InputDecoration(
labelText: 'Host',
),
controller: TextEditingController.fromValue(
TextEditingValue(
text: model.settings == null? '' :model.settings.host,
),
),
),
GestureDetector(
child: CallToAction("Save"),
onTap: saveData,
),
],
),
),
),
);
}
void saveData() {
}
}
So the question is, how to pass the text value of the TextField to the saveData method?
Thank you.

Answer 1

Are you trying to init the TextEditingController?
If so, you can initialize the text of the controler on onModelReady, and declare the controler outside of build.
class _SettingsViewState extends State<SettingsView> {
TextEditingController myController = TextEditingController();
#override
Widget build(BuildContext context) {
return ViewModelProvider<SettingsViewModel>.withConsumer(
viewModel: SettingsViewModel(),
onModelReady: (model) {
myController.text =
model.settings == null ? '' : model.settings.host;
model.getSettings();
},
builder: (context, model, child) => Center(
child: Column(
children: <Widget>[
Expanded(
child: TextField(
decoration: new InputDecoration(labelText: 'Host'),
controller: myController,
),
),
Expanded(
child: GestureDetector(
child: CallToAction("Save"),
onTap: saveData,
),
),
],
),
),
);
}
void saveData() {
print('save data ${myController.text}');
}
}

Answer 2

Thanks to Thiago Dong Chen i managed to find the solution to my problem.
Thiago suggested that i create a TextEditingController variable and set its text value in onModelReady as follows
onModelReady: (model) {
myController.text = model.settings == null ? '' : model.settings.host;
model.getSettings();
},
The problem is even in onModelReady the model.settings is still null. But his solution put me in the right path. I'm new to Flutter, Dart and the anonymous functions. Seeing that i can change the => to a more classic {} made me realize that i can do the same in builder and do more that just setting the widget tree.
Here is the full code :
class SettingsView extends StatefulWidget {
const SettingsView({Key key}) : super(key: key);
#override
_SettingsViewState createState() => _SettingsViewState();
}
class _SettingsViewState extends State<SettingsView> {
TextEditingController _hostController = TextEditingController();
#override
Widget build(BuildContext context) {
return ViewModelProvider<SettingsViewModel>.withConsumer(
viewModel: SettingsViewModel(),
onModelReady: (model) => model.getSettings(),
builder: (context, model, child) {
_hostController.text = model.settings == null ? null : model.settings.host;
return Center(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
TextField(
decoration: new InputDecoration(
labelText: "Host",
),
controller: _hostController,
inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
),
SizedBox(
height: 30,
),
GestureDetector(
child: CallToAction("Save"),
onTap: saveData,
)
],
),
),
);
}
);
}
void saveData() async{
var _api = locator<Api>();
bool b = await _api.setSettings(SettingItemModel(
host: _hostController.text));
String message = '';
if (b) {
message = 'Data saved to the database!';
} else {
message = 'Couldn\'t save the data';
}
final snackBar = SnackBar(content: Text(message));
Scaffold.of(context).showSnackBar(snackBar);
}
}