"Invalid value constant value "for TextEditingController in Flutter? - flutter

Was building UI with TextField() in Flutter, I defined the controller in state and tried to use that defined emailController and passwordController in TextField() but it says "Invalid constant value.". I tried to resolve it but didn't work. Here is the code for login_screen.dart
import 'package:flutter/material.dart';
import 'package:rider_app/routes/routing_constants.dart';
class LoginScreen extends StatefulWidget {
const LoginScreen({Key? key}) : super(key: key);
#override
State<LoginScreen> createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
final TextEditingController emailController = TextEditingController();
final TextEditingController passwordController = TextEditingController();
final _validate = false;
// #override
// void dispose() {
// emailController.dispose();
// passwordController.dispose();
// super.dispose();
// }
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SingleChildScrollView(
child: Column(
children: [
const SizedBox(
height: 40.0,
),
const Center(
child: Image(
image: AssetImage("lib/assets/images/logo.png"),
width: 200.0,
height: 200.0,
alignment: Alignment.center,
)),
const SizedBox(
height: 2.0,
),
const Text(
"Login as a Rider",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 25.0, fontFamily: "Brand Bold"),
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 30.0, vertical: 10.0),
child: Column(
children: [
const SizedBox(
height: 10.0,
),
const TextField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: "Email",
labelStyle: TextStyle(
fontSize: 15.0,
),
hintText: "Email address",
hintStyle: TextStyle(fontSize: 12.0, color: Colors.grey),
// focusedBorder: OutlineInputBorder(
// borderSide:
// BorderSide(width: 1.0, color: Colors.blueAccent),
// ),
// enabledBorder: OutlineInputBorder(
// borderSide: BorderSide(width: 1.0),
// ),
),
style: TextStyle(fontSize: 15.0),
controller: emailController,
),
const SizedBox(
height: 10.0,
),
const TextField(
controller: passwordController,
keyboardType: TextInputType.visiblePassword,
decoration: InputDecoration(
labelText: "Password",
labelStyle: TextStyle(fontSize: 15.0),
hintText: "Your password",
hintStyle: TextStyle(fontSize: 12.0, color: Colors.grey),
// focusedBorder: OutlineInputBorder(
// borderSide: BorderSide(width: 1.0, color: Colors.blueAccent),
),
// enabledBorder: OutlineInputBorder(
// borderSide: BorderSide(width: 1.0)
// )
// ),
obscureText: true,
style: TextStyle(fontSize: 15.0),
),
const SizedBox(
height: 45.0,
),
ElevatedButton(
onPressed: () {
debugPrint("Logged In");
Navigator.pushNamed(context, homeScreen);
},
child: const Padding(
padding: EdgeInsets.symmetric(
horizontal: 23, vertical: 11),
child: Text(
'Login',
style: TextStyle(
fontSize: 18,
fontFamily: "Brand Bold",
fontWeight: FontWeight.w500),
),
),
),
],
),
),
FlatButton(
onPressed: () {
Navigator.pushNamed(context, signUpScreen);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
"Don't have Account?",
style: TextStyle(
fontWeight: FontWeight.w400,
fontFamily: "Brand-Regular"),
),
Text(
" Register Here.",
style: TextStyle(
fontFamily: "Brand-Regular",
fontWeight: FontWeight.w600),
)
],
))
],
),
),
);
}
}
The controller defination is okay but as I try to assign controller to the TextField() controller, the error is thrown. Screenshot attached herewith:
Have any idea ?? let me know, even suggetion is appreciated. Thank you!
GitHub Repo: Project Link Github

Remove the const before TextField, that should resolve the error.

Remove const keywords at the beginning of TextField widgets.

Try removing the const modifier from the TextField.

remove const from const TextField and you are good to go.
Your code will be like this:
TextField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: "Email",
labelStyle: TextStyle(
fontSize: 15.0,
),

Try removing the "const" before TextField, (or one of the top widgets in the widget tree), that should resolve the error.

Related

Register screen check if textboxes are empty

