How to call class method in another file dart - flutter

I've been studying darts for a few days.
I have created a validation class which I will use in the TextFormField validator, but I don't know how to call the function
i know the documentation flutter use this
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
}
but i create this class, so when I need it just call the function
class Validation {
String validatePassword(String value) {
if (value.length < 4) {
return 'Password Minimal 4 Karakter';
}
return null;
}
String validateEmail(String value) {
if (!value.contains('#')) {
return 'Email Tidak Valid';
}
return null;
}
String validatedName(String value) {
if (value.isEmpty) {
return 'Nama Tidak Boleh Kosong';
}
return null;
}
}
and this is the code that will call the validation class
import 'package:flutter/material.dart';
import 'package:flutapp/src/mixins/validation.dart';
class RegisterScreen extends StatefulWidget {
createState() {
return RegisterScreenState();
}
}
class RegisterScreenState extends State<RegisterScreen> with Validation {
final formKey = GlobalKey<FormState>();
String name = '';
String email = '';
String password = '';
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(20.0),
child: Form(
key: formKey,
child: Column(
children: [
nameField(),
emailField(),
passwordField(),
registerButton(),
],
),
)
);
}
}
Widget nameField() {
return TextFormField(
decoration: InputDecoration(
labelText: 'Nama Lengkap'
),
validator: validateName,
);
}
Widget emailField() {
return TextFormField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: 'Email',
hintText: 'contoh#gmail.com'
),
);
}
Widget passwordField() {
return TextFormField(
obscureText: true,
decoration: InputDecoration(
labelText: 'Password',
hintText: 'contoh#password123'
),
);
}
Widget registerButton() {
return RaisedButton(
color: Colors.blueAccent,
onPressed: () {
},
child: Text('Register'),
);
}
any answer will be appreciated

Just call your validator in the validator property of the TextFormField.
return TextFormField(
obscureText: true,
// added this line
validator: Validation(). validatePassword,
decoration: InputDecoration(
labelText: 'Password',
hintText: 'contoh#password123'
),
);
The function has the same signature as the validator property, so you can just do this, instead of this:
return TextFormField(
obscureText: true,
// added this line
validator: (String value)=> Validation().validatePassword(value),
decoration: InputDecoration(
labelText: 'Password',
hintText: 'contoh#password123'
),
);

Related

How do I remove extra space between textField and error message in Flutter

I have a TextFormField with borders. I am using a validator with some conditions to show proper error messages. My error messages are shown exactly below the TextFormField border which is what I want. In my validator, I use an if statement that should return a String, so I have to add return '' after the if statement, as shown in my code:
TextFormField buildPasswordForm() {
return TextFormField(
//key: ValueKey('passwordKey'),
keyboardType: TextInputType.visiblePassword,
obscureText: _isHidden,
decoration: InputDecoration(
//labelText: 'Passowrd',
hintText: 'Password',
floatingLabelBehavior: FloatingLabelBehavior.never,
prefixIcon: Icon(
Icons.lock_sharp,
//color: kTextColor,
),
suffixIcon: Padding(
padding: EdgeInsets.symmetric(
horizontal: getProportionateScreenWidth(12),
),
child: GestureDetector(
onTapDown: inContact,
onTapUp: outContact,
child: Icon(
Icons.remove_red_eye,
size: 26,
//color: kTextColor,
),
),
),
),
validator: (value) {
if (value.isEmpty) {
addPasswordError(error: kPasswordNullError);
return '';
} else if (value.length < 8) {
addPasswordError(error: kShortPasswordError);
return '';
}
return null;
},
onChanged: (value) {
if (value.isNotEmpty) {
removePasswordError(error: kPasswordNullError);
} else if (value.length >= 8) {
removePasswordError(error: kShortPasswordError);
}
return null;
},
onSaved: (newValue) => password = newValue,
);
}
TextFormField buildEmailForm() {
return TextFormField(
keyboardType: TextInputType.emailAddress,
//autofocus: true,
decoration: InputDecoration(
//labelText: 'Email',
hintText: 'Enter your email',
floatingLabelBehavior: FloatingLabelBehavior.always,
prefixIcon: Icon(Icons.mail),
),
validator: (value) {
if (value.isEmpty) {
addEmailError(error: kEmailNullError);
return "";
} else if (!emailValidatorRegExp.hasMatch(value)) {
addEmailError(error: kInvalidEmailError);
return "";
}
return null;
},
onChanged: (value) {
if (value.isNotEmpty) {
removeEmailError(error: kEmailNullError);
} else if (emailValidatorRegExp.hasMatch(value)) {
emailErrors.remove(kInvalidEmailError);
addEmailError(error: kInvalidEmailError);
}
return null;
},
onSaved: (newValue) => email = newValue,
);
}
}
If I add return '', the space between the error message and the bottom board is added, but if the validation is not satisfied, that is: if neither email nor password entered satisfy requirements, the screen does not go to the next one as it should. If I remove return '', then the space between the error message and the bottom borders disappears, but when I hit continue, wether fields are properly filled or not, the screen just goes to the next one.
I would love to have a solution for, and explanation of this behavior.
in my case is like this i usually separate my validator to a different class
class Validator{
static String email(String value){
String pattern = r'^[a-zA-Z0-9.]+#[a-zA-Z0-9]+\.[a-zA-Z]';
RegExp regExp = RegExp(pattern);
if(!regExp.hasMatch(value)) return 'Email is invalid';
else if(value.isEmpty) return 'Email is Empty';
else return null;
}
}
then i create a widget for my textformfield and to call the validator like this
CustomTextFieldX(
obsecure: false,
hintText: 'Enter your email',
nameTop: 'Email',
controller: registerController.emails,
keyboardType: TextInputType.emailAddress,
validators: (value) =>Validator.email(registerController.emails.text = value),
),
i hope it helps. just comment below if their something to clarify at.

