Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
LoginUI
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: LoginPage(),
),
);
}
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage>
with SingleTickerProviderStateMixin {
/// Switch login/signUp section
TabController tabController;
TextEditingController emailController = TextEditingController();
TextEditingController passwordController = TextEditingController();
Future<String> tokenFuture;
Device device;
final List<Tab> tabLabel = <Tab>[
Tab(
child: Text(
'EXISTING',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
),
Tab(
child: Text(
'NEW',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
),
];
@override
void initState() {
super.initState();
tabController = TabController(length: 2, vsync: this);
tokenFuture = null;
}
@override
Widget build(BuildContext context) {
device = Device(
MediaQuery.of(context).size.height, MediaQuery.of(context).size.width);
return Scaffold(
body: SingleChildScrollView(
child: Stack(
alignment: Alignment.center,
children: [
/// Login Background
Container(
height: device.deviceHeight,
width: device.deviceWidth,
decoration: BoxDecoration(
image: DecorationImage(image: NetworkImage('https://i.imgur.com/xXHOcBl.jpg' ),fit: BoxFit.fill)
),
child: Container(
/// 2 Images at Corners
child: Stack(
children: [
Align(
alignment: Alignment(-1.1, -1.2),
child: Opacity(
opacity: 0.5,
child: Image.network(
'https://i.imgur.com/vtSAkUK.png',
height: device.isMobile ? 250 : 300,
width: device.isMobile ? 250 : 300,
)),
),
Align(
alignment: Alignment(-1.1, -1.2),
child: Image.network('https://i.imgur.com/vtSAkUK.png',
height: device.isMobile ? 200 : 250,
width: device.isMobile ? 200 : 250),
),
Align(
alignment: Alignment(1.1, 1.3),
child: Image.network('https://i.imgur.com/cndiNbG.png',
height: 300,
width: device.isMobile ? 150 : 300))
],
),
),
),
/// Body of Login, After Auth Checked
Container(
height: device.deviceHeight,
width: device.deviceWidth * 0.90,
child: body(),
),
],
),
),
);
}
Widget body() {
return Container(
child: Flex(
direction: device.isMobile ? Axis.vertical : Axis.horizontal,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
/// Logo Section UI
Flexible(
fit: FlexFit.loose,
flex: 1,
child: Container(child: logoDesign())),
/// Login Form UI
Flexible(
fit: FlexFit.loose,
flex: 2,
child: Container(
padding: const EdgeInsets.only(top: 20.0),
child: Container(
padding: const EdgeInsets.all(10.0),
width: device.isMobile
? device.deviceWidth * .90
: device.deviceWidth * .50,
child: loginForm(),
),
),
),
],
),
);
}
/// Login TAB UI
Column loginForm() {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
fit: FlexFit.loose,
flex: 1,
child: Container(
alignment: Alignment.center,
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(27.5),
border: Border.all(color: Colors.white)),
child: TabBar(
onTap: (i) {},
controller: tabController,
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(27.5),
gradient: LinearGradient(
begin: Alignment(1.0, 0.0),
end: Alignment(-1.0, 0.0),
colors: [const Color(0xffff470b), const Color(0xfffca10e)],
stops: [0.0, 1.0],
),
),
indicatorColor: Theme.of(context).primaryColor,
labelColor: Colors.white,
unselectedLabelColor: Colors.white,
tabs: tabLabel,
),
),
),
Padding(padding: EdgeInsets.only(top: 20)),
Flexible(
fit: FlexFit.loose,
flex: 2,
child: TabBarView(
controller: tabController,
children: <Widget>[loginWidget(), signUpWidget()]),
),
],
);
}
/// Logo Section UI
Widget logoDesign() {
double iconSize = device.isMobile ? 100 : 150;
return Container(
height: device.deviceHeight,
width: device.deviceWidth,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: iconSize,
width: iconSize,
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(device.deviceWidth * .12),
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 1.0,
spreadRadius: 2.0,
),
BoxShadow(
color: Colors.black26,
blurRadius: 8.0,
spreadRadius: 3.0,
),
],
),
child: CircleAvatar(
radius: iconSize,
backgroundColor: Colors.white,
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Image.network(
"https://i.imgur.com/z2MD5vV.png",
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Text(
"Let's get started now",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: device.isMobile ? 25 : 30,
color: Colors.white),
),
),
],
),
);
}
/// Login Form UI
Widget loginWidget() {
return Container(
alignment: Alignment.center,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
fit: FlexFit.loose,
flex: 1,
child: Container(
padding: const EdgeInsets.only(top: 10, right: 10, left: 10),
child: TextFormField(
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText: "Email",
labelStyle: TextStyle(color: Colors.white),
enabledBorder: const OutlineInputBorder(
borderSide:
const BorderSide(color: Colors.white, width: 0.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).accentColor, width: 0.0),
),
),
controller: emailController,
),
),
),
Flexible(
fit: FlexFit.loose,
flex: 1,
child: Container(
padding: const EdgeInsets.only(top: 20, right: 10, left: 10),
child: TextField(
style: TextStyle(color: Colors.white),
obscureText: true,
decoration: InputDecoration(
labelStyle: TextStyle(color: Colors.white),
labelText: "Password",
enabledBorder: const OutlineInputBorder(
borderSide:
const BorderSide(color: Colors.white, width: 0.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).accentColor, width: 0.0),
),
),
controller: passwordController,
),
),
),
Flexible(
fit: FlexFit.loose,
flex: 1,
child: GestureDetector(
onTap: () => null
,
child: Container(
width: 200,
height: 50,
margin: EdgeInsets.only(top: 20),
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(27.5),
gradient: LinearGradient(
begin: Alignment(1.0, 0.0),
end: Alignment(-1.0, 0.0),
colors: [
const Color(0xffff470b),
const Color(0xfffca10e)
],
stops: [0.0, 1.0],
),
),
padding: EdgeInsets.all(12),
// color: Theme.of(context).primaryColor,
child: Text('LOGIN',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold)),
),
),
),
),
Flexible(
fit: FlexFit.loose,
flex: 1,
child: GestureDetector(
onTap: () => resetPassword(),
child: Padding(
padding: EdgeInsets.all(15.0),
child: Text(
"Forget Password",
style: TextStyle(
decoration: TextDecoration.underline,
color: Colors.white),
),
),
),
)
],
),
);
}
/// SignUp Form UI
Widget signUpWidget() {
return Container(
alignment: Alignment.center,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
padding: const EdgeInsets.only(top: 10, right: 10, left: 10),
child: TextFormField(
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText: "Email",
labelStyle: TextStyle(color: Colors.white),
enabledBorder: const OutlineInputBorder(
borderSide: const BorderSide(color: Colors.white, width: 0.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).accentColor, width: 0.0),
),
),
controller: emailController,
),
),
Container(
padding: const EdgeInsets.only(top: 20, right: 10, left: 10),
child: TextField(
obscureText: true,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText: "Password",
labelStyle: TextStyle(color: Colors.white),
enabledBorder: const OutlineInputBorder(
borderSide: const BorderSide(color: Colors.white, width: 0.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).accentColor, width: 0.0),
),
),
controller: passwordController,
),
),
GestureDetector(
onTap: () => null
,
child: Container(
width: 200,
height: 50,
margin: EdgeInsets.only(top: 20),
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(27.5),
gradient: LinearGradient(
begin: Alignment(1.0, 0.0),
end: Alignment(-1.0, 0.0),
colors: [
AppConstants.orangeColor,
AppConstants.yellowColor
],
stops: [0.0, 1.0],
),
),
padding: EdgeInsets.all(12),
child: Text('SIGNUP',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold)),
),
),
),
Flexible(
fit: FlexFit.loose,
flex: 1,
child: Padding(
padding: EdgeInsets.all(15.0),
),
)
],
),
);
}
/// Forgot Password Dialog
void resetPassword() {
TextEditingController emailController = TextEditingController();
showDialog(
context: context,
child: AlertDialog(
actions: [
GestureDetector(
onTap: () {
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'SUBMIT',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Theme.of(context).primaryColor),
),
),
),
GestureDetector(
onTap: () => Navigator.pop(context),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'CANCEL',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Theme.of(context).primaryColor),
),
),
),
],
title: Text(
"Forgot Password?",
style: TextStyle(fontSize: 16),
),
content: Container(
height: 70,
child: TextFormField(
maxLines: 1,
decoration: InputDecoration(
labelText: "Email",
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: new BorderSide(),
),
),
controller: emailController,
),
),
));
}
}
class Device {
Device(this.deviceHeight, this.deviceWidth) {
isMobile = deviceWidth > deviceHeight ? false : true;
}
/// deviceWidth
double deviceWidth = 0.0;
/// deviceHeight
double deviceHeight = 0.0;
/// Is Platform Mobile
bool isMobile = true;
}
class AppConstants {
static Color orangeColor = const Color(0xffff470b);
static Color yellowColor = const Color(0xfffca10e);
static List socialLinks = [
{'name': 'youtube', "link": 'https://www.youtube.com/channel/UCP2-MYtIbBnlEcfTvJKo5Og?sub_confirmation=1', 'icon': 'assets/images/youtube.png'},
{'name': 'github', "link": 'https://www.github.com/theshivamlko', 'icon': 'assets/images/github.png'},
{'name': 'linkedin', "link": 'https://www.linkedin.com/in/theshivamlko', 'icon': 'assets/images/linkedin.png'},
{'name': 'twitter', "link": 'https://twitter.com/theshivamlko', 'icon': 'assets/images/twitter.png'},
{'name': 'website', "link": 'https://navoki.com', 'icon': 'assets/images/website.png'},
];
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.