LOGIN CREATE UI DESIGN PAGE
*First create appBar I given the title name (Login page) .
Sample code:
appBar: AppBar(
title: const Center(child: Text('Login Page')),
),*Next step is create body context I used to Widgets (Column,padding,TextFromField ,RaisedButton)
Sample Code:
* This is TextFromField Widgets.
1.InputDecration
2.PrefixIcon.
3.OutlineInputBorder
4.LabelText
5.hintText
*This TextFromField (labletext 'Enter the User name' )
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(15),
child: TextFormField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.mail),
border: OutlineInputBorder(),
labelText: "Enter the User name",
hintText: "User Name"),*This TextFromField (labletext 'Enter the Password name' )
child: TextFormField(
controller: _passwords,
obscureText: secure,
decoration: InputDecoration(
prefixIcon: Icon(Icons.lock),
suffixIcon: IconButton(
onPressed: () {
setState(() {
secure = !secure;
});
},
icon: Icon(
secure ? Icons.visibility_off : Icons.visibility),
),
border: OutlineInputBorder(),
labelText: "Enter the Password",
hintText: "Password"),RaisedButton(
textColor: Colors.white,
color: Colors.blue,
child: Text('Login'),
onPressed: () {}
),
LOGIN VALIDATOR
*Validator use to (Globalekey,From).
Validating user input is an essential part of app development. This process makes the app more secure and checks whether the information provided by the user is what we anticipate them to provide so as not to introduce bugs into our application. Flutter comes with a native way of validating user inputs using the Form and TextFormField widget.
In this tutorial I will show you how to validate user inputs in Flutter using
1.A validation mixin to contain validation logic.
2.A Form widget with a GlobalKey.
3.A TextFormField to collect user input and display validation errors.
4.A button to validate and submit the form.
Globlakey :
Globalkey<FromDtate> formkey = Globalkey();
body: Form(
key: formkey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(15),
child: TextFormField(
controller: _names,
decoration: InputDecoration(
prefixIcon: Icon(Icons.mail),
border: OutlineInputBorder(),
labelText: "Enter the User name",
hintText: "User Name"),
validator: (value) {
if (value!.isEmpty) {
return 'Enter the user name';
}
for (User? log in Regestpage.userList) {
if (log?.user != _names.text) {
return 'wrong username';
} else {
return null;
}
}
},
),
),Padding(
padding: EdgeInsets.all(15),
child: TextFormField(
controller: _passwords,
obscureText: secure,
decoration: InputDecoration(
prefixIcon: Icon(Icons.lock),
suffixIcon: IconButton(
onPressed: () {
setState(() {
secure = !secure;
});
},
icon: Icon(
secure ? Icons.visibility_off : Icons.visibility),
),
border: OutlineInputBorder(),
labelText: "Enter the Password",
hintText: "Password"),
validator: (value) {
if (value!.isEmpty) {
return 'Enter the password';
} else if (value.length < 8) {
return 'password 8 digit only';
}
for (User? log in Regestpage.userList) {
if (log?.password != _passwords.text) {
return 'wrong password';
} else {
return null;
}
}
}),
),*RaisedButton
*I will Pressed the button show the validator Error messages.
User fill the TextFromField and pressed Sumbit button not show the error . give the correct user name and correctPassword.
it is validator.Wrong user and password Invalidator show the Errors message.
RaisedButton Sample:
RaisedButton(
textColor: Colors.white,
color: Colors.blue,
child: Text('Login'),
onPressed: () {
if (formkey.currentState!.validate()) {
bool isCorrect = login();
if (isCorrect) {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => Welcomepage(),
));
}
} else {
print("Invalid");
}
},
),