Hello guys i am trying to check if the input fields for my register screen are empty and give an error message for each one if any is empty.
I added the text editing controllers and the booleans for if each box is empty or not.
Then on button press it checks if there is no text in any of the fields and should display the error message for each of the field.
Right now it tells me that the text provided in this "errorText: _emptyboxmail ? 'field cannot be empty' : null," is dead code for each one.
If i change the boolean to true then it shows that null is dead code in code i gave above.
How do i make this work without having dead code? The program runs as usual it just not show me the error message if i leave the boxes empty
import 'package:club_mark_2/styles/style.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'userPreferences/user_details_preference.dart';
class RegisterScreen extends StatefulWidget {
const RegisterScreen({Key? key}) : super(key: key);
#override
_RegisterScreenState createState() => _RegisterScreenState();
}
class _RegisterScreenState extends State<RegisterScreen> {
#override
Widget build(BuildContext context) {
final registerEmail = TextEditingController();
final registerPassword = TextEditingController();
final verifyPassword = TextEditingController();
final registerName = TextEditingController();
bool _emptyboxmail = false;
bool _emptyboxpass = false;
bool _emptyboxverify = false;
bool _emptyboxregistername = false;
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
#override
void dispose() {
// Clean up the controller when the widget is disposed.
registerEmail.dispose();
registerPassword.dispose();
verifyPassword.dispose();
registerName.dispose();
super.dispose();
}
return Scaffold(
backgroundColor: Colors.transparent,
body: SizedBox(
width: width,
height: height,
child: Stack(children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 15, top: 165, right: 15),
child: ListView(
children: [
Center(
child: Text(
'SIGN UP',
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
),
),
),
Container(
padding: EdgeInsets.all(8.0),
child: TextFormField(
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
errorText: _emptyboxregistername
? 'field cannot be empty'
: null,
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.withOpacity(0.5)),
borderRadius: BorderRadius.circular(20)),
hintText: 'Full Name',
hintStyle: TextStyle(color: kcMediumGreyColor),
labelStyle: TextStyle(color: Colors.white),
prefixIcon: const Icon(
Icons.person,
color: Colors.white,
),
),
controller: registerName,
),
),
SizedBox(
height: 5,
),
Container(
padding: EdgeInsets.all(8.0),
child: TextFormField(
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
errorText: _emptyboxmail ? 'field cannot be empty' : null,
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.withOpacity(0.5)),
borderRadius: BorderRadius.circular(20),
),
hintText: 'E-mail',
hintStyle: TextStyle(color: kcMediumGreyColor),
labelStyle: TextStyle(color: Colors.white),
prefixIcon: const Icon(
Icons.email,
color: Colors.white,
),
),
controller: registerEmail,
),
),
SizedBox(
height: 5,
),
Container(
padding: EdgeInsets.all(8.0),
child: TextFormField(
style: TextStyle(color: Colors.white),
obscureText: true,
decoration: InputDecoration(
errorText: _emptyboxpass ? 'field cannot be empty' : null,
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.withOpacity(0.5)),
borderRadius: BorderRadius.circular(20),
),
hintText: 'Password',
hintStyle: TextStyle(color: kcMediumGreyColor),
labelStyle: TextStyle(
color: Colors.white,
),
prefixIcon: const Icon(
Icons.lock,
color: Colors.white,
),
),
controller: registerPassword,
),
),
SizedBox(
height: 5,
),
//VERIFY PASSWORD TEXT BOX
Container(
padding: EdgeInsets.all(8.0),
child: TextFormField(
style: TextStyle(color: Colors.white),
obscureText: true,
decoration: InputDecoration(
errorText:
_emptyboxverify ? 'field cannot be empty' : null,
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.withOpacity(0.5)),
borderRadius: BorderRadius.circular(20),
),
hintText: 'Verify Password',
hintStyle: TextStyle(color: kcMediumGreyColor),
labelStyle: TextStyle(color: Colors.white),
prefixIcon: const Icon(
Icons.lock,
color: Colors.white,
),
),
//TEXT EDITING CONTROLLER
controller: verifyPassword,
),
),
SizedBox(
height: 20,
),
SizedBox(
height: 60,
child: TextButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
),
// THE BUTTON THAT CHECKS IF THE BOOLEANS ARE TRUE OR FALSE FOR THE TEXT BEING EMPTY
onPressed: () {
registerEmail.text.isEmpty
? _emptyboxmail = true
: _emptyboxmail = false;
registerName.text.isEmpty
? _emptyboxregistername = true
: _emptyboxregistername = false;
registerPassword.text.isEmpty
? _emptyboxpass = true
: _emptyboxpass = false;
verifyPassword.text.isEmpty
? _emptyboxverify = true
: _emptyboxverify = false;
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => UserDetailsPreference(),
),
);
},
child: Text('Sign Up'),
),
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(8.0),
child: Text(
"━━━━━ OR SIGN UP WITH ━━━━━",
style: TextStyle(color: kcMediumGreyColor),
),
),
],
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () {},
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Image.asset('lib/assets/images/googleIcon.png',
width: 50.0, height: 50.0),
),
),
),
SizedBox(
width: 30,
),
InkWell(
onTap: () {},
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
// borderRadius: BorderRadius.circular(20.0),
child: Image.asset(
'lib/assets/images/facebookIcon.png',
width: 45.0,
height: 45.0),
),
),
),
],
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(8.0),
child: Text(
"Already have an account?",
style: TextStyle(color: Colors.white),
),
),
Text(
"SIGN IN",
style: TextStyle(color: kcPrimaryColor),
),
],
),
],
),
),
]),
),
);
}
}
You have to move all your initializations and dispose method out of build method.
class _RegisterScreenState extends State<RegisterScreen> {
final registerEmail = TextEditingController();
final registerPassword = TextEditingController();
final verifyPassword = TextEditingController();
final registerName = TextEditingController();
bool _emptyboxmail = false;
bool _emptyboxpass = false;
bool _emptyboxverify = false;
bool _emptyboxregistername = false;
#override
void dispose() {
// Clean up the controller when the widget is disposed.
registerEmail.dispose();
registerPassword.dispose();
verifyPassword.dispose();
registerName.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return Scaffold(
backgroundColor: Colors.transparent,
body: SizedBox(
width: width,
height: height,
// ... rest of your code
Create a Form with a GlobalKey
Add a TextFormField with validation logic
Create a button to validate and submit the form
https://flutter.dev/docs/cookbook/forms/validation

How to add a toggle for hiding and viewing password in Flutter?

I have been trying to develop an app and for its sign up, I am not sure how and where a toggle to hide/view the password can be added. Is it under obscuretext? If so, how do I add a condition for it to my code? (Used a form to create for entering sign up details.)
Code of the form where the Custom Text Field was implemented:
_signUpForm() {
return Container(
padding: EdgeInsets.symmetric(horizontal: 25, vertical: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
CustomRoundedTextField(
label: 'Email',
onChange: (val) {
email = val;
},
),
CustomRoundedTextField(
label: 'Password',
isPassword: true,
onChange: (val) {
password = val;
},
),
SizedBox(height: 40),
CustomBlueRoundedButton(
child: Text(
'Register Account',
style: TextStyle(color: Colors.white),
),
onPressed: _createAccount,
),
SizedBox(height: 15,),
Container(
child: Center(
child: Text("Already have an account?"),
),
),
SizedBox(height: 5),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
InkWell(
onTap: openLoginPage,
child: Text("Login", style: TextStyle(
color: Color(0xff1A3C90),
fontWeight: FontWeight.w700
),),
)
],
)
],
),
);
}
Custom Text Field Class Code:
class CustomRoundedTextField extends StatelessWidget {
final label;
final onChange;
final isPassword;
final bottomPadding;
final textCapitalization;
final inputType;
final controller;
final iconData;
CustomRoundedTextField(
{
this.iconData,
this.controller,
this.inputType = TextInputType.text,
this.label,
this.onChange,
this.isPassword = false,
this.bottomPadding = 16,
this.textCapitalization = TextCapitalization.none});
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(bottom: 16),
child: TextField(
controller: controller,
keyboardType: inputType,
textCapitalization: textCapitalization,
obscureText: isPassword,
style:
TextStyle(fontSize: 15, color: Colors.black),
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15),
borderSide: BorderSide(
color: Colors.black54,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(15),
borderSide: BorderSide(
color: Colors.black,
),
),
labelText: label,
labelStyle: TextStyle(
fontSize: 15,
color: Colors.black,
fontWeight: FontWeight.w600,
),
),
onChanged: onChange,
),
);
}
}
Make your CustomRoundedTextField as StatefulWidget and add suffixIcon to TextField's InputDecoration. Below your code:
class CustomRoundedTextField extends StatefulWidget {
final label;
final onChange;
final isPassword;
final bottomPadding;
final textCapitalization;
final inputType;
final controller;
final iconData;
CustomRoundedTextField(
{
this.iconData,
this.controller,
this.inputType = TextInputType.text,
this.label,
this.onChange,
this.isPassword = false,
this.bottomPadding = 16,
this.textCapitalization = TextCapitalization.none});
#override
_CustomRoundedTextFieldState createState() => _CustomRoundedTextFieldState();
}
class _CustomRoundedTextFieldState extends State<CustomRoundedTextField> {
bool _showPwd = false;
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(bottom: 16),
child: TextField(
controller: widget.controller,
keyboardType: widget.inputType,
textCapitalization: widget.textCapitalization,
obscureText: widget.isPassword && !_showPwd,
style:
TextStyle(fontSize: 15, color: Colors.black),
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15),
borderSide: BorderSide(
color: Colors.black54,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(15),
borderSide: BorderSide(
color: Colors.black,
),
),
labelText: widget.label,
labelStyle: TextStyle(
fontSize: 15,
color: Colors.black,
fontWeight: FontWeight.w600,
),
suffixIcon: widget.isPassword ? IconButton(
icon: Icon(_showPwd ? Icons.visibility : Icons.visibility_off),
onPressed:(){
setState((){
_showPwd = !_showPwd;
});
}
) : null,
),
onChanged: widget.onChange,
),
);
}
}

app crashing for obsureText !=null . how do i solve this?

i am building a log in ui screen everything is going fine but as i was supposed to use more than one TextField i created a new class of TextField and the code goes as follows
import 'package:gradient_widgets/gradient_widgets.dart';
import 'package:notepad/authentication/textfield.dart';
class LogIn extends StatefulWidget {
LogIn({Key key}) : super(key: key);
#override
_LogInState createState() => _LogInState();
}
class _LogInState extends State<LogIn> {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
body: Column(
crossAxisAlignment:
CrossAxisAlignment.start, //TODO: ESSE DACK NA EK BAR
children: [
Container(
padding: EdgeInsets.fromLTRB(20.0, 150.0, 20.0, 0.0),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Welcome,',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 35.0,
),
),
Text(
'Log In to continue!',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
color: Colors.grey,
),
),
SizedBox(height: 70),
buildTextField(
labelText: 'Email',
),
SizedBox(height: 30),
buildTextField(
labelText: 'Password',
obscureText: true, //TODO: password ko thich krna hy!!!
),
SizedBox(height: 10),
Container(
alignment: Alignment(1.0, 0.0),
child: InkWell(
onTap: () {
//TODO: navigate to forgot password page
},
child: Text(
'Forgot Password?',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.deepOrange,
fontSize: 10.0,
),
),
),
),
SizedBox(height: 70),
Container(
child: GradientButton(
increaseHeightBy: 10.0,
increaseWidthBy: 200.0,
child: Text(
'Log In',
style: TextStyle(fontWeight: FontWeight.bold),
),
callback: () {},
//TODO: LOGIN KA CALLBACK JAYEGA YAHA PR
gradient: LinearGradient(
colors: [
Color(0xFFFD7F2C),
Color(0xFFFF6200),
Color(0xFFFD9346),
],
),
shadowColor: Gradients.backToFuture.colors.last
.withOpacity(0.25),
),
),
SizedBox(
height: 10.0,
),
Container(
child: GradientButton(
increaseHeightBy: 10.0,
increaseWidthBy: 200.0,
child: Text(
'Log In With Google',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black),
),
callback: () {},
//TODO: LOGIN KA CALLBACK JAYEGA YAHA PR
gradient: LinearGradient(
colors: [Colors.white, Colors.white]),
),
),
],
),
],
),
),
],
),
);
}
}
and the code of text field class
TextField buildTextField({
#required String labelText,
bool obscureText,
}) {
return TextField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25),
borderSide: BorderSide(color: Colors.white),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25),
borderSide: BorderSide(color: Colors.deepOrange),
),
labelText: labelText,
labelStyle:
TextStyle(fontWeight: FontWeight.bold, color: Colors.deepOrange),
),
keyboardType: TextInputType.emailAddress,
obscureText: obscureText,
);
}
As i am passing obscureText as true in the login page my app is crashing saying obsureText !=null enter image description here
i dont know to can i solve this as i am new to flutter i will be greatful enough to somebody helped me to solve this issue
You are getting that error because you are not passing the value for
bool obscureText,
Make sure to pass the value for obscureText from everywhere the buildTextField is called or set a default value for obscureText like this -
bool obscureText = false,
Please see the working code below :
import 'package:flutter/material.dart';
final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: const Scaffold(
body: Center(
child: LogIn(),
),
),
);
}
}
class LogIn extends StatefulWidget {
const LogIn({Key key}) : super(key: key);
#override
_LogInState createState() => _LogInState();
}
class _LogInState extends State<LogIn> {
TextField buildTextField({
#required String labelText,
bool obscureText = false,
}) {
return TextField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25),
borderSide: const BorderSide(color: Colors.white),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25),
borderSide: const BorderSide(color: Colors.deepOrange),
),
labelText: labelText,
labelStyle: const TextStyle(
fontWeight: FontWeight.bold, color: Colors.deepOrange),
),
keyboardType: TextInputType.emailAddress,
obscureText: obscureText,
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.fromLTRB(20.0, 150.0, 20.0, 0.0),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Welcome,',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 35.0,
),
),
const Text(
'Log In to continue!',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
color: Colors.grey,
),
),
const SizedBox(height: 70),
buildTextField(
labelText: 'Email',
),
const SizedBox(height: 30),
buildTextField(
labelText: 'Password',
obscureText: true,
),
const SizedBox(height: 10),
Container(
alignment: const Alignment(1.0, 0.0),
child: InkWell(
onTap: () {},
child: const Text(
'Forgot Password?',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.deepOrange,
fontSize: 10.0,
),
),
),
),
const SizedBox(height: 70),
Container(
child: RaisedButton(
child: const Text(
'Log In',
style: TextStyle(fontWeight: FontWeight.bold),
),
onPressed: () {},
),
),
const SizedBox(
height: 10.0,
),
Container(
child: RaisedButton(
child: const Text(
'Log In With Google',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black),
),
onPressed: () {},
),
),
],
),
],
),
),
],
),
),
);
}
}
you should provide default value for obscureText (bool obscureText=false) in your buildTextField widget.

