Login Flutter
Apr 29, 2020
Add Comment
Main.dart
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'src/HalamanAwal.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
final textTheme = Theme.of(context).textTheme;
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
textTheme: GoogleFonts.latoTextTheme(textTheme).copyWith(
body1: GoogleFonts.montserrat(textStyle: textTheme.body1),
),
),
debugShowCheckedModeBanner: false,
home: WelcomePage(),
);
}
}
import 'package:flutter/material.dart';
import 'package:login_sigup/src/login.dart';
import 'package:google_fonts/google_fonts.dart';
class WelcomePage extends StatefulWidget {
WelcomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_WelcomePageState createState() => _WelcomePageState();
}
class _WelcomePageState extends State<WelcomePage> {
Widget _submitButton() {
return InkWell(
onTap: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => LoginPage()));
},
child: Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.symmetric(vertical: 10),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
border: Border.all(color: Colors.white, width: 2),
),
child: Text(
'Star',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
);
}
Widget _title() {
return RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: 'F',
style: GoogleFonts.portLligatSans(
textStyle: Theme.of(context).textTheme.display1,
fontSize: 50,
fontWeight: FontWeight.w700,
color: Colors.white,
),
children: [
TextSpan(
text: 'uTu',
style: TextStyle(color: Colors.black, fontSize: 40),
),
TextSpan(
text: 're',
style: TextStyle(color: Colors.white, fontSize: 40),
),
]),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 120),
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey.shade200,
offset: Offset(2, 4),
blurRadius: 5,
spreadRadius: 2)
],
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xff0D47A1), Color(0xFF6CA8F1)])),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_title(),
SizedBox(
height: 30,
),
_submitButton(),
SizedBox(
height: 12,
),
],
),
),
),
);
}
}
Login.dart
import 'package:flutter/material.dart';
import 'package:login_sigup/src/register.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:login_sigup/utilities/constants.dart';
import 'package:flutter/services.dart';
class LoginPage extends StatefulWidget {
LoginPage({Key key, this.title}) : super(key: key);
final String title;
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
Widget _backButton() {
return InkWell(
onTap: () {
Navigator.pop(context);
},
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 0, top: 10, bottom: 10),
child: Icon(Icons.keyboard_arrow_left, color: Colors.black),
),
Text('Back',
style: TextStyle(fontSize: 12, fontWeight: FontWeight.w500))
],
),
),
);
}
Widget _submitButton() {
return Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.symmetric(vertical: 15),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.blue.shade200,
offset: Offset(2, 4),
blurRadius: 5,
spreadRadius: 2)
],
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Color(0xff0D47A1), Color(0xFF6CA8F1)])),
child: Text(
'Login',
style: TextStyle(fontSize: 20, color: Colors.white),
),
);
}
Widget _createAccountLabel() {
return Container(
margin: EdgeInsets.symmetric(vertical: 20),
alignment: Alignment.bottomCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Don\'t have an account ?',
style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600),
),
SizedBox(
width: 10,
),
InkWell(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => SignUpPage()));
},
child: Text(
'Register',
style: TextStyle(
color: Color(0xffffffff),
fontSize: 15,
fontWeight: FontWeight.w600),
),
)
],
),
);
}
Widget _title() {
return RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: 'L',
style: GoogleFonts.portLligatSans(
textStyle: Theme.of(context).textTheme.display1,
fontSize: 50,
fontWeight: FontWeight.w700,
color: Color(0xffffffff),
),
children: [
TextSpan(
text: 'og',
style: TextStyle(color: Colors.white, fontSize: 40),
),
TextSpan(
text: 'in',
style: TextStyle(color: Color(0xffffffff), fontSize: 40),
),
]),
);
}
Widget _buildEmailTF() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Email',
style: kLabelStyle,
),
SizedBox(height: 10.0),
Container(
alignment: Alignment.centerLeft,
decoration: kBoxDecorationStyle,
height: 60.0,
child: TextField(
keyboardType: TextInputType.emailAddress,
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.email,
color: Colors.white,
),
hintText: 'Enter your Email',
hintStyle: kHintTextStyle,
),
),
),
],
);
}
Widget _buildPasswordTF() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Password',
style: kLabelStyle,
),
SizedBox(height: 10.0),
Container(
alignment: Alignment.centerLeft,
decoration: kBoxDecorationStyle,
height: 60.0,
child: TextField(
obscureText: true,
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.lock,
color: Colors.white,
),
hintText: 'Enter your Password',
hintStyle: kHintTextStyle,
),
),
),
],
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
child: Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xFF73AEF5),
Color(0xFF61A4F1),
Color(0xFF478DE0),
Color(0xFF398AE5),
],
stops: [0.1, 0.4, 0.7, 0.9],
),
),
),
Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 3,
child: SizedBox(),
),
_title(),
SizedBox(
height: 50,
),
_buildEmailTF(),
SizedBox(
height: 5,
),
_buildPasswordTF(),
SizedBox(
height: 20,
),
_submitButton(),
Container(
padding: EdgeInsets.symmetric(vertical: 10),
alignment: Alignment.centerRight,
child: Text('Forgot Password ?',
style:
TextStyle(fontSize: 14, fontWeight: FontWeight.w500)),
),
Expanded(
flex: 2,
child: SizedBox(),
),
],
),
),
Align(
alignment: Alignment.bottomCenter,
child: _createAccountLabel(),
),
Positioned(top: 40, left: 0, child: _backButton()),
],
),
)));
}
}
Register.dart
import 'package:flutter/material.dart';
import 'package:login_sigup/src/login.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:login_sigup/utilities/constants.dart';
class SignUpPage extends StatefulWidget {
SignUpPage({Key key, this.title}) : super(key: key);
final String title;
@override
_SignUpPageState createState() => _SignUpPageState();
}
class _SignUpPageState extends State<SignUpPage> {
Widget _backButton() {
return InkWell(
onTap: () {
Navigator.pop(context);
},
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 0, top: 10, bottom: 10),
child: Icon(Icons.keyboard_arrow_left, color: Colors.black),
),
Text('Back',
style: TextStyle(fontSize: 12, fontWeight: FontWeight.w500))
],
),
),
);
}
Widget _entryField(String title, {bool isPassword = false}) {
return Container(
margin: EdgeInsets.symmetric(vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
title,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
),
SizedBox(
height: 10,
),
TextField(
obscureText: isPassword,
decoration: InputDecoration(
border: InputBorder.none,
fillColor: Color(0xfff3f3f4),
filled: true))
],
),
);
}
Widget _submitButton() {
return Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.symmetric(vertical: 15),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.blue.shade200,
offset: Offset(2, 4),
blurRadius: 5,
spreadRadius: 2)
],
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Color(0xff0D47A1), Color(0xFF6CA8F1)])),
child: Text(
'Register Now',
style: TextStyle(fontSize: 20, color: Colors.white),
),
);
}
Widget _loginAccountLabel() {
return Container(
margin: EdgeInsets.symmetric(vertical: 20),
alignment: Alignment.bottomCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Already have an account ?',
style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600),
),
SizedBox(
width: 10,
),
InkWell(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => LoginPage()));
},
child: Text(
'Login',
style: TextStyle(
color: Color(0xffffffff),
fontSize: 15,
fontWeight: FontWeight.w600),
),
)
],
),
);
}
Widget _title() {
return RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: 'R',
style: GoogleFonts.portLligatSans(
textStyle: Theme.of(context).textTheme.display1,
fontSize: 50,
fontWeight: FontWeight.w700,
color: Color(0xffffffff),
),
children: [
TextSpan(
text: 'egis',
style: TextStyle(color: Colors.white, fontSize: 40),
),
TextSpan(
text: 'ter',
style: TextStyle(color: Color(0xffffffff), fontSize: 40),
),
]),
);
}
Widget _buildUsernameTF() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Username',
style: kLabelStyle,
),
SizedBox(height: 10.0),
Container(
alignment: Alignment.centerLeft,
decoration: kBoxDecorationStyle,
height: 60.0,
child: TextField(
keyboardType: TextInputType.emailAddress,
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.supervised_user_circle,
color: Colors.white,
),
hintText: 'Enter your name',
hintStyle: kHintTextStyle,
),
),
),
],
);
}
Widget _buildEmailTF() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Email',
style: kLabelStyle,
),
SizedBox(height: 10.0),
Container(
alignment: Alignment.centerLeft,
decoration: kBoxDecorationStyle,
height: 60.0,
child: TextField(
keyboardType: TextInputType.emailAddress,
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.email,
color: Colors.white,
),
hintText: 'Enter your Email',
hintStyle: kHintTextStyle,
),
),
),
],
);
}
Widget _buildPasswordTF() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Password',
style: kLabelStyle,
),
SizedBox(height: 10.0),
Container(
alignment: Alignment.centerLeft,
decoration: kBoxDecorationStyle,
height: 60.0,
child: TextField(
obscureText: true,
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.lock,
color: Colors.white,
),
hintText: 'Enter your Password',
hintStyle: kHintTextStyle,
),
),
),
],
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
child: Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xFF73AEF5),
Color(0xFF61A4F1),
Color(0xFF478DE0),
Color(0xFF398AE5),
],
stops: [0.1, 0.4, 0.7, 0.9],
),
),
),
Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 3,
child: SizedBox(),
),
_title(),
SizedBox(
height: 50,
),
_buildUsernameTF(),
_buildEmailTF(),
_buildPasswordTF(),
SizedBox(
height: 20,
),
_submitButton(),
Expanded(
flex: 2,
child: SizedBox(),
)
],
),
),
Align(
alignment: Alignment.bottomCenter,
child: _loginAccountLabel(),
),
Positioned(top: 40, left: 0, child: _backButton()),
],
),
)));
}
}
constrans.dart
import 'package:flutter/material.dart';
final kHintTextStyle = TextStyle(
color: Colors.white54,
fontFamily: 'OpenSans',
);
final kLabelStyle = TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: 'OpenSans',
);
final kBoxDecorationStyle = BoxDecoration(
color: Color(0xFF6CA8F1),
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 6.0,
offset: Offset(0, 2),
),
],
);
0 Response to "Login Flutter"
Post a Comment