Welcome! Login, Signup Page – Flutter UI – Speed Code. Copy and paste the below code as per your requirements.
main.dart
import 'package:flutter/material.dart';
import 'package:example/screens/login_screen/login_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Login & Signup',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home:const LoginScreen(),
);
}
}constants/constants.dart
import 'package:flutter/material.dart';
//colours used in this app
const Color white = Colors.blueGrey;
const Color black = Colors.black;
//default app padding
const double appPadding = 30.0;screens/login_screen/login_screen.dart
import 'package:flutter/material.dart';
import 'package:example/constants/constants.dart';
import 'package:example/screens/login_screen/components/background_design.dart';
import 'package:example/screens/login_screen/components/bottom_container.dart';
import 'package:example/screens/login_screen/components/login_credentials.dart';
class LoginScreen extends StatelessWidget {
const LoginScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: white,
body: SingleChildScrollView(
child: SizedBox(
width: size.width,
height: size.height,
child: Stack(
children: const [
BackgroundDesign(),
LoginCredentials(),
BottomContainer(),
],
),
),
),
);
}
}
screens/login_screen/components/background_design.dart
import 'package:clay_containers/clay_containers.dart';
import 'package:flutter/material.dart';
import 'package:example/constants/constants.dart';
class BackgroundDesign extends StatelessWidget {
const BackgroundDesign({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Stack(
children: [
Container(
color: white,
height: size.height * 0.4,
child: Stack(
children: [
Positioned(
child: Stack(
alignment: Alignment.center,
children: [
ClayContainer(
color: Colors.teal,
width: 220,
height: 220,
borderRadius: 200,
depth: -50,
curveType: CurveType.convex,
),
ClayContainer(
color: Colors.red,
width: 180,
height: 180,
borderRadius: 200,
depth: 50,
),
ClayContainer(
color: Colors.blue,
width: 140,
height: 140,
borderRadius: 200,
depth: -50,
curveType: CurveType.convex,
),
ClayContainer(
color: Colors.amberAccent,
width: 100,
height: 100,
borderRadius: 200,
depth: 50,
),
],
),
right: 0,
top: -size.height * 0.05,
)
],
),
),
SizedBox(
height: size.height * 0.4,
child: Stack(
children: [
Positioned(
child: Stack(
alignment: Alignment.center,
children: [
ClayContainer(
color: Colors.deepPurple,
width: 160,
height: 160,
borderRadius: 200,
depth: 50,
curveType: CurveType.convex,
),
ClayContainer(
color: Colors.teal,
width: 140,
height: 140,
borderRadius: 200,
depth: -50,
curveType: CurveType.convex,
),
ClayContainer(
color: Colors.indigo,
width: 70,
height: 70,
borderRadius: 200,
depth: 50,
),
],
),
left: -size.width * 0.05,
bottom: size.height * 0.1,
)
],
),
),
SizedBox(
height: size.height * 0.4,
child: Stack(
children: [
Positioned(
child: Stack(
alignment: Alignment.center,
children: [
ClayContainer(
color: Colors.indigo,
width: 100,
height: 100,
borderRadius: 200,
depth: 50,
curveType: CurveType.convex,
),
ClayContainer(
color: Colors.deepPurple,
width: 80,
height: 80,
borderRadius: 200,
depth: -50,
curveType: CurveType.convex,
)
],
),
left: size.width * 0.52,
bottom: 10,
)
],
),
)
],
);
}
}
screens/login_screen/components/bottom_container.dart
import 'package:clay_containers/clay_containers.dart';
import 'package:example/screens/signup_screen/signup_screen.dart';
import 'package:flutter/material.dart';
import 'package:example/constants/constants.dart';
class BottomContainer extends StatelessWidget {
const BottomContainer({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Positioned(
bottom: 0,
left: 0,
right: 0,
child: ClayContainer(
color: Colors.indigo,
height: size.height * 0.3,
depth: 60,
spread: 20,
customBorderRadius: const BorderRadius.only(
topRight: Radius.elliptical(350, 250),
topLeft: Radius.elliptical(350, 250),
),
child: Column(
children: [
SizedBox(height: size.height * 0.07,),
ClayContainer(
color: Colors.tealAccent,
depth: 80,
borderRadius: 30,
curveType: CurveType.convex,
child: const Padding(
padding: EdgeInsets.symmetric(vertical: appPadding / 2, horizontal: appPadding * 2),
child: Text('LogIn',style: TextStyle(
fontWeight: FontWeight.w800,
fontSize: 17
),),
),
),
Padding(
padding: const EdgeInsets.only(top: appPadding),
child: GestureDetector(
onTap: ()=> Navigator.push(
context,
MaterialPageRoute(builder: (context) => const SignupScreen()),
),
child: const Text('SignUp',style: TextStyle(
color: Colors.orange,
fontWeight: FontWeight.w800,
fontSize: 17,
decoration: TextDecoration.underline
),
),
)
),
],
),
),
);
}
}screens/login_screen/components/login_credentials.dart
import 'package:clay_containers/clay_containers.dart';
import 'package:flutter/material.dart';
import 'package:example/constants/constants.dart';
class LoginCredentials extends StatelessWidget {
const LoginCredentials({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Positioned(
top: size.height * 0.3,
left: 0,
right: 0,
child: Padding(
padding: const EdgeInsets.all(appPadding),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('Hello',style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold
),),
Text('Let\'s get started',style: TextStyle(
fontSize: 20,
color: black.withOpacity(0.6),
fontWeight: FontWeight.w800,
),),
Padding(
padding: const EdgeInsets.symmetric(vertical: appPadding),
child: ClayContainer(
color: white,
borderRadius: 30,
depth: -30,
child: const Padding(
padding: EdgeInsets.symmetric(horizontal: appPadding),
child: TextField(
decoration: InputDecoration(
hintText: 'Email',
border: InputBorder.none,
fillColor: black
),
),
),
),
),
ClayContainer(
color: white,
borderRadius: 30,
depth: -30,
child: const Padding(
padding: EdgeInsets.symmetric(horizontal: appPadding),
child: TextField(
obscureText: true,
decoration: InputDecoration(
hintText: 'Password',
border: InputBorder.none,
fillColor: black
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: appPadding / 2),
child: Text('Forgot Password?',style: TextStyle(
fontSize: 15,
color: black.withOpacity(0.6),
fontWeight: FontWeight.w600,
decoration: TextDecoration.underline
),),
)
],
),
),
);
}
}screens/signup_screen/signup_screen.dart
import 'package:flutter/material.dart';
import 'package:example/constants/constants.dart';
import 'package:example/screens/signup_screen/components/background_design.dart';
import 'package:example/screens/signup_screen/components/bottom_container.dart';
import 'package:example/screens/signup_screen/components/signup_credentials.dart';
class SignupScreen extends StatelessWidget {
const SignupScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: white,
body: SingleChildScrollView(
child: Container(
width: size.width,
height: size.height,
child: Stack(
children: const [
BackgroundDesign(),
SignupCredentials(),
BottomContainer(),
],
),
),
),
);
}
}
screens/signup_screen/components/background_design.dart
import 'package:clay_containers/clay_containers.dart';
import 'package:flutter/material.dart';
import 'package:example/constants/constants.dart';
class BackgroundDesign extends StatelessWidget {
const BackgroundDesign({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Stack(
children: [
Container(
color: white,
height: size.height * 0.4,
child: Stack(
children: [
Positioned(
child: Stack(
alignment: Alignment.center,
children: [
ClayContainer(
color: Colors.indigo,
width: 220,
height: 220,
borderRadius: 200,
depth: -50,
curveType: CurveType.convex,
),
ClayContainer(
color: Colors.purpleAccent,
width: 180,
height: 180,
borderRadius: 200,
depth: 50,
),
ClayContainer(
color: Colors.orange,
width: 140,
height: 140,
borderRadius: 200,
depth: -50,
curveType: CurveType.convex,
),
ClayContainer(
color: Colors.brown,
width: 100,
height: 100,
borderRadius: 200,
depth: 50,
),
],
),
right: 0,
top: -size.height * -0.13,
)
],
),
),
SizedBox(
height: size.height * 0.4,
child: Stack(
children: [
Positioned(
child: Stack(
alignment: Alignment.center,
children: [
ClayContainer(
color: Colors.red,
width: 220,
height: 220,
borderRadius: 200,
depth: 50,
curveType: CurveType.convex,
),
ClayContainer(
color: Colors.cyan,
width: 140,
height: 140,
borderRadius: 200,
depth: -50,
curveType: CurveType.convex,
),
ClayContainer(
color: Colors.yellow,
width: 70,
height: 70,
borderRadius: 200,
depth: 50,
),
],
),
left: -size.width * 0.05,
bottom: size.height * 0.1,
)
],
),
),
],
);
}
}
screens/signup_screen/components/bottom_container.dart
import 'package:clay_containers/clay_containers.dart';
import 'package:example/screens/login_screen/login_screen.dart';
import 'package:flutter/material.dart';
import 'package:example/constants/constants.dart';
class BottomContainer extends StatelessWidget {
const BottomContainer({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Positioned(
bottom: 0,
left: 0,
right: 0,
child: ClayContainer(
color: Colors.deepPurple,
height: size.height * 0.3,
depth: 60,
spread: 20,
customBorderRadius: const BorderRadius.only(
topRight: Radius.elliptical(350, 250),
topLeft: Radius.elliptical(350, 250),
),
child: Column(
children: [
SizedBox(
height: size.height * 0.07,
),
ClayContainer(
color: Colors.tealAccent,
depth: 80,
borderRadius: 30,
curveType: CurveType.convex,
child: const Padding(
padding: EdgeInsets.symmetric(
vertical: appPadding / 2, horizontal: appPadding * 2),
child: Text(
'SignUp',
style: TextStyle(fontWeight: FontWeight.w800, fontSize: 17),
),
),
),
Padding(
padding: const EdgeInsets.only(top: appPadding),
child: GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const LoginScreen()),
),
child: const Text(
'LogIn',
style: TextStyle(
color: Colors.orange,
fontWeight: FontWeight.w800,
fontSize: 17,
decoration: TextDecoration.underline),
),
)),
],
),
),
);
}
}
screens/signup_screen/components/signup_credentials.dart
import 'package:clay_containers/clay_containers.dart';
import 'package:flutter/material.dart';
import 'package:example/constants/constants.dart';
class SignupCredentials extends StatelessWidget {
const SignupCredentials({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Positioned(
top: size.height * 0.3,
left: 0,
right: 0,
child: Padding(
padding: const EdgeInsets.all(appPadding),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('Hi',style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold
),),
Text('Let\'s get started',style: TextStyle(
fontSize: 20,
color: black.withOpacity(0.6),
fontWeight: FontWeight.w800,
),),
Padding(
padding: const EdgeInsets.symmetric(vertical: appPadding),
child: ClayContainer(
color: white,
borderRadius: 30,
depth: -30,
child: const Padding(
padding: EdgeInsets.symmetric(horizontal: appPadding),
child: TextField(
decoration: InputDecoration(
hintText: 'Email',
border: InputBorder.none,
fillColor: black
),
),
),
),
),
ClayContainer(
color: white,
borderRadius: 30,
depth: -30,
child: const Padding(
padding: EdgeInsets.symmetric(horizontal: appPadding),
child: TextField(
obscureText: true,
decoration: InputDecoration(
hintText: 'Password',
border: InputBorder.none,
fillColor: black
),
),
),
),
],
),
),
);
}
}