My forms widget is not scrolling. How to define the size of the forms widget in flutter, complete form is not shown or visible

My forms widget is not scrolling. How to define the size of the forms widget in flutter, complete form is not shown or visible. The user has to enter the following data / information and submit
folowing is my code `
class MiMobilesPageState extends State<MiMobilesPage> {
String _companyname;
String _modelname;
String _series;
String _year;
String _serielnumber;
String _warrantydate;
String _servicecentredetails;
String _name;
String _mobilenumber;
String _address;
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
Widget _buildCompanyName() {
return TextFormField(
decoration: InputDecoration(labelText: 'CompanyName'),
maxLength: 10,
validator: (String value) {
if (value.isEmpty) {
return 'Company Name is Required';
}
return null;
},
onSaved: (String value) {
_companyname = value;
},
);
}
Widget _buildModelName() {
return TextFormField(
decoration: InputDecoration(labelText: 'ModelName'),
validator: (String value) {
if (value.isEmpty) {
return 'Model Name';
}
},
onSaved: (String value) {
_modelname = value;
},
);
}
Widget _buildSeries() {
return TextFormField(
decoration: InputDecoration(labelText: 'Series'),
keyboardType: TextInputType.visiblePassword,
validator: (String value) {
if (value.isEmpty) {
return 'Series is Required';
}
return null;
},
onSaved: (String value) {
_series = value;
},
);
}
Widget _buildYear() {
return TextFormField(
decoration: InputDecoration(labelText: 'Year'),
keyboardType: TextInputType.url,
validator: (String value) {
if (value.isEmpty) {
return 'Year of MFG is Required';
}
return null;
},
onSaved: (String value) {
_year = value;
},
);
}
Widget _buildSerielNumber() {
return TextFormField(
decoration: InputDecoration(labelText: 'SerielNumber'),
keyboardType: TextInputType.phone,
maxLength: 20,
validator: (String value) {
if (value.isEmpty) {
return 'Seriel-Number is Required';
}
return null;
},
onSaved: (String value) {
_serielnumber = value;
},
);
}
Widget _buildWarrantyDate() {
return TextFormField(
decoration: InputDecoration(labelText: 'Warranty-Date'),
keyboardType: TextInputType.number,
maxLength: 10,
validator: (String value) {
int date = int.tryParse(value);
if (date == null || date <= 0) {
return 'Warranty Date must be greater than 0';
}
return null;
},
onSaved: (String value) {
_warrantydate = value;
},
);
}
Widget _buildServiceCentreDetails() {
return TextFormField(
decoration: InputDecoration(labelText: 'ServiceCentreDetails'),
maxLength: 10,
validator: (String value) {
if (value.isEmpty) {
return 'Service Centre Details are Required';
}
return null;
},
onSaved: (String value) {
_servicecentredetails = value;
},
);
}
Widget _buildName() {
return TextFormField(
decoration: InputDecoration(labelText: 'Name'),
maxLength: 10,
validator: (String value) {
if (value.isEmpty) {
return 'Name is Required';
}
return null;
},
onSaved: (String value) {
_name = value;
},
);
}
Widget _buildMobileNumber() {
return TextFormField(
decoration: InputDecoration(labelText: 'MobileNumber'),
maxLength: 10,
validator: (String value) {
if (value.isEmpty) {
return 'Mobile Number is Required';
}
return null;
},
onSaved: (String value) {
_mobilenumber = value;
},
);
}
Widget _buildAddress() {
return TextFormField(
decoration: InputDecoration(labelText: 'Address'),
maxLength: 10,
validator: (String value) {
if (value.isEmpty) {
return 'Address is Required';
}
if (!RegExp(
r"[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*#(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?")
.hasMatch(value)) {
return 'Please enter a valid Address';
}
return null;
},
onSaved: (String value) {
_companyname = value;
},
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(centerTitle: true,backgroundColor: Colors.lightBlueAccent,title: Text("Basic Details",style:
TextStyle(fontSize: 20), textAlign: TextAlign.center),
actions:<Widget>[IconButton(icon:Icon(Icons.home), onPressed: (){
//debugPrint("Add New Device Cattegorry");
Navigator.push(context,MaterialPageRoute(builder:(context){
return MyHomePage();
}
)
); //
},
) ],
),
body: Container(
margin: EdgeInsets.all(24),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget> [
_buildCompanyName(),
_buildModelName(),
_buildSeries(),
_buildYear(),
_buildSerielNumber(),
_buildWarrantyDate(),
_buildServiceCentreDetails(),
_buildName(),
_buildMobileNumber(),
_buildAddress(),
SizedBox(height:400),
RaisedButton(
child: Text(
'Submit',
style: TextStyle(color: Colors.blue, fontSize: 20),
),
onPressed: () {
if (!_formKey.currentState.validate()) {
return;
}
_formKey.currentState.save();
print(_companyname);
print(_modelname);
print(_series);
print(_year);
print(_serielnumber);
print(_warrantydate);
print(_servicecentredetails);
print(_name);
print(_mobilenumber);
print(_address);
//Send to API
},
)
],
),
),
),
);
}
}
Please guide where I am wrong what is to be included in the code and what changes have to be made?`
I'm assuming the SizedBox(height:400), was a typo, meant to be 40?
To make your Form scroll, you'll need to wrap it in a Scrollable widget usually a ListView or a SingleChildScrollView.
I added an example using your code:
body: SingleChildScrollView( // wrap with SingleChildScrollView to allow scrolls
child: Container(
margin: EdgeInsets.all(24),
child: Form(
// key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_buildCompanyName(),
_buildModelName(),
_buildSeries(),
_buildYear(),
_buildSerielNumber(),
_buildWarrantyDate(),
_buildServiceCentreDetails(),
_buildName(),
_buildMobileNumber(),
_buildAddress(),
SizedBox(height:400), // incase this is not an error as I assumed, change to 400
RaisedButton(
child: Text(
'Submit',
style: TextStyle(color: Colors.blue, fontSize: 20),
),
onPressed: () {
if (!_formKey.currentState.validate()) {
return;
}
_formKey.currentState.save();
print(_companyname);
print(_modelname);
print(_series);
print(_year);
print(_serielnumber);
print(_warrantydate);
print(_servicecentredetails);
print(_name);
print(_mobilenumber);
print(_address);
//Send to API
},
)
],
),
),
),
);
Wrap the Column in a SingleChildScrollView if you want it to scroll.
Like this
Form(
child: SingleChildScrollView(
child: Column(
children: [...]
)
)
)

