CodeWithSaif yt
E-Fruit App
Flutter with Firebase
Part-2: SignUp Screen
Table of content:
1.1 Creat SignUp Screen
1.2 Call Login screen to Login last row.
1.3 import Get dependies from Dev flutter for Getx
1.4 Creat stateless class name with SignUp Screen
1.5 Safe area and scaffold widgets in SignUp screen
1.6 Scaffold body create container with box decurations
1.7 container child, create cloumn widget and add children[]
1.8 Use sizebox with height 100
1.9 Simple text for Creat Account display
1.10 Then create 3 text from fields with poperties for email and pass
1.11 Simple text for Forgot password display
1.12 Create ElevatedButton with some padding and styles button for sign up
1.13 At the end made a Row with children
1.14 2 text widgest use for navigation to Sign in screen
1.15 Important run Emulator at start for testing between development.
Dont forget to Subscribe and press Bell Icon for Projects with source coeds.
Thanks for watching.
Code:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'LoginScreen.dart';
class SignupScreen extends StatelessWidget {
const SignupScreen({super.key});
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
resizeToAvoidBottomInset: false,
body: Padding(
padding: const EdgeInsets.only(
bottom: 20,
),
child: Container(
decoration:
const BoxDecoration(color: Colors.white, boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 5.0,
spreadRadius: 2.0,
offset: Offset(0, 8), // Offset in the bottom direction
),
]),
child: Column(
children: [
const SizedBox(
height: 100,
),
const Center(
child: Text(
'Creat Account',
style: TextStyle(
fontSize: 25, fontWeight: FontWeight.bold),
)),
const SizedBox(
height: 80,
),
Padding(
padding: const EdgeInsets.all(20.0),
child: TextField(
decoration: InputDecoration(
hintText: 'Email',
fillColor: const Color.fromRGBO(
196, 196, 196, 0.35), // Background color
filled: true,
hintStyle: const TextStyle(
fontSize: 20, color: Colors.grey),
contentPadding: const EdgeInsets.symmetric(
horizontal: 20, vertical: 15),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(
color: Color.fromARGB(255, 241, 196, 15)),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(
color: Color.fromARGB(253, 241, 196, 15)),
),
),
),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: TextField(
decoration: InputDecoration(
hintText: 'Password',
fillColor: const Color.fromRGBO(
196, 196, 196, 0.35), // Background color
filled: true,
hintStyle: const TextStyle(
fontSize: 20, color: Colors.grey),
contentPadding: const EdgeInsets.symmetric(
horizontal: 20, vertical: 15),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(
color: Color.fromARGB(255, 241, 196, 15)),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(
color: Color.fromARGB(253, 241, 196, 15)),
),
),
),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: TextField(
decoration: InputDecoration(
hintText: 'Confirm Password',
fillColor: const Color.fromRGBO(
196, 196, 196, 0.35), // Background color
filled: true,
hintStyle: const TextStyle(
fontSize: 20, color: Colors.grey),
contentPadding: const EdgeInsets.symmetric(
horizontal: 20, vertical: 15),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(
color: Color.fromARGB(255, 241, 196, 15)),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(
color: Color.fromARGB(253, 241, 196, 15)),
),
),
),
),
SizedBox(
height: 80,
),
SizedBox(
height: 66,
width: 345,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFFF1C40F),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
)),
child: const Text(
'Sign Up',
style:
TextStyle(fontSize: 25, color: Colors.white),
)),
),
Row(
children: [
const SizedBox(
width: 80,
),
const Text(
'Already have an Account',
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.normal),
),
const SizedBox(
width: 10,
),
GestureDetector(
onTap: () {
Get.to(const LoginScreen());
},
child: const Text(
'Sign In',
style: TextStyle(
fontSize: 20,
color: Color(0xFFF1C40F),
fontWeight: FontWeight.bold),
),
),
],
),
],
),
))));
}
}
Output:
GitHub Source code: