Flutter: How to make a login in flutter - authentication

Question

[![Here is the button that the users will click][1]][1] How can I make and display a login form this is what I'm trying to do.
after a user clicked on the first button.
This is where I want to put the Login Form in the class SecondScreen.Also, I want to learn how to make a simple login form in Flutter
class SecondScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [Colors.amberAccent, Colors.red]),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center, // add Column
children: <Widget>[
Text('Welcome2',
style: TextStyle(
// your text
fontSize: 50.0,
fontWeight: FontWeight.bold,
color: Colors.white)),
RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Button'),
shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)),
color: Colors.white,
splashColor: Colors.blue,
textColor: Color(0xfffe67e22),
), // your button beneath text
],
),
),
),
);
}
}

Answer 1

For simple login form you you can do like this,
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_app_stack/color_utils.dart';
import 'package:flutter_app_stack/common_styles.dart';
import 'package:flutter_app_stack/raised_gradient_button.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: LoginScreen(),
);
}
}
class LoginScreen extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return _LoginScreenState();
}
}
class _LoginScreenState extends State<LoginScreen> {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
child: Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.40,
width: double.infinity,
decoration: BoxDecoration(gradient: ColorUtils.appBarGradient),
),
Align(
alignment: Alignment.topCenter,
child: Padding(
padding: const EdgeInsets.only(top: 80),
child: Text(
"Login",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w800,
fontSize: 19),
),
)),
Positioned(
top: 150,
left: 10,
right: 10,
child: LoginFormWidget(),
)
],
),
),
),
);
}
}
class LoginFormWidget extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _LoginFormWidgetState();
}
}
class _LoginFormWidgetState extends State<LoginFormWidget> {
final _formKey = GlobalKey<FormState>();
var _userEmailController = TextEditingController(text: "jm1#example.com");
var _userPasswordController = TextEditingController(text: "jay#123");
var _emailFocusNode = FocusNode();
var _passwordFocusNode = FocusNode();
bool _isPasswordVisible = true;
bool _autoValidate = false;
#override
Widget build(BuildContext context) {
return Form(
key: _formKey,
autovalidate: _autoValidate,
child: Column(
children: <Widget>[
Card(
elevation: 8,
child: Column(
children: <Widget>[
_buildLogo(),
_buildIntroText(),
_buildEmailField(context),
_buildPasswordField(context),
_buildForgotPasswordWidget(context),
_buildSignUpButton(context),
_buildLoginOptionText(),
_buildSocialLoginRow(context),
],
),
),
_buildSignUp(),
],
),
);
}
Widget _buildSocialLoginRow(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(right: 20, left: 20, bottom: 20),
child: Row(
children: <Widget>[
__buildFacebookButtonWidget(context),
__buildTwitterButtonWidget(context)
],
),
);
}
Widget __buildTwitterButtonWidget(BuildContext context) {
return Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: RaisedButton(
color: Color.fromRGBO(29, 161, 242, 1.0),
child: Image.asset(
"assets/images/ic_twitter.png",
width: 25,
height: 25,
),
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0))),
),
);
}
Widget __buildFacebookButtonWidget(BuildContext context) {
return Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: RaisedButton(
color: Color.fromRGBO(42, 82, 151, 1.0),
child: Image.asset(
"assets/images/ic_fb.png",
width: 35,
height: 35,
),
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0))),
),
);
}
Widget _buildLoginOptionText() {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Text(
"Or sign up with social account",
style: TextStyle(
fontSize: 14, color: Colors.black54, fontWeight: FontWeight.w600),
),
);
}
Widget _buildIntroText() {
return Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 5, bottom: 30),
child: Text(
"My Recipes",
style: TextStyle(
color: Colors.black54,
fontSize: 18.0,
fontWeight: FontWeight.bold),
),
),
],
);
}
Widget _buildLogo() {
return Padding(
padding: const EdgeInsets.only(top: 10),
child: Image.asset(
"assets/images/ic_launcher.png",
height: 100,
width: 100,
),
);
}
String _userNameValidation(String value) {
if (value.isEmpty) {
return "Please enter valid user name";
} else {
return null;
}
}
Widget _buildEmailField(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 5),
child: TextFormField(
controller: _userEmailController,
keyboardType: TextInputType.emailAddress,
textInputAction: TextInputAction.next,
onFieldSubmitted: (_) {
FocusScope.of(context).requestFocus(_passwordFocusNode);
},
validator: (value) => _emailValidation(value),
decoration: CommonStyles.textFormFieldStyle("Email", ""),
),
);
}
String _emailValidation(String value) {
bool emailValid =
RegExp(r"^[a-zA-Z0-9.]+#[a-zA-Z0-9]+\.[a-zA-Z]+").hasMatch(value);
if (!emailValid) {
return "Enter valid email address";
} else {
return null;
}
}
Widget _buildPasswordField(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 5),
child: TextFormField(
controller: _userPasswordController,
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
onFieldSubmitted: (_) {
FocusScope.of(context).requestFocus(_emailFocusNode);
},
validator: (value) => _userNameValidation(value),
obscureText: _isPasswordVisible,
decoration: InputDecoration(
labelText: "Password",
hintText: "",
labelStyle: TextStyle(color: Colors.black),
alignLabelWithHint: true,
contentPadding: EdgeInsets.symmetric(vertical: 5),
suffixIcon: IconButton(
icon: Icon(
_isPasswordVisible ? Icons.visibility_off : Icons.visibility,
color: Colors.black,
),
onPressed: () {
setState(() {
_isPasswordVisible = !_isPasswordVisible;
});
}),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.black, width: 2),
),
),
),
);
}
Widget _buildForgotPasswordWidget(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Align(
alignment: Alignment.centerRight,
child: FlatButton(
onPressed: () {},
child: Text(
'Forgot your password ?',
style:
TextStyle(color: Colors.black54, fontWeight: FontWeight.w500),
)),
),
);
}
Widget _buildSignUpButton(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 15.0),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 15.0),
width: double.infinity,
child: RaisedGradientButton(
child: Text(
"Login",
style: TextStyle(
color: Colors.white, fontSize: 18, fontWeight: FontWeight.w600),
),
onPressed: () {
_signUpProcess(context);
},
),
),
);
}
void _signUpProcess(BuildContext context) {
var validate = _formKey.currentState.validate();
if (validate) {
//Do login stuff
} else {
setState(() {
_autoValidate = true;
});
}
}
void _clearAllFields() {
setState(() {
_userEmailController = TextEditingController(text: "");
_userPasswordController = TextEditingController(text: "");
});
}
Widget _buildSignUp() {
return Padding(
padding: const EdgeInsets.only(top: 15),
child: RichText(
text: TextSpan(
style: DefaultTextStyle.of(context).style,
children: <TextSpan>[
TextSpan(
text: "Don't have an Account ? ",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
),
TextSpan(
text: 'Register',
style: TextStyle(
fontWeight: FontWeight.w800,
color: Colors.orange,
fontSize: 14),
),
],
),
),
);
}
}
color_utils.dart
import 'package:flutter/material.dart';
class ColorUtils {
static const Color primaryColor = Color(0xffEC9F05);
static const Color accentColor = Color(0xffFF4E00);
static const Color orangeGradientEnd = Color(0xfffc4a1a);
static const Color orangeGradientStart = Color(0xfff7b733);
static const Color themeGradientStart = Color(0xFF8E24AA);
static const Color themeGradientEnd = Color(0xFFFB8C00);
static const LinearGradient appBarGradient =
LinearGradient(colors: [themeGradientStart, themeGradientEnd]);
}
common_styles.dart
import 'package:flutter/material.dart';
class CommonStyles {
static textFormFieldStyle(String label, String hint) {
return InputDecoration(
labelText: label,
hintText: hint,
alignLabelWithHint:true,
contentPadding: EdgeInsets.symmetric(vertical: 5),
labelStyle: TextStyle(color: Colors.black),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
width: 2
),
),
);
}
}
raised_gradient_button.dart
import 'package:flutter/material.dart';
import 'package:flutter_app_stack/color_utils.dart';
class RaisedGradientButton extends StatelessWidget {
final Widget child;
final double width;
final double height;
final Function onPressed;
RaisedGradientButton({
Key key,
#required this.child,
this.width = double.infinity,
this.height = 40.0,
this.onPressed,
}) : super(key: key);
#override
Widget build(BuildContext context) {
Gradient _gradient = LinearGradient(
colors: [ColorUtils.themeGradientStart, ColorUtils.themeGradientEnd]);
return Container(
width: width,
height: height,
decoration: BoxDecoration(
borderRadius: new BorderRadius.all(Radius.circular(40.0)),
gradient: _gradient,
boxShadow: [
BoxShadow(
color: Colors.grey[500],
offset: Offset(0.0, 1.5),
blurRadius: 1.5,
),
]),
child: Material(
color: Colors.transparent,
child: InkWell(
borderRadius: new BorderRadius.all(Radius.circular(40.0)),
onTap: onPressed,
child: Center(
child: child,
)),
),
);
}
}