How do I reset my reset the Currentstate of this application

Please, how do i reset my currentstate Navigator such that when user type in the text field, the error message goes off instead of remaining until they hit the SUBMIT button. I know it's the use of the unChanged function, but I cant really figure that out.
Please, kindly help out. I have also attached my code below.
Thank you.
class ForgotPwd extends StatefulWidget {
#override
_ForgotPwdState createState() => _ForgotPwdState();
}
class _ForgotPwdState extends State<ForgotPwd> {
final TextEditingController _popEditingController = TextEditingController();
final _formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return Dialog(
child: Stack(
children: [
Container(
height: 270.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
child: Padding(
padding: EdgeInsets.only(top: 40.0),
child: Form(
key: _formKey,
child: Column(children: [
Text(
'Forgot Password?',
style: TextStyle(
fontFamily: 'Work Sans',
fontSize: 18.0,
color: Color(0XFF25282B),
fontWeight: FontWeight.w600),
),
Padding(
padding:
EdgeInsets.only(left: 20.0, right: 20.0, top: 30.0),
child: TextFormField(
validator: (value) {
if (value.isEmpty == true) {
return 'Please enter email address';
} else {
return null;
}
},
controller: _popEditingController,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
prefixIcon: Icon(FontAwesomeIcons.envelope),
labelStyle: TextStyle(fontSize: 15.0),
hintText: 'Enter your email address',
hintStyle: TextStyle(fontSize: 15.0),
border: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.black))),
),
),
Padding(
padding: EdgeInsets.all(30.0),
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(10.0)),
color: Color(0XFFC20370),
onPressed: () {
setState(() {
if (_formKey.currentState.validate()) {
Navigator.of(context)
.pop(_popEditingController.text.toString());
}
});
},
child: Text('SUBMIT',
style: TextStyle(
color: Colors.white,
fontFamily: 'Work Sans',
fontSize: 18.0,
fontWeight: FontWeight.w600)),
))
]),
),
),
),
],
),
);
}
}
You can call _formKey.currentState.validate() in the onChanged method of the textfield