TextFormField cursor did not move when changes occur

I have a screen that shows a textformfield, I want to retrieve the value that the user has inputted. But when I made a change the cursor didn't move, so it stays at position 0. How do I solve this problem?
class ScreenFormArtikel extends StatefulWidget {
final String mode;
ScreenFormArtikel(this.mode);
#override
_ScreenFormArtikelState createState() => _ScreenFormArtikelState();
}
class _ScreenFormArtikelState extends State<ScreenFormArtikel> {
var _key = GlobalKey<FormState>();
var _titleController = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Article'),
),
body: Container(
child: Form(
key: _key,
child: Column(
children: [
Consumer<ProviderArtikel>(
builder: (context, artikel, child) {
return TextFormField(
decoration: InputDecoration(
labelText: 'Title',
floatingLabelBehavior: FloatingLabelBehavior.always),
controller: _titleController,
validator: (value) {
if (value.isEmpty) {
return "Please fill this field";
}
return null;
},
onChanged: (value) {
_titleController.text = value;
},
);
},
),
RaisedButton(onPressed: () {}),
],
),
),
),
);
}
}
I have attached the sample video below
click here
Commenting the onChanged will do the work.
TextFormField(
decoration: InputDecoration(
labelText: 'Title',
floatingLabelBehavior: FloatingLabelBehavior.always),
controller: _titleController,
validator: (value) {
if (value.isEmpty) {
return "Please fill this field";
}
return null;
},
// onChanged: (value) {
// _titleController.text = value;
// },
),
Actually the _titleController.text is setting the text onChange, that's why cursor is moving to the first place.
And you don't have to explicitly do the onTextChange thing.

