Flutter E Fruit App with Backend | Flutter eCommerce App with Firebase | Build UI #1 | CodeWithSaif

byMr Saif -
0

 


CodeWithSaif yt:



E-Fruit App 

Flutter with Firebase

Part-1: Login Screen

Table of content:

1.1 Creat Login Screen

1.2 Call Login screen to main

1.3 import Get dependies from Dev flutter for Getx

1.4 Creat stateless class name with Login Screen

1.5 Safe area and scaffold widgets in Login 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 150

1.9 Simple text for Sign in display

1.10 Then create 2 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 In

1.13 At the end made a Row with children

1.14 2 text widgest use for navigation to Sign Up screen

1.15 Important run Emulator at start for testing between development.

Code:

Dart Flutter

// ignore_for_file: file_names

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'Signup.dart';

class LoginScreen extends StatefulWidget {
  const LoginScreen({super.key});

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        resizeToAvoidBottomInset: false,
        body: Padding(
          padding: const EdgeInsets.only(bottom: 20),
          child: Container(
            decoration: const BoxDecoration(
              // borderRadius: BorderRadius.circular(30),
              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: 150,
                ),
                const Text(
                  'Sign In',
                  style: TextStyle(
                    fontSize: 25,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(
                  height: 60,
                ),
                Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: TextFormField(
                    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.symmetric(vertical: 10, horizontal: 20),
                  child: TextFormField(
                    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)),
                      ),
                    ),
                  ),
                ),
                const Text('Forgot password?'),
                const SizedBox(
                  height: 140,
                ),
                SizedBox(
                  height: 66,
                  width: 345,
                  child: ElevatedButton(
                    onPressed: () {
                      // Add your button press logic here
                    },
                    style: ElevatedButton.styleFrom(
                      backgroundColor: const Color(0xFFF1C40F), // Button color
                      shape: RoundedRectangleBorder(
                        borderRadius:
                            BorderRadius.circular(30.0), // Radius of 30
                      ),
                    ),
                    child: const Padding(
                      padding: EdgeInsets.all(15.0),
                      child: Text(
                        'Sign In',
                        style: TextStyle(fontSize: 25, color: Colors.white),
                      ),
                    ),
                  ),
                ),
                Row(
                  children: [
                    const SizedBox(
                      width: 90,
                    ),
                    const Text(
                      'Dont have an Account   ',
                      style: TextStyle(
                        fontSize: 15,
                      ),
                    ),
                    GestureDetector(
                      onDoubleTap: () {
                        Get.to(const SignupScreen());
                      },
                      child: const Text(
                        'Sign Up',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                          color: Color(0xFFF1C40F),
                        ),
                      ),
                    )
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}


Output:


Design Link:


Tags

You may like these posts

Post a Comment

Previous Post Next Post