updating the text in the controller not working after converting the class from stateless to stateful

the code works fine when it's statelesswidget but after converting it to statefulwidget the textformfiled
stopped showing the text value from firestore.
when entering data the filed works just fine and the value stored in the firebase but when editing the the data the filed not showing the value to be edited and when entering the data in the filed new record is being stored in the firebase
class PostView extends StatefulWidget {
PostView({Key key, this.edittingPost}) : super(key: key);
final Post edittingPost;
#override
State<StatefulWidget> createState() {
return CreatePostView();
}
}
class CreatePostView extends State<PostView>{
final airlineController = TextEditingController();
final paxController = TextEditingController();
final infantController = TextEditingController();
final transitController = TextEditingController();
final dateController = TextEditingController();
Post edittingPost;
#override
Widget build(BuildContext context) {
return ViewModelBuilder<CreatePostViewModel>.reactive(
viewModelBuilder: () => CreatePostViewModel(),
onModelReady: (model) {
// update the text in the controller
airlineController.text = edittingPost?.airline ?? '';
paxController.text = edittingPost?.pax ?? '';
infantController.text = edittingPost?.infant ?? '';
transitController.text = edittingPost?.transit ?? '';
dateController.text = edittingPost?.date ?? '';
model.setEdittingPost(edittingPost);
},
builder: (context, model, child) => Scaffold(
floatingActionButton: FloatingActionButton(
child: !model.busy
? Icon(Icons.add)
: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(Colors.white),
),
onPressed: () {
if (!model.busy) {
model.addPost(date: dateController.text, airline: airlineController.text, pax: paxController.text,
infant: infantController.text, transit: transitController.text);
}
},
backgroundColor:
!model.busy ? Theme.of(context).primaryColor : Colors.grey[600],
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 30.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
verticalSpace(40),
Text(
'Create Post',
style: TextStyle(fontSize: 26),
),
verticalSpaceMedium,
Container(
alignment: Alignment.centerLeft,
decoration: kBoxDecorationStyle,
height: 55.0,
child: TextFormField(
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.calendar_today,
color: Colors.white,
),
hintText: 'Date of Flight',
hintStyle: kHintTextStyle),
controller: dateController,
onTap: () async{
DateTime date = DateTime(1900);
FocusScope.of(context).requestFocus(FocusNode());
date = await showDatePicker(
context: context,
initialDate:DateTime.now(),
firstDate:DateTime(1900),
lastDate: DateTime(2100));
dateController.text = date.toIso8601String();},),
),
verticalSpaceMedium,
Container(
alignment: Alignment.centerLeft,
decoration: kBoxDecorationStyle,
height: 55.0,
child: TextFormField(
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.airplanemode_active,
color: Colors.white,
),
hintText: 'Airline',
hintStyle: kHintTextStyle,
),
controller: airlineController,
)),
verticalSpaceMedium,
Container(
alignment: Alignment.centerLeft,
decoration: kBoxDecorationStyle,
height: 55.0,
child: TextFormField(
keyboardType: TextInputType.number,
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.airline_seat_recline_extra,
color: Colors.white,
),
hintText: 'Pax',
hintStyle: kHintTextStyle,
),
controller: paxController,
)),
verticalSpaceMedium,
Container(
alignment: Alignment.centerLeft,
decoration: kBoxDecorationStyle,
height: 55.0,
child: TextFormField(
keyboardType: TextInputType.number,
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.child_friendly,
color: Colors.white,
),
hintText: 'Infant',
hintStyle: kHintTextStyle,
),
controller: infantController,
)),
verticalSpaceMedium,
Container(
alignment: Alignment.centerLeft,
decoration: kBoxDecorationStyle,
height: 55.0,
child: TextFormField(
keyboardType: TextInputType.number,
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.transit_enterexit,
color: Colors.white,
),
hintText: 'Transit',
hintStyle: kHintTextStyle,
),
controller: transitController,
)),
],
),
),
)),
);
}
}
If you want see change text from textfromField - you have to use setState() where you will asssigned new value to variable.