import 'package:flutter/material.dart';
import 'package:flutter/services.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 Login Screen',
debugShowCheckedModeBanner: false,
home: LoginScreen(),
);
}
}
class LoginScreen extends StatefulWidget {
@override
_LoginScreenState createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
bool _rememberMe = false;
Widget _Email() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Email', style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),),
SizedBox(height: 10.0),
Container(
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
color:Colors.deepPurple[200],
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 6.0,
offset: Offset(0, 3),
),
],
),
height: 60.0,
child: TextField(
keyboardType: TextInputType.emailAddress,
style: TextStyle(
color: Colors.white,
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.email,
color: Colors.white,
),
hintText: 'Enter your Email',
hintStyle: TextStyle(color: Colors.white54,),
),
),
),
],
);
}
Widget _Password() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Password', style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),),
SizedBox(height: 10.0),
Container(
alignment: Alignment.centerLeft,
decoration:BoxDecoration(
color:Colors.deepPurple[200],
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 6.0,
offset: Offset(0, 3),
),
],
),
height: 60.0,
child: TextField(
obscureText: true,
style: TextStyle(
color: Colors.white,
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.lock,
color: Colors.white,
),
hintText: 'Enter your Password',
hintStyle: TextStyle(color: Colors.white54,),
),
),
),
SizedBox(height: 20.0,),
],
);
}
Widget _RememberMeCheckbox() {
return Container(
height: 20.0,
child: Row(
children: <Widget>[
Theme(
data: ThemeData(unselectedWidgetColor: Colors.white),
child: Checkbox(
value: _rememberMe,
checkColor: Colors.green,
activeColor: Colors.white,
onChanged: (value) {
setState(() {
_rememberMe = value;
});
},
),
),
Text('Remember me', style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),),
],
),
);
}
Widget _LoginBtn() {
return Container(
padding: EdgeInsets.symmetric(vertical: 25.0),
width: double.infinity,
child: RaisedButton(
elevation: 5.0,
onPressed: () => print('Login Button Pressed'),
padding: EdgeInsets.all(15.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
color: Colors.white,
child: Text(
'LOGIN',
style: TextStyle(
color: Color(0xFF527DAA),
letterSpacing: 1.5,
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
),
),
);
}
Widget _SignInWithText() {
return Column(
children: <Widget>[
SizedBox(height: 10.0),
Text('Sign in with', style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),),
],
);
}
Widget _SocialBtn(Function onTap, AssetImage logo) {
return GestureDetector(
onTap: onTap,
child: Container(
height: 60.0,
width: 60.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black26,
offset: Offset(0, 2),
blurRadius: 6.0,
),
],
image: DecorationImage(
image: logo,
),
),
),
);
}
Widget _SocialBtnRow() {
return Padding(
padding: EdgeInsets.symmetric(vertical: 30.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
_SocialBtn(
() => print('Facebook'),
AssetImage(
'assets/images/facebook.jpg',
),
),
_SocialBtn(
() => print('Google'),
AssetImage(
'assets/images/google.jpg',
),
),
],
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFF9575CD), Color(0xFF9575CD), Color(0xFF9575CD), Color(0xFF9575CD),],
stops: [0.1, 0.4, 0.7, 0.9],
),
),
),
Container(
height: double.infinity,
child: SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
padding: EdgeInsets.symmetric(
horizontal: 40.0,
vertical: 120.0,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Sign In',
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 30.0),
_Email(),
SizedBox(height: 30.0,),
_Password(),
_RememberMeCheckbox(),
_LoginBtn(),
_SignInWithText(),
_SocialBtnRow(),
],
),
),
)
],
),
),
),
);
}
}