Skip to content

Instantly share code, notes, and snippets.

@crazy-diya

crazy-diya/signin.dart

Created October 18, 2021 16:47
Show Gist options
  • Save crazy-diya/c286b9e426af19514d260de74491dde0 to your computer and use it in GitHub Desktop.
Save crazy-diya/c286b9e426af19514d260de74491dde0 to your computer and use it in GitHub Desktop.
Download ZIP
Beautiful Sign in and Sign Up pages Flutter
Raw
signin.dart
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,
),),
)
],
),
],
),
),
],
),
),
),
);
}
}
Raw
signup.dart
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,
),),
)
],
),
],
),
),
],
),
),
),
);
}
}
@crazy-diya
Copy link
Author

Screenshot_1634567468
Screenshot_1634567459

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment