How to create a model from the values entered by the user? - flutter

Question

This is my model:
class Foo {
final String name;
final String emailId;
Foo(this.name, this.emailId);
factory Foo.fromJson(Map<String, dynamic> json) {
return Foo(
json['name'] as String,
json['email_id'] as String,
);
}
}
I want to create its object by letting user enter text in the TextField, for that I decided to use Map.
Map<String, dynamic> map = {};
My first text field:
TextFormField(
onSaved: (s) => map['name'] = s,
)
and second:
TextFormField(
onSaved: (s) => map['email_id'] = s,
)
I'm creating an instance using:
final foo = Foo.fromJson(map);
Is there any better way of creating an object without modifying my model class (final fields as well as non-nullable fields) except for creating various fields to store the value and then calling Foo() constructor.

Answer 1

There is many ways to solve this, my recommendation is first to load the data, and then modify anything in the ui without touching the class.
First define your data:
// Example fetch fooFromJson(String)
final Foo foo = Foo(name: 'name', email: 'stack#overflow.com');
// Text controllers
late final TextEditingController _controllerName;
late final TextEditingController _controllerEmail;
// Form key
final formKey = GlobalKey<FormState>();
Define your #initState method:
#override
void initState() {
_controllerName = TextEditingController(text: foo.name);
_controllerEmail = TextEditingController(text: foo.email);
super.initState();
}
This way, the data will fetch from the backend just one time, and will show data to the UI without touching the class.
Then in your body widget:
return Form(
key: formKey,
child: ListView(
padding: const EdgeInsets.all(100),
shrinkWrap: true,
children: [
TextFormField(
controller: _controllerName,
//validator: myValidator,
),
TextFormField(
controller: _controllerEmail,
//validator: myValidator,
),
const SizedBox(height: 20),
ElevatedButton(child: const Text('Save'), onPressed: _onSaved),
],
),
);
When you click save button, set the data to your class again (if you don't want to put the data again to the class go to the end of the answer):
_onSaved() {
if (formKey.currentState!.validate()) {
foo.name = _controllerName.text;
foo.email = _controllerEmail.text;
}
}
Result:
On the other hand, Form is use to validate data, for example you want "Text should be 10 characters maximum":
TextFormField(
controller: _controllerName,
validator: _nameValidator,
autovalidateMode: AutovalidateMode.onUserInteraction,
)
And the function:
String? _nameValidator(String? text) {
return text!.length < 10 ? 'Name should have 10 characters at least' : null;
}
Result when you click save:
The data will not be saved until validation is correct.
Also if you want to fetch data from the internet or database, I recommend to improve your data class, for example you have the following Json:
{
"name" :"",
"email" : ""
}
The class should be:
import 'dart:convert';
Foo fooFromJson(String str) => Foo.fromJson(json.decode(str));
String fooToJson(Foo data) => json.encode(data.toJson());
class Foo {
Foo({
this.name,
this.email,
});
String name;
String email;
factory Foo.fromJson(Map<String, dynamic> json) => Foo(
name: json["name"],
email: json["email"],
);
Map<String, dynamic> toJson() => {
"name": name,
"email": email,
};
}
So you can POST foo.toJson() to whatever API you have.
This is a good tool that can help you with that https://app.quicktype.io/