Flutter: Best way to get all values in a form

I'm making a data collection app which has multiple TextFields, like more than 12. I'm using a Form key to validate all of them. I want values of all the text fields so I can save them to firestore. How do I do this? Here's my code:
import 'package:flutter/material.dart';
class MainForm extends StatefulWidget {
#override
_MainFormState createState() => _MainFormState();
}
class _MainFormState extends State<MainForm> {
final _formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return Center(
child: SingleChildScrollView(
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
Text('Enter information about PG Owner'),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
autofocus: true,
textCapitalization: TextCapitalization.words,
textAlignVertical: TextAlignVertical.center,
onTap: () {},
decoration: InputDecoration(
prefixIcon: Icon(Icons.face),
labelText: 'Enter Name of Owner',
border: OutlineInputBorder()),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
validator: (value) {
if (value.length < 15) {
return 'Address seems very short!';
}
return null;
},
keyboardType: TextInputType.text,
decoration: InputDecoration(
prefixIcon: Icon(Icons.room),
labelText: 'Enter full address of Owner',
border: OutlineInputBorder()),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
keyboardType: TextInputType.number,
validator: (value) {
if (value.length < 9) {
return 'Phone number must be 9 digits or longer';
}
return null;
},
decoration: InputDecoration(
prefixIcon: Icon(Icons.phone),
labelText: 'Phone number of Owner',
border: OutlineInputBorder()),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter a valid email address';
}
if (!value.contains('#')) {
return 'Email is invalid, must contain #';
}
if (!value.contains('.')) {
return 'Email is invalid, must contain .';
}
return null;
},
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
prefixIcon: Icon(Icons.mail_outline),
labelText: 'Enter Email',
border: OutlineInputBorder()),
),
),
)
],
),
),
),
);
}
}
Update: I know that proper way (I've read the docs) of getting values from a TextField is by creating a controller. But, In my case there are 14 TextFields which requires me to create 14 controllers. Is there a better way of doing this?
You can use something like this in the following code:
_formKey.currentState.save(); calls the onSaved() on each textFormField items, which assigns the value to all the fields and you can use them as required. Try using the _formKey.currentState.save(); just after _formKey.currentState.validate() is evaluated as true.
The form code looks like this:
String contactNumber;
String pin;
return Form(
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
onSaved: (String value){contactNumber=value;},
keyboardType: TextInputType.phone,
inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
maxLength: 10,
decoration: InputDecoration(
labelText: "Enter Your Mobile Number",
hintText: "Number",
icon: Icon(Icons.phone_iphone)),
validator: (value) {
if (value.isEmpty || value.length < 10) {
return 'Please Enter 10 digit number';
}
return null;
},
),
TextFormField(
onSaved: (String value){pin=value;},
keyboardType: TextInputType.phone,
inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
maxLength: 10,
decoration: InputDecoration(
labelText: "Enter Your PIN",
hintText: "Number",
icon: Icon(Icons.lock)),
validator: (value) {
if (value.isEmpty || value.length < 6) {
return 'Please Enter 6 digit PIN';
}
return null;
},
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: RaisedButton(
color: Colors.black,
textColor: Colors.white,
onPressed: () {
if (_formKey.currentState.validate()) {
***_formKey.currentState.save();***
bloc.loginUser(contactNumber, pin);
}
},
child: Text('Login' /*style: TextStyle(fontSize: 30),*/)),
)
],
),
);
Using controller in TextFormField, you can get value of the TextFormField.
TextEditingController emailEditingController = TextEditingController();
TextFormField(
controller: emailEditingController,
validator: (value) {
if (value.isEmpty) {
return 'Please enter a valid email address';
}
if (!value.contains('#')) {
return 'Email is invalid, must contain #';
}
if (!value.contains('.')) {
return 'Email is invalid, must contain .';
}
return null;
},
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
prefixIcon: Icon(Icons.mail_outline),
labelText: 'Enter Email',
border: OutlineInputBorder()),
);
Get Value like:
String email=emailEditingController.text;
Updated Answer
Get value by using onSubmitted
onSubmitted: (String value){email=value;},
I am not satisfied with how Flutter make you handle the form values yourself, you need to create a TextEditingController instance for each field, assign it to the controller and remember to dispose all of them manually. This leads to a lot of boilerplate code and makes it more error-prone:
final _formKey = GlobalKey<FormState>();
final controller1 = TextEditingController();
final controller2 = TextEditingController();
final controller3 = TextEditingController();
#override
void dispose() {
super.dispose();
controller1.dispose();
controller2.dispose();
controller3.dispose();
}
#override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(children: [
TextFormField(controller: controller1),
TextFormField(controller: controller2),
TextFormField(
controller: controller3,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return null;
},
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
final value1 = controller1.text;
final value2 = controller2.text;
final value3 = controller3.text;
// do something with the form data
}
},
child: const Text('Submit'),
),
]),
);
}
A much less cumbersome way is to use the flutter_form_builder package and replace TextFormField with the FormBuilderTextField widget which is a wrapper of the old plain TextField. You can see all of the supported input widgets here.
All you need to do now is to specify the name of each field in your form, and access it in _formKey.currentState?.value. See the example below:
final _formKey = GlobalKey<FormBuilderState>();
#override
Widget build(BuildContext context) {
return FormBuilder(
key: _formKey,
child: Column(children: [
FormBuilderTextField(name: 'field1'),
FormBuilderTextField(name: 'field2'),
FormBuilderTextField(
name: 'field3',
validator: FormBuilderValidators.required(
context,
errorText: 'Please enter some text',
),
),
ElevatedButton(
onPressed: () {
_formKey.currentState.save();
if (_formKey.currentState!.validate()) {
final formData = _formKey.currentState?.value;
// formData = { 'field1': ..., 'field2': ..., 'field3': ... }
// do something with the form data
}
},
child: const Text('Submit'),
),
]),
);
}
You can use flutter_form_bloc, you don't need to create any TextEditingController and can separate the Business Logic from the User Interface, in addition to offering other advantages.
dependencies:
flutter_bloc: ^0.21.0
form_bloc: ^0.4.1
flutter_form_bloc: ^0.3.0
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_form_bloc/flutter_form_bloc.dart';
import 'package:form_bloc/form_bloc.dart';
void main() => runApp(MaterialApp(home: MainForm()));
class MainFormBloc extends FormBloc<String, String> {
final nameField = TextFieldBloc();
final addressField = TextFieldBloc(validators: [
(value) => value.length < 15 ? 'Address seems very short!' : null,
]);
final phoneNumberField = TextFieldBloc(validators: [
(value) =>
value.length < 9 ? 'Phone number must be 9 digits or longer' : null,
]);
final emailField = TextFieldBloc(validators: [Validators.email]);
#override
List<FieldBloc> get fieldBlocs => [
nameField,
addressField,
phoneNumberField,
emailField,
];
#override
Stream<FormBlocState<String, String>> onSubmitting() async* {
// This method is called when you call [mainFormBloc.submit]
// and each field bloc have a valid value.
// And you can save them in firestore.
print(nameField.value);
print(addressField.value);
print(phoneNumberField.value);
print(emailField.value);
yield currentState.toSuccess('Data saved successfully.');
// yield `currentState.toLoaded()` because
// you can't submit if the state is `FormBlocSuccess`.
// In most cases you don't need to do this,
// because you only want to submit only once.
yield currentState.toLoaded();
}
}
class MainForm extends StatelessWidget {
#override
Widget build(BuildContext context) {
return BlocProvider<MainFormBloc>(
builder: (context) => MainFormBloc(),
child: Builder(
builder: (context) {
final formBloc = BlocProvider.of<MainFormBloc>(context);
return Scaffold(
appBar: AppBar(title: Text('Main Form')),
body: FormBlocListener<MainFormBloc, String, String>(
onSuccess: (context, state) {
Scaffold.of(context).showSnackBar(
SnackBar(
content: Text(state.successResponse),
backgroundColor: Colors.green,
),
);
},
onSubmissionFailed: (context, state) {
Scaffold.of(context).showSnackBar(
SnackBar(
content: Text('Some fields have invalid data.'),
backgroundColor: Colors.red,
),
);
},
child: ListView(
children: <Widget>[
TextFieldBlocBuilder(
textFieldBloc: formBloc.nameField,
padding: const EdgeInsets.all(8.0),
autofocus: true,
textCapitalization: TextCapitalization.words,
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
prefixIcon: Icon(Icons.face),
labelText: 'Enter Name of Owner',
border: OutlineInputBorder()),
),
TextFieldBlocBuilder(
textFieldBloc: formBloc.addressField,
padding: const EdgeInsets.all(8.0),
keyboardType: TextInputType.text,
decoration: InputDecoration(
prefixIcon: Icon(Icons.room),
labelText: 'Enter full address of Owner',
border: OutlineInputBorder()),
),
TextFieldBlocBuilder(
textFieldBloc: formBloc.phoneNumberField,
padding: const EdgeInsets.all(8.0),
keyboardType: TextInputType.number,
decoration: InputDecoration(
prefixIcon: Icon(Icons.phone),
labelText: 'Phone number of Owner',
border: OutlineInputBorder()),
),
TextFieldBlocBuilder(
textFieldBloc: formBloc.emailField,
padding: const EdgeInsets.all(8.0),
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
prefixIcon: Icon(Icons.mail_outline),
labelText: 'Enter Email',
border: OutlineInputBorder()),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
onPressed: formBloc.submit,
child: Center(child: Text('SUBMIT')),
),
),
],
),
),
);
},
),
);
}
}
I came here from a similar search. All the answers found did not satisfy my need, hence I wrote a custom solution.
form key
final _signUpKey = GlobalKey<FormState>();
declare your TextEditingController
final Map<String, TextEditingController> sigUpController = {
'firstName': TextEditingController(),
'lastName': TextEditingController(),
'email': TextEditingController(),
'phone': TextEditingController(),
'password': TextEditingController(),
};
Pass controller to TextFormField like this
Form(
key: _signUpKey,
child: Column(
children: [
TextFormField(
controller: sigUpController['firstName'],
validator: validator,
autofocus: autofocus,
keyboardType: TextInputType.text,
style: const TextStyle(
fontSize: 14,
),
onTap: onTap,
onChanged: onChanged,
inputFormatters: [
FilteringTextInputFormatter.allow(
RegExp(r"[a-zA-Z]+|\s"),
),
],
),
// define the other TextFormField here
TextButton(
onPressed: () {
if (!_signUpKey.currentState!.validate()) {
return;
}
// To get data I wrote an extension method bellow
final data = sigUpController.data();
print('data: $data'); // data: {firstName: John, lastName: Doe, email: example#email.com, phone: 0000000000, password: password}
},
child: const Text('submit'),
)
],
),
);
Extension method to get data from Map<String, TextEditingController>
extension Data on Map<String, TextEditingController> {
Map<String, dynamic> data() {
final res = <String, dynamic>{};
for (MapEntry e in entries) {
res.putIfAbsent(e.key, () => e.value?.text);
}
return res;
}
}
Try using this flutter package flutter_form_builder, it will help you from repeating yourself by creating multiple controllers for each form field. In addition to that, it will help you in validating the form, and updating the form with simplicity by using only a simple form key to control the entire form.

