Created
October 18, 2021 16:47
-
-
Save crazy-diya/c286b9e426af19514d260de74491dde0 to your computer and use it in GitHub Desktop.
Beautiful Sign in and Sign Up pages Flutter
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'dart:ui'; | |
import 'package:flutter/material.dart'; | |
import 'package:flutter/widgets.dart'; | |
import 'package:flutter_svg/flutter_svg.dart'; | |
import 'package:google_fonts/google_fonts.dart'; | |
import 'package:lala_live_ui/constatnt.dart'; | |
import 'package:lala_live_ui/signup.dart'; | |
class SignIn extends StatefulWidget { | |
const SignIn({Key? key}) : super(key: key); | |
@override | |
_SignInState createState() => _SignInState(); | |
} | |
class _SignInState extends State<SignIn> { | |
bool isCheck = false; | |
@override | |
Widget build(BuildContext context) { | |
double height = MediaQuery.of(context).size.height; | |
double width = MediaQuery.of(context).size.width; | |
return Scaffold( | |
resizeToAvoidBottomInset: false, | |
body: Container( | |
height: height, | |
width: width, | |
decoration: BoxDecoration( | |
image: DecorationImage( | |
fit: BoxFit.cover, | |
image: AssetImage( | |
'assets/png/signin_background.png', | |
), | |
), | |
), | |
child: SafeArea( | |
minimum: EdgeInsets.symmetric(horizontal: 20), | |
child: Stack( | |
children: [ | |
SingleChildScrollView( | |
child: Column( | |
children: [ | |
Padding( | |
padding: EdgeInsets.only( | |
top: height * 0.09, bottom: height * 0.1), | |
child: Align( | |
alignment: Alignment.center, | |
child: Image.asset( | |
"assets/png/logo.png", | |
width: width * 0.12, | |
height: width * 0.12, | |
), | |
), | |
), | |
Column( | |
children: [ | |
Text( | |
"Sign in", | |
style: GoogleFonts.montserrat( | |
fontSize: width * 0.048, | |
fontWeight: FontWeight.bold, | |
color: font_color, | |
), | |
), | |
Stack( | |
children: [ | |
Container( | |
height: height * 0.557, | |
child: Align( | |
alignment: Alignment.bottomCenter, | |
child: Image.asset( | |
"assets/png/signin_girl_image2.png", | |
height: height * 0.49), | |
), | |
), | |
ClipRRect( | |
child: BackdropFilter( | |
filter: ImageFilter.blur( | |
sigmaX: 5, | |
sigmaY: 5, | |
), | |
child: Container( | |
height: height * 0.557, | |
decoration: BoxDecoration( | |
borderRadius: BorderRadius.circular(25), | |
color: | |
shadow_container_color.withOpacity(0.07), | |
), | |
child: Padding( | |
padding: EdgeInsets.only( | |
top: height * 0.06, | |
left: width * 0.1, | |
right: width * 0.1, | |
), | |
child: SingleChildScrollView( | |
child: Column( | |
children: [ | |
TextFormField( | |
keyboardType: | |
TextInputType.emailAddress, | |
style: GoogleFonts.montserrat( | |
color: font_color, | |
fontWeight: FontWeight.w300, | |
fontSize: 10, | |
), | |
decoration: InputDecoration( | |
hintText: "Email", | |
hintStyle: GoogleFonts.montserrat( | |
color: font_color.withOpacity(0.7), | |
fontWeight: FontWeight.w400, | |
fontSize: 10, | |
), | |
isDense: true, | |
contentPadding: | |
EdgeInsets.only(bottom: 2), | |
enabledBorder: UnderlineInputBorder( | |
borderSide: BorderSide( | |
color: Colors.white | |
.withOpacity(0.8)), | |
), | |
focusedBorder: UnderlineInputBorder( | |
borderSide: BorderSide( | |
color: Colors.white | |
.withOpacity(0.8)), | |
), | |
), | |
cursorColor: Colors.white, | |
), | |
SizedBox( | |
height: height * 0.045, | |
), | |
TextFormField( | |
keyboardType: TextInputType.text, | |
obscureText: true, | |
style: GoogleFonts.montserrat( | |
color: font_color, | |
fontWeight: FontWeight.w300, | |
fontSize: 10, | |
), | |
decoration: InputDecoration( | |
hintText: "Password", | |
hintStyle: GoogleFonts.montserrat( | |
color: font_color.withOpacity(0.7), | |
fontWeight: FontWeight.w400, | |
fontSize: 10, | |
), | |
suffixIcon: SvgPicture.asset( | |
"assets/svg/view.svg"), | |
suffixIconConstraints: | |
BoxConstraints.expand( | |
height: 12, width: 12), | |
isDense: true, | |
contentPadding: | |
EdgeInsets.only(bottom: 2), | |
enabledBorder: UnderlineInputBorder( | |
borderSide: BorderSide( | |
color: Colors.white | |
.withOpacity(0.8)), | |
), | |
focusedBorder: UnderlineInputBorder( | |
borderSide: BorderSide( | |
color: Colors.white | |
.withOpacity(0.8)), | |
), | |
), | |
cursorColor: Colors.white, | |
), | |
SizedBox( | |
height: height * 0.007, | |
), | |
Align( | |
alignment: Alignment.centerRight, | |
child: Text( | |
"Forgot password", | |
style: GoogleFonts.montserrat( | |
color: font_color, | |
fontWeight: FontWeight.w500, | |
fontSize: 8.5, | |
), | |
), | |
), | |
Align( | |
alignment: Alignment.centerLeft, | |
child: Row( | |
children: [ | |
Theme( | |
data: Theme.of(context).copyWith( | |
unselectedWidgetColor: | |
Colors.white, | |
), | |
child: SizedBox( | |
height: 10, | |
width: 15, | |
child: Transform.scale( | |
scale: 0.7, | |
child: Checkbox( | |
materialTapTargetSize: | |
MaterialTapTargetSize | |
.shrinkWrap, | |
checkColor: Colors.black, | |
activeColor: Colors.white, | |
fillColor: MaterialStateProperty.all(Colors.white), | |
value: isCheck, | |
onChanged: (value) { | |
setState(() { | |
isCheck = !isCheck; | |
}); | |
}), | |
), | |
), | |
), | |
SizedBox( | |
width: 5, | |
), | |
Text( | |
"Remember me", | |
style: GoogleFonts.montserrat( | |
color: font_color, | |
fontWeight: FontWeight.w500, | |
fontSize: 8.5, | |
), | |
) | |
], | |
), | |
), | |
SizedBox( | |
height: height * 0.026, | |
), | |
SizedBox( | |
height: 38, | |
child: ElevatedButton( | |
onPressed: () {}, | |
child: Wrap( | |
children: [ | |
Padding( | |
padding: | |
const EdgeInsets.symmetric( | |
horizontal: 18), | |
child: Text( | |
"Log in", | |
textAlign: TextAlign.center, | |
style: GoogleFonts.montserrat( | |
color: font_color, | |
fontWeight: FontWeight.w500, | |
fontSize: 12.5, | |
), | |
), | |
), | |
], | |
), | |
style: ElevatedButton.styleFrom( | |
primary: shadow_container_color | |
.withOpacity(0.25), | |
shape: RoundedRectangleBorder( | |
borderRadius: | |
BorderRadius.circular(25), | |
), | |
), | |
), | |
), | |
Padding( | |
padding: EdgeInsets.only( | |
top: height * 0.026, | |
bottom: height * 0.026, | |
), | |
child: Text( | |
"OR", | |
style: GoogleFonts.montserrat( | |
color: font_color, | |
fontWeight: FontWeight.w400, | |
fontSize: 8, | |
), | |
), | |
), | |
SizedBox( | |
height: 38, | |
child: ElevatedButton( | |
clipBehavior: | |
Clip.antiAliasWithSaveLayer, | |
onPressed: () {}, | |
child: Wrap( | |
children: [ | |
SvgPicture.asset( | |
"assets/svg/google-plus.svg", | |
width: 14, | |
height: 14, | |
), | |
SizedBox( | |
width: 5, | |
), | |
Text( | |
"Sign in with Google", | |
textAlign: TextAlign.center, | |
style: GoogleFonts.montserrat( | |
color: font_color, | |
fontWeight: FontWeight.w500, | |
fontSize: 11, | |
), | |
), | |
SizedBox( | |
width: 18, | |
), | |
], | |
), | |
style: ElevatedButton.styleFrom( | |
primary: shadow_container_color | |
.withOpacity(0.25), | |
shape: RoundedRectangleBorder( | |
borderRadius: | |
BorderRadius.circular(25), | |
), | |
), | |
), | |
), | |
SizedBox( | |
height: 5, | |
), | |
SizedBox( | |
height: 38, | |
child: ElevatedButton( | |
onPressed: () {}, | |
child: Wrap( | |
children: [ | |
SvgPicture.asset( | |
"assets/svg/apple.svg", | |
width: 14, | |
height: 14, | |
), | |
SizedBox( | |
width: 15, | |
), | |
Text( | |
"Sign in with Apple ID", | |
textAlign: TextAlign.center, | |
style: GoogleFonts.montserrat( | |
color: font_color, | |
fontWeight: FontWeight.w500, | |
fontSize: 11, | |
), | |
), | |
SizedBox( | |
width: 10, | |
) | |
], | |
), | |
style: ElevatedButton.styleFrom( | |
primary: shadow_container_color | |
.withOpacity(0.25), | |
shape: RoundedRectangleBorder( | |
borderRadius: | |
BorderRadius.circular(25), | |
), | |
), | |
), | |
), | |
Padding( | |
padding: EdgeInsets.only(top: height * 0.04), | |
child: Row( | |
mainAxisAlignment: | |
MainAxisAlignment.center, | |
crossAxisAlignment: | |
CrossAxisAlignment.end, | |
children: [ | |
Text( | |
"Don't have an account? ", | |
style: GoogleFonts.montserrat( | |
color: font_color, | |
fontWeight: FontWeight.w500, | |
fontSize: 8, | |
), | |
), | |
GestureDetector( | |
onTap: ()=> Navigator.of(context).push(MaterialPageRoute(builder: (context) => SignUp(),)), | |
child: Text( | |
"Sign up", | |
style: GoogleFonts.montserrat( | |
color: font_color, | |
fontWeight: FontWeight.w700, | |
fontSize: 10, | |
decoration: TextDecoration.underline, | |
decorationStyle: TextDecorationStyle.solid, | |
decorationColor: Colors.white, | |
decorationThickness: 2.5, | |
), | |
), | |
), | |
], | |
), | |
), | |
], | |
), | |
), | |
), | |
), | |
), | |
), | |
], | |
), | |
Padding( | |
padding: EdgeInsets.only(top: height * 0.048,bottom: height * 0.048,), | |
child: Text("Privacy Policy",style: GoogleFonts.montserrat( | |
fontSize: 8, | |
fontWeight: FontWeight.w500, | |
color: font_color, | |
),), | |
) | |
], | |
), | |
], | |
), | |
), | |
], | |
), | |
), | |
), | |
); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'dart:ui'; | |
import 'package:flutter/material.dart'; | |
import 'package:flutter_svg/flutter_svg.dart'; | |
import 'package:google_fonts/google_fonts.dart'; | |
import 'constatnt.dart'; | |
class SignUp extends StatefulWidget { | |
const SignUp({Key? key}) : super(key: key); | |
@override | |
_SignUpState createState() => _SignUpState(); | |
} | |
class _SignUpState extends State<SignUp> { | |
@override | |
Widget build(BuildContext context) { | |
double height = MediaQuery.of(context).size.height; | |
double width = MediaQuery.of(context).size.width; | |
return Scaffold( | |
resizeToAvoidBottomInset: false, | |
body: Container( | |
height: height, | |
width: width, | |
decoration: BoxDecoration( | |
image: DecorationImage( | |
fit: BoxFit.cover, | |
image: AssetImage( | |
'assets/png/signin_background.png', | |
), | |
), | |
), | |
child: SafeArea( | |
minimum: EdgeInsets.symmetric(horizontal: 20), | |
child: Stack( | |
children: [ | |
SingleChildScrollView( | |
child: Column( | |
children: [ | |
Padding( | |
padding: EdgeInsets.only( | |
top: height * 0.09, bottom: height * 0.1), | |
child: Align( | |
alignment: Alignment.center, | |
child: Image.asset( | |
"assets/png/logo.png", | |
width: width * 0.12, | |
height: width * 0.12, | |
), | |
), | |
), | |
Column( | |
children: [ | |
Text( | |
"Sign up", | |
style: GoogleFonts.montserrat( | |
fontSize: width * 0.048, | |
fontWeight: FontWeight.bold, | |
color: font_color, | |
), | |
), | |
Stack( | |
children: [ | |
Container( | |
height: height * 0.557, | |
child: Align( | |
alignment: Alignment.bottomCenter, | |
child: Image.asset( | |
"assets/png/signin_girl_image2.png", | |
height: height * 0.49), | |
), | |
), | |
ClipRRect( | |
child: BackdropFilter( | |
filter: ImageFilter.blur( | |
sigmaX: 5, | |
sigmaY: 5, | |
), | |
child: Container( | |
height: height * 0.557, | |
decoration: BoxDecoration( | |
borderRadius: BorderRadius.circular(25), | |
color: | |
shadow_container_color.withOpacity(0.07), | |
), | |
child: Padding( | |
padding: EdgeInsets.only( | |
top: height * 0.06, | |
left: width * 0.1, | |
right: width * 0.1, | |
), | |
child: SingleChildScrollView( | |
child: Column( | |
children: [ | |
TextFormField( | |
keyboardType: | |
TextInputType.emailAddress, | |
style: GoogleFonts.montserrat( | |
color: font_color, | |
fontWeight: FontWeight.w300, | |
fontSize: 10, | |
), | |
decoration: InputDecoration( | |
hintText: "Username", | |
hintStyle: GoogleFonts.montserrat( | |
color: font_color.withOpacity(0.7), | |
fontWeight: FontWeight.w400, | |
fontSize: 10, | |
), | |
isDense: true, | |
contentPadding: | |
EdgeInsets.only(bottom: 2), | |
enabledBorder: UnderlineInputBorder( | |
borderSide: BorderSide( | |
color: Colors.white | |
.withOpacity(0.8)), | |
), | |
focusedBorder: UnderlineInputBorder( | |
borderSide: BorderSide( | |
color: Colors.white | |
.withOpacity(0.8)), | |
), | |
), | |
cursorColor: Colors.white, | |
), | |
SizedBox( | |
height: height * 0.045, | |
), | |
TextFormField( | |
keyboardType: | |
TextInputType.emailAddress, | |
style: GoogleFonts.montserrat( | |
color: font_color, | |
fontWeight: FontWeight.w300, | |
fontSize: 10, | |
), | |
decoration: InputDecoration( | |
hintText: "Email", | |
hintStyle: GoogleFonts.montserrat( | |
color: font_color.withOpacity(0.7), | |
fontWeight: FontWeight.w400, | |
fontSize: 10, | |
), | |
isDense: true, | |
contentPadding: | |
EdgeInsets.only(bottom: 2), | |
enabledBorder: UnderlineInputBorder( | |
borderSide: BorderSide( | |
color: Colors.white | |
.withOpacity(0.8)), | |
), | |
focusedBorder: UnderlineInputBorder( | |
borderSide: BorderSide( | |
color: Colors.white | |
.withOpacity(0.8)), | |
), | |
), | |
cursorColor: Colors.white, | |
), | |
SizedBox( | |
height: height * 0.045, | |
), | |
TextFormField( | |
keyboardType: TextInputType.text, | |
obscureText: true, | |
style: GoogleFonts.montserrat( | |
color: font_color, | |
fontWeight: FontWeight.w300, | |
fontSize: 10, | |
), | |
decoration: InputDecoration( | |
hintText: "Password", | |
hintStyle: GoogleFonts.montserrat( | |
color: font_color.withOpacity(0.7), | |
fontWeight: FontWeight.w400, | |
fontSize: 10, | |
), | |
suffixIcon: SvgPicture.asset( | |
"assets/svg/view.svg"), | |
suffixIconConstraints: | |
BoxConstraints.expand( | |
height: 12, width: 12), | |
isDense: true, | |
contentPadding: | |
EdgeInsets.only(bottom: 2), | |
enabledBorder: UnderlineInputBorder( | |
borderSide: BorderSide( | |
color: Colors.white | |
.withOpacity(0.8)), | |
), | |
focusedBorder: UnderlineInputBorder( | |
borderSide: BorderSide( | |
color: Colors.white | |
.withOpacity(0.8)), | |
), | |
), | |
cursorColor: Colors.white, | |
), | |
SizedBox( | |
height: height * 0.045, | |
), | |
TextFormField( | |
keyboardType: TextInputType.text, | |
obscureText: true, | |
style: GoogleFonts.montserrat( | |
color: font_color, | |
fontWeight: FontWeight.w300, | |
fontSize: 10, | |
), | |
decoration: InputDecoration( | |
hintText: "Confirm password", | |
hintStyle: GoogleFonts.montserrat( | |
color: font_color.withOpacity(0.7), | |
fontWeight: FontWeight.w400, | |
fontSize: 10, | |
), | |
suffixIcon: SvgPicture.asset( | |
"assets/svg/view.svg"), | |
suffixIconConstraints: | |
BoxConstraints.expand( | |
height: 12, width: 12), | |
isDense: true, | |
contentPadding: | |
EdgeInsets.only(bottom: 2), | |
enabledBorder: UnderlineInputBorder( | |
borderSide: BorderSide( | |
color: Colors.white | |
.withOpacity(0.8)), | |
), | |
focusedBorder: UnderlineInputBorder( | |
borderSide: BorderSide( | |
color: Colors.white | |
.withOpacity(0.8)), | |
), | |
), | |
cursorColor: Colors.white, | |
), | |
SizedBox( | |
height: height * 0.04, | |
), | |
SizedBox( | |
height: 38, | |
child: ElevatedButton( | |
onPressed: () {}, | |
child: Wrap( | |
children: [ | |
Padding( | |
padding: | |
const EdgeInsets.symmetric( | |
horizontal: 18), | |
child: Text( | |
"Sign up", | |
textAlign: TextAlign.center, | |
style: GoogleFonts.montserrat( | |
color: font_color, | |
fontWeight: FontWeight.w500, | |
fontSize: 12.5, | |
), | |
), | |
), | |
], | |
), | |
style: ElevatedButton.styleFrom( | |
primary: shadow_container_color | |
.withOpacity(0.25), | |
shape: RoundedRectangleBorder( | |
borderRadius: | |
BorderRadius.circular(25), | |
), | |
), | |
), | |
), | |
Padding( | |
padding: EdgeInsets.only( | |
top: height * 0.02, | |
bottom: height * 0.02, | |
), | |
child: Text( | |
"OR", | |
style: GoogleFonts.montserrat( | |
color: font_color, | |
fontWeight: FontWeight.w400, | |
fontSize: 8, | |
), | |
), | |
), | |
SizedBox( | |
height: 38, | |
child: ElevatedButton( | |
clipBehavior: | |
Clip.antiAliasWithSaveLayer, | |
onPressed: () {}, | |
child: Wrap( | |
children: [ | |
SvgPicture.asset( | |
"assets/svg/google-plus.svg", | |
width: 14, | |
height: 14, | |
), | |
SizedBox( | |
width: 5, | |
), | |
Text( | |
"Sign in with Google", | |
textAlign: TextAlign.center, | |
style: GoogleFonts.montserrat( | |
color: font_color, | |
fontWeight: FontWeight.w500, | |
fontSize: 11, | |
), | |
), | |
SizedBox( | |
width: 18, | |
), | |
], | |
), | |
style: ElevatedButton.styleFrom( | |
primary: shadow_container_color | |
.withOpacity(0.25), | |
shape: RoundedRectangleBorder( | |
borderRadius: | |
BorderRadius.circular(25), | |
), | |
), | |
), | |
), | |
SizedBox( | |
height: 5, | |
), | |
SizedBox( | |
height: 38, | |
child: ElevatedButton( | |
onPressed: () {}, | |
child: Wrap( | |
children: [ | |
SvgPicture.asset( | |
"assets/svg/apple.svg", | |
width: 14, | |
height: 14, | |
), | |
SizedBox( | |
width: 15, | |
), | |
Text( | |
"Sign in with Apple ID", | |
textAlign: TextAlign.center, | |
style: GoogleFonts.montserrat( | |
color: font_color, | |
fontWeight: FontWeight.w500, | |
fontSize: 11, | |
), | |
), | |
SizedBox( | |
width: 10, | |
) | |
], | |
), | |
style: ElevatedButton.styleFrom( | |
primary: shadow_container_color | |
.withOpacity(0.25), | |
shape: RoundedRectangleBorder( | |
borderRadius: | |
BorderRadius.circular(25), | |
), | |
), | |
), | |
), | |
], | |
), | |
), | |
), | |
), | |
), | |
), | |
], | |
), | |
Padding( | |
padding: EdgeInsets.only(top: height * 0.048,bottom: height * 0.048,), | |
child: Text("Privacy Policy",style: GoogleFonts.montserrat( | |
fontSize: 8, | |
fontWeight: FontWeight.w500, | |
color: font_color, | |
),), | |
) | |
], | |
), | |
], | |
), | |
), | |
], | |
), | |
), | |
), | |
); | |
} | |
} |
Author
crazy-diya
commented
Oct 18, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment