In this piece we will explore some ready-made solutions you can use to create login/signup screens in your flutter app. Use acquisition and authentication is of paramount importance in app development, and you need UI screens to achieve that. Login screens are used to authenticate users while registeration screens to register new users.
(a). Solution 1
The solution 1 comprises both login and signup screens. The screens have textfields for entering the user details as well as a button to initiate the process. There is also a button for Forgot Password feature.
Here's the demo:
Login
Signup
Step 1: Define Theme
The theme will contain basic colors for the app. Create a dart file known as theme.dart and add the following code:
import 'dart:ui';
import 'package:flutter/cupertino.dart';
class AppColours {
const AppColours();
static const Color colorStart = const Color(0xFF0d47a1);
static const Color colorEnd = const Color(0xFF1565c0);
static const buttonGradient = const LinearGradient(
colors: const [colorStart, colorEnd],
stops: const [0.0, 1.0],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
);
}
Step 2: Create Login Widget
The screen that will allow for authentication of users is the login widget. In flutter any UI component, including a page is a widget and can be encapsulated in it's own class.
login_widget.dart
import 'package:flutter/material.dart';
import 'package:flutter_login_signup/signup_widget.dart';
import 'package:flutter_login_signup/theme.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
//Widget for input
class LoginWidget extends StatefulWidget {
@override
LoginState createState() {
return LoginState();
}
}
class LoginState extends State<LoginWidget> {
final FocusNode focusEmail = FocusNode();
final FocusNode focusPassword = FocusNode();
final GlobalKey<ScaffoldState> _mainScaffoldKey =
new GlobalKey<ScaffoldState>();
final TextEditingController emailController = TextEditingController();
final TextEditingController passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black54,
key: _mainScaffoldKey,
body: Container(
padding: EdgeInsets.only(top: 30.0),
child: Column(
children: <Widget>[
Stack(
alignment: Alignment.topCenter,
overflow: Overflow.visible,
children: <Widget>[
Card(
elevation: 2.0,
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0)),
child: Container(
width: 360.00,
height: 440.00,
child: Column(
children: <Widget>[
Container(
child: new Image(
width: 60.0,
height: 60.0,
fit: BoxFit.none,
image: new AssetImage(
'assets/images/android_new_logo.jpg'))),
Padding(
padding: EdgeInsets.only(
top: 20.0,
bottom: 20.0,
left: 25.0,
right: 25.0),
child: TextField(
focusNode: focusEmail,
controller: emailController,
keyboardType: TextInputType.emailAddress,
style: TextStyle(
fontFamily: "SignikaSemiBold",
fontSize: 16.0,
color: Colors.black),
decoration: InputDecoration(
border: InputBorder.none,
icon: Icon(
FontAwesomeIcons.envelope,
color: Colors.black,
size: 22.0,
),
hintText: "Enter email",
hintStyle: TextStyle(
fontFamily: "SignikaSemiBold",
fontSize: 18.0)),
),
),
Container(
width: 250.0,
height: 1.0,
color: Colors.grey,
),
Padding(
padding: EdgeInsets.only(
top: 20.0,
bottom: 20.0,
left: 25.0,
right: 25.0),
child: TextField(
focusNode: focusPassword,
controller: passwordController,
style: TextStyle(
fontFamily: "SignikaSemiBold",
fontSize: 16.0,
color: Colors.black),
decoration: InputDecoration(
border: InputBorder.none,
icon: Icon(
FontAwesomeIcons.lock,
color: Colors.black,
size: 22.0,
),
hintText: "Enter password",
hintStyle: TextStyle(
fontFamily: "SignikaSemiBold",
fontSize: 18.0)),
),
),
Container(
width: 250.0,
height: 1.0,
color: Colors.grey,
),
Container(
margin: EdgeInsets.only(top: 60.0, bottom: 26.0),
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(5.0)),
boxShadow: <BoxShadow>[
BoxShadow(
color: AppColours.colorStart,
offset: Offset(1.0, 6.0),
blurRadius: 20.0),
BoxShadow(
color: AppColours.colorEnd,
offset: Offset(1.0, 6.0),
blurRadius: 20.0),
],
gradient: LinearGradient(
colors: [
AppColours.colorEnd,
AppColours.colorStart
],
begin: const FractionalOffset(0.2, 0.2),
end: const FractionalOffset(1.0, 1.0),
stops: [0.1, 1.0],
tileMode: TileMode.clamp)),
child: MaterialButton(
highlightColor: Colors.transparent,
splashColor: AppColours.colorEnd,
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 10.0, horizontal: 42.0),
child: Text(
"Login",
style: TextStyle(
fontFamily: "SignikaSemiBold",
color: Colors.white,
fontSize: 22.0),
),
),
onPressed: () => displaySnackBar("Login clicked"),
),
),
Container(
child: FlatButton(
child: Text(
"Forgot Password?",
style: TextStyle(
decoration: TextDecoration.underline,
color: Colors.black,
fontSize: 18.0,
fontFamily: "SignikaRegular"),
),
onPressed: () {
displaySnackBar("Forgot clicked");
},
),
)
],
),
),
),
],
),
Padding(
padding: EdgeInsets.only(top: 10.0),
child: FlatButton(
child: Text(
"Not have account?",
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontFamily: "SignikaRegular"),
),
onPressed: () {},
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
gradient: LinearGradient(
colors: [Colors.white, Colors.white],
begin: const FractionalOffset(0.2, 0.2),
end: const FractionalOffset(0.5, 0.5),
stops: [0.1, 0.5],
tileMode: TileMode.clamp)),
child: MaterialButton(
highlightColor: Colors.transparent,
splashColor: Colors.white70,
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 10.0, horizontal: 42.0),
child: Text(
"SignUp",
style: TextStyle(
fontFamily: "SignikaSemiBold",
color: Colors.black,
fontSize: 22.0),
),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SignUpWidget()));
},
),
),
Padding(
padding: EdgeInsets.only(top: 20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
decoration: BoxDecoration(
gradient: new LinearGradient(
colors: [
Colors.white10,
Colors.white,
],
begin: const FractionalOffset(0.0, 0.0),
end: const FractionalOffset(1.0, 1.0),
stops: [0.0, 1.0],
tileMode: TileMode.clamp),
),
width: 100.0,
height: 1.0,
),
Padding(
padding: EdgeInsets.only(left: 15.0, right: 15.0),
child: Text(
"OR",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.none,
fontSize: 16.0,
fontFamily: "WorkSansMedium"),
),
),
Container(
decoration: BoxDecoration(
gradient: new LinearGradient(
colors: [
Colors.white,
Colors.white10,
],
begin: const FractionalOffset(0.0, 0.0),
end: const FractionalOffset(1.0, 1.0),
stops: [0.0, 1.0],
tileMode: TileMode.clamp),
),
width: 100.0,
height: 1.0,
),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 10.0, right: 40.0),
child: GestureDetector(
onTap: () => displaySnackBar("Forgot clicked"),
child: Container(
padding: const EdgeInsets.all(15.0),
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: new Icon(
FontAwesomeIcons.facebookF,
color: Color(0xFF0084ff),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 10.0, right: 40.0),
child: GestureDetector(
onTap: () => displaySnackBar("Instagram clicked"),
child: Container(
padding: const EdgeInsets.all(15.0),
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: new Icon(
FontAwesomeIcons.instagram,
color: Color(0xFF0084ff),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 10.0, right: 40.0),
child: GestureDetector(
onTap: () => displaySnackBar("Github clicked"),
child: Container(
padding: const EdgeInsets.all(15.0),
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: new Icon(
FontAwesomeIcons.github,
color: Color(0xFF0084ff),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 10.0),
child: GestureDetector(
onTap: () => displaySnackBar("Google clicked"),
child: Container(
padding: const EdgeInsets.all(15.0),
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: new Icon(
FontAwesomeIcons.google,
color: Color(0xFF0084ff),
),
),
),
),
],
),
],
),
));
}
void displaySnackBar(String value) {
_mainScaffoldKey.currentState.showSnackBar(new SnackBar(
content: new Text(
value,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white, fontSize: 16.0, fontFamily: "SignikaRegular"),
),
backgroundColor: Colors.blue,
duration: Duration(seconds: 3),
));
}
}
Step 3: Create Signup Widget
Next you create the signup page using the following code:
signup_widget.dart
import 'package:flutter/material.dart';
import 'package:flutter_login_signup/theme.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
//Widget for input
class SignUpWidget extends StatefulWidget {
@override
SignUpState createState() {
return SignUpState();
}
}
class SignUpState extends State<SignUpWidget> {
final FocusNode focusEmail = FocusNode();
final FocusNode focusPassword = FocusNode();
final FocusNode focusName = FocusNode();
final FocusNode focusConfirmPassword = FocusNode();
final TextEditingController nameController = TextEditingController();
final TextEditingController emailController = TextEditingController();
final TextEditingController passwordController = TextEditingController();
final TextEditingController confirmPasswordController =
TextEditingController();
@override
Widget build(BuildContext context) {
return Center(
child: Container(
padding: EdgeInsets.only(top: 30.0),
child: Column(
children: <Widget>[
Stack(
alignment: Alignment.topCenter,
overflow: Overflow.visible,
children: <Widget>[
Card(
elevation: 2.0,
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0)),
child: Container(
width: 360.00,
height: 480.00,
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(
top: 20.0, bottom: 20.0, left: 25.0, right: 25.0),
child: TextField(
focusNode: focusName,
controller: nameController,
keyboardType: TextInputType.emailAddress,
style: TextStyle(
fontFamily: "SignikaSemiBold",
fontSize: 16.0,
color: Colors.black),
decoration: InputDecoration(
border: InputBorder.none,
icon: Icon(
FontAwesomeIcons.envelope,
color: Colors.black,
size: 22.0,
),
hintText: "Enter name",
hintStyle: TextStyle(
fontFamily: "SignikaSemiBold",
fontSize: 18.0)),
),
),
Container(
width: 250.0,
height: 1.0,
color: Colors.grey,
),
Padding(
padding: EdgeInsets.only(
top: 20.0, bottom: 20.0, left: 25.0, right: 25.0),
child: TextField(
focusNode: focusEmail,
controller: emailController,
keyboardType: TextInputType.emailAddress,
style: TextStyle(
fontFamily: "SignikaSemiBold",
fontSize: 16.0,
color: Colors.black),
decoration: InputDecoration(
border: InputBorder.none,
icon: Icon(
FontAwesomeIcons.envelope,
color: Colors.black,
size: 22.0,
),
hintText: "Enter email",
hintStyle: TextStyle(
fontFamily: "SignikaSemiBold",
fontSize: 18.0)),
),
),
Container(
width: 250.0,
height: 1.0,
color: Colors.grey,
),
Padding(
padding: EdgeInsets.only(
top: 20.0, bottom: 20.0, left: 25.0, right: 25.0),
child: TextField(
focusNode: focusPassword,
controller: passwordController,
style: TextStyle(
fontFamily: "SignikaSemiBold",
fontSize: 16.0,
color: Colors.black),
decoration: InputDecoration(
border: InputBorder.none,
icon: Icon(
FontAwesomeIcons.lock,
color: Colors.black,
size: 22.0,
),
hintText: "Enter password",
hintStyle: TextStyle(
fontFamily: "SignikaSemiBold",
fontSize: 18.0)),
),
),
Container(
width: 250.0,
height: 1.0,
color: Colors.grey,
),
Padding(
padding: EdgeInsets.only(
top: 20.0, bottom: 20.0, left: 25.0, right: 25.0),
child: TextField(
focusNode: focusPassword,
controller: passwordController,
style: TextStyle(
fontFamily: "SignikaSemiBold",
fontSize: 16.0,
color: Colors.black),
decoration: InputDecoration(
border: InputBorder.none,
icon: Icon(
FontAwesomeIcons.lock,
color: Colors.black,
size: 22.0,
),
hintText: "Confirm password",
hintStyle: TextStyle(
fontFamily: "SignikaSemiBold",
fontSize: 18.0)),
),
),
Container(
width: 250.0,
height: 1.0,
color: Colors.grey,
),
Container(
margin: EdgeInsets.only(top: 40.0),
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(5.0)),
boxShadow: <BoxShadow>[
BoxShadow(
color: AppColours.colorStart,
offset: Offset(1.0, 6.0),
blurRadius: 20.0),
BoxShadow(
color: AppColours.colorEnd,
offset: Offset(1.0, 6.0),
blurRadius: 20.0),
],
gradient: LinearGradient(
colors: [
AppColours.colorEnd,
AppColours.colorStart
],
begin: const FractionalOffset(0.2, 0.2),
end: const FractionalOffset(1.0, 1.0),
stops: [0.1, 1.0],
tileMode: TileMode.clamp)),
child: MaterialButton(
highlightColor: Colors.transparent,
splashColor: AppColours.colorEnd,
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 10.0, horizontal: 42.0),
child: Text(
"Sign Up",
style: TextStyle(
fontFamily: "SignikaSemiBold",
color: Colors.white,
fontSize: 22.0),
),
),
onPressed: () {
Navigator.pop(context);
},
),
)
],
),
),
),
],
),
Padding(
padding: EdgeInsets.only(top: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
decoration: BoxDecoration(
gradient: new LinearGradient(
colors: [
Colors.white10,
Colors.white,
],
begin: const FractionalOffset(0.0, 0.0),
end: const FractionalOffset(1.0, 1.0),
stops: [0.0, 1.0],
tileMode: TileMode.clamp),
),
width: 100.0,
height: 1.0,
),
Padding(
padding: EdgeInsets.only(left: 15.0, right: 15.0),
child: Text(
"OR",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.none,
fontSize: 16.0,
fontFamily: "WorkSansMedium"),
),
),
Container(
decoration: BoxDecoration(
gradient: new LinearGradient(
colors: [
Colors.white,
Colors.white10,
],
begin: const FractionalOffset(0.0, 0.0),
end: const FractionalOffset(1.0, 1.0),
stops: [0.0, 1.0],
tileMode: TileMode.clamp),
),
width: 100.0,
height: 1.0,
),
],
),
),
Padding(
padding: EdgeInsets.only(top: 10.0),
child: FlatButton(
child: Text(
"Sign up with",
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontFamily: "SignikaRegular"),
),
onPressed: () {},
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 10.0, right: 40.0),
child: GestureDetector(
onTap: () => {},
child: Container(
padding: const EdgeInsets.all(15.0),
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: new Icon(
FontAwesomeIcons.facebookF,
color: Color(0xFF0084ff),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 10.0, right: 40.0),
child: GestureDetector(
onTap: () => {},
child: Container(
padding: const EdgeInsets.all(15.0),
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: new Icon(
FontAwesomeIcons.instagram,
color: Color(0xFF0084ff),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 10.0, right: 40.0),
child: GestureDetector(
onTap: () => {},
child: Container(
padding: const EdgeInsets.all(15.0),
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: new Icon(
FontAwesomeIcons.github,
color: Color(0xFF0084ff),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 10.0),
child: GestureDetector(
onTap: () => {},
child: Container(
padding: const EdgeInsets.all(15.0),
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: new Icon(
FontAwesomeIcons.google,
color: Color(0xFF0084ff),
),
),
),
),
],
),
],
),
));
}
}
Step 4: main class
Lastly you create the class to contain main method which will be entry point of the app.
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_login_signup/login_widget.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Login sign up demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: LoginWidget(),
);
}
}
Reference
| No. | Link |
|---|---|
| 1. | Download code here |
| 2. | Browse code here |
| 3. | Folow project author here |