Flutter redirects on textFormField open

whenever i click on the textFormField the keyboard opens and closes almost immediately i think it kinda refreshes the page. i have another page with a form where i dont face this problem.
here is the code for that page, the other form i have in the app is almost identical to this one
import 'package:flutter/material.dart';
import 'package:scoped_model/scoped_model.dart';
import '../scoped_models/products.dart';
class ProductAdd extends StatelessWidget {
final _formData = {
'title': null,
'description': null,
'price': null,
'image': 'assets/food.jpg'
};
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
Widget _titleField() {
return TextFormField(
decoration: InputDecoration(labelText: 'Enter Title'),
keyboardType: TextInputType.text,
validator: (String value) {
if (value.isEmpty) {
return 'Please enter a valid title';
}
},
onSaved: (value) {
print(value);
_formData['title'] = value;
},
);
}
Widget _descriptionField() {
return TextFormField(
decoration: InputDecoration(labelText: 'Enter Description'),
keyboardType: TextInputType.text,
validator: (String value) {
if (value.isEmpty) {
return 'Please enter a valid description';
}
},
onSaved: (value) {
print(value);
_formData['description'] = value;
},
);
}
Widget _priceField() {
return TextFormField(
decoration: InputDecoration(labelText: 'Enter Price'),
keyboardType: TextInputType.number,
validator: (String value) {
if (value.isEmpty) {
return 'Please enter a valid price';
}
},
onSaved: (value) {
print(value);
_formData['price'] = value;
},
);
}
Widget _submitButton(context) {
return RaisedButton(
textColor: Colors.white,
child: Text('LOGIN'),
onPressed: () {
if (!_formKey.currentState.validate()) {
return;
}
_formKey.currentState.save();
Navigator.pushReplacementNamed(context, '/products');
},
);
}
#override
Widget build(BuildContext context) {
return ScopedModelDescendant<ProductsModel>(
builder: (context, child, ProductsModel model) {
return Container(
child: Center(
child: Container(
child: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(20.0),
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
_titleField(),
_descriptionField(),
_priceField(),
SizedBox(
height: 10.0,
),
_submitButton(context)
],
),
),
),
),
),
),
);
},
);
}
}
i'm using flutter version: 1.0.0
I was not able to reproduce the issue. I re-created your case and the keyboard worked just fine. I although skipped the scoped-model part of your code because I don't know how your setup is. But with minimal code, I couldn't replicate it. See below:
import 'package:flutter/material.dart';
import 'package:scoped_model/scoped_model.dart';
//import '../scoped_models/products.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: ProductAdd(),
);
}
}
class ProductAdd extends StatelessWidget {
final _formData = {
'title': null,
'description': null,
'price': null,
'image': 'assets/food.jpg'
};
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
Widget _titleField() {
return TextFormField(
decoration: InputDecoration(labelText: 'Enter Title'),
keyboardType: TextInputType.text,
validator: (String value) {
if (value.isEmpty) {
return 'Please enter a valid title';
}
},
onSaved: (value) {
print(value);
_formData['title'] = value;
},
);
}
Widget _descriptionField() {
return TextFormField(
decoration: InputDecoration(labelText: 'Enter Description'),
keyboardType: TextInputType.text,
validator: (String value) {
if (value.isEmpty) {
return 'Please enter a valid description';
}
},
onSaved: (value) {
print(value);
_formData['description'] = value;
},
);
}
Widget _priceField() {
return TextFormField(
decoration: InputDecoration(labelText: 'Enter Price'),
keyboardType: TextInputType.number,
validator: (String value) {
if (value.isEmpty) {
return 'Please enter a valid price';
}
},
onSaved: (value) {
print(value);
_formData['price'] = value;
},
);
}
Widget _submitButton(context) {
return RaisedButton(
textColor: Colors.white,
child: Text('LOGIN'),
onPressed: () {
if (!_formKey.currentState.validate()) {
return;
}
_formKey.currentState.save();
Navigator.pushReplacementNamed(context, '/products');
},
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(20.0),
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
_titleField(),
_descriptionField(),
_priceField(),
SizedBox(
height: 10.0,
),
_submitButton(context)
],
),
),
),
),
),
),
);
}
}
My Flutter version: 0.11.10
this is my correction, hope it works; u need to add TextEditingController titlecontroller froeach TextFormField,dont use onsaved() ; and on the submitbutton funtion use this :
TextEditingController _pricecontroller;
Widget _priceField() {
return TextFormField(
//addcontroller;
controller : __pricecontroller
decoration: InputDecoration(labelText: 'Enter Price'),
keyboardType: TextInputType.number,
validator: (String value) {
if (value.isEmpty) {
return 'Please enter a valid price';
}
},
onSaved: (value) {
print(value);
_formData['price'] = value;
},
);
}
Widget _submitButton(context) {
return RaisedButton(
textColor: Colors.white,
child: Text('LOGIN'),
onPressed: () {
if (!_formKey.currentState.validate()) {
_formKey.currentState.save();
_formData['title'] = __titlecontroller.text;
_formData['description'] = __desccontroller.text;
_formData['price'] = __pricecontroller.text;
}
Navigator.pushReplacementNamed(context, '/products');
},
);
}