Answer 2

Simple Login page With Password Username Validation
import 'package:flutter/material.dart';
import 'SignUp.dart';
import 'Home.dart';
import 'package:fluttertoast/fluttertoast.dart';
class LoginScreen extends StatefulWidget {
#override
_Login createState() => _Login();
}
final unameController = TextEditingController();
final passController = TextEditingController();
String uname = "uname";
String pass = "pass";
class _Login extends State<LoginScreen> {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "Smple Login",
home: Scaffold(
resizeToAvoidBottomPadding: false,
body: Center(
child: Container(
height: 400,
width: 300,
child: Column(
children: [
Text("Login Here"),
TextField(
controller: unameController,
decoration: InputDecoration(
prefixIcon: Icon(Icons.mobile_friendly,),
hintText: "Username",
),
),
TextField(
controller: passController,
decoration: InputDecoration(
prefixIcon: Icon(Icons.keyboard,),
hintText: "PassWord",
),
),
Container(
alignment: Alignment.centerRight,
child: GestureDetector(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => SignUp()));
},
child: Text("Create Account?"),
)),
ElevatedButton(
child: Text("Submit"),
onPressed: () {
if (uname == unameController.text &&
pass == passController.text) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
Home(username: "Hello World from Login")));
} else {
Fluttertoast.showToast(
msg: "Invalid Username or Password");
unameController.text="";
passController.text="";
}
},
),
],
),
),
),
),
);
}
}