Skip to content

SkillyPro

SkillyPro Develop Your Skills

    • Home
    • Dart
    • Flutter
      • Widgets
    • Technology
    • Blogs
    • Adobe PhotoShop
    • Home
    • Dart
    • Flutter
      • Widgets
    • Technology
    • Blogs
    • Adobe PhotoShop

    Flutter UI, Splash, login, Signup, Forget password Screen Flutter UI, How to Use GetX

    Flutter UI, Splash, Login, Register, Forget Password Flutter UI, Flutter Speed Code

    In this article, we will learn the Flutter UI of splash, login, signup, and forget password screen. We will design these screens by using the GetX State Management. You will learn what is GetX and how you can use this in your projects. You will learn how to navigate to other screens by using GetX, the best folder structure for app development, Flutter custom button widget, Flutter custom text field widget, SingleChildScrollView widget, vertical scrolling, and more.

    What is GetX?

    GetX is a micro-framework that aims to provide a top-notch development experience by minimizing the boilerplate combined with neat syntax and a simple approach. When developing with GetX, everything feels self-evident and practical. It’s a solid blend of simplicity and power. It’s one of those rare packages that try to do everything and actually do it.

    GetX provides a combination of State Management, Dependency Injection, and Route Management solutions that work great together. But things don’t end here, it provides a ton of utilities that make it easy to implement internationalization, theming, validation, etc.

    All of these solutions and utilities are packed in individually compiled containers which give us the freedom to choose what to use and what not to, without compromising performance. However, once you’re using GetX, it’s hard to not use everything this package has to offer because everything works so seamlessly together. And, that’s what I call The GetX Ecosystem.

    Let’s Start the Coding

    ► Flutter UI Design

    ► Splash Screen Flutter UI

    ► Login Screen Flutter UI

    ► Signup Screen Flutter UI

    ► Forget Password Screen Flutter UI

    Folder Structure

    Flutter UI

    In the constants Folder, I place all the colors and images by declaring their classes. You can see the code at the bottom for app_colors.dart file and also app_icons.dart file.

    app_colors.dart file

    import 'package:flutter/material.dart';
    
    class AppColors {
    
      static const Color mainColor = Color(0xff2031C9);
      static const Color primaryColor = Color(0xff1f08ab);
      static const Color whiteColor = Color(0xffFFFFFF);
      static const Color blackColor = Color(0xff000000);
      static const Color greyColor = Color(0xff7a7a7a);
    }
    

    app_icons.dart file

    class AppIcons {
      static const String appLogo = 'assets/images/Asset 2 1.png';
      static const String userIcon = 'assets/icons/icons8_user_96px_2 1 (2).png';
      static const String emailIcon = 'assets/icons/icons8_user_96px_2 1.png';
      static const String lockIcon = 'assets/icons/icons8_user_96px_2 1 (1).png';
      static const String eyeIcon = 'assets/icons/i';
      static const String googleIcon = 'assets/icons/icons8_Facebook_96px 1.png';
      static const String fbIcon = 'assets/icons/icons8_Facebook_96px 1 (1).png';
    }

    Here are some custom widgets in the widgets folder in which I make a custom_button widget and also make a custom_textfield widget.

    custom_button.dart file

    import 'package:flutter/material.dart';
    import 'package:google_fonts/google_fonts.dart';
    
    import '../constants/app_colors.dart';
    
    class CustomButton extends StatelessWidget {
      final String? btnText;
      final VoidCallback? onTap;
      final Color? btnColor;
      final Color? onPrimaryColor;
      final Widget? btnDataRow;
    
      const CustomButton({Key? key,
        required this.onTap,
        required this.btnText,
        this.btnColor = AppColors.primaryColor,
        this.btnDataRow,
        this.onPrimaryColor = AppColors.blackColor,
    }) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        double height = MediaQuery.of(context).size.height;
        double width = MediaQuery.of(context).size.width;
        return Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20.0),
          child: ElevatedButton(
            onPressed: onTap,
            style: ElevatedButton.styleFrom(
              primary: btnColor,
              onPrimary: onPrimaryColor,
              minimumSize: Size(width, height * 0.08),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10.0),
              ),
            ),
            child: btnDataRow ?? Center(
              child: Text(btnText!,
                style: GoogleFonts.poppins(
                  color: AppColors.whiteColor,
                  fontSize: 16.0,
                  fontWeight: FontWeight.w600,
                ),
              ),
            ),
          ),
        );
      }
    }

    custom_field.dart file

    import 'package:flutter/material.dart';
    import 'package:google_fonts/google_fonts.dart';
    
    import '../constants/app_colors.dart';
    
    class CustomTextField extends StatelessWidget {
      final TextEditingController controller;
      final TextInputType keyboardType;
      final String hintText;
      final bool obscureText;
      final String prefixIconPath;
      final Widget? suffixIcon;
    
      const CustomTextField({Key? key,
        required this.controller,
        required this.obscureText,
        required this.hintText,
        required this.keyboardType,
        required this.prefixIconPath,
        this.suffixIcon,
    }) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        double height = MediaQuery.of(context).size.height;
        double width = MediaQuery.of(context).size.width;
        return Container(
          height: 50.0,
          width: width,
          margin: const EdgeInsets.symmetric(horizontal: 20.0),
          decoration: BoxDecoration(
            color: AppColors.whiteColor,
            borderRadius: BorderRadius.circular(10.0),
          ),
          child: TextFormField(
            style: GoogleFonts.poppins(
              fontSize: 14.0,
              fontWeight: FontWeight.w400,
            ),
            obscureText: obscureText,
            cursorColor: AppColors.mainColor,
            controller: controller,
            keyboardType: keyboardType,
            decoration: InputDecoration(
              border: InputBorder.none,
              prefixIcon: Image.asset(prefixIconPath),
              suffixIcon: suffixIcon ?? const SizedBox(),
              hintText: hintText,
              hintStyle: GoogleFonts.poppins(
                fontSize: 14.0,
                fontWeight: FontWeight.w400,
              ),
              contentPadding: const EdgeInsets.only(top: 16.0),
            ),
          ),
        );
      }
    }

    Splash Screen Flutter UI

    class SplashScreen extends GetView<SplashController> {
      const SplashScreen({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        Get.put(SplashController());
        return Scaffold(
          backgroundColor: AppColors.mainColor,
          body: Center(
            child: Image.asset(AppIcons.appLogo),
          ),
        );
      }
    }

    Splash Screen GetX Controller

    class SplashController extends GetxController {
      @override
      void onInit() {
        super.onInit();
    
        Timer(
          const Duration(seconds: 3),
          () => Get.off(
            LoginScreen(),
          ),
        );
      }
    }

    Login Screen Flutter UI

    class LoginScreen extends GetView<LoginController> {
      const LoginScreen({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        double height = MediaQuery.of(context).size.height;
        double width = MediaQuery.of(context).size.width;
        Get.put(LoginController());
        return Scaffold(
          backgroundColor: AppColors.mainColor,
          body: SafeArea(
            child: SizedBox(
              height: height,
              width: width,
              child: SingleChildScrollView(
                padding: const EdgeInsets.only(bottom: 30.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    /// app icon
                    SizedBox(height: height * 0.05),
                    Image.asset(
                      AppIcons.appLogo,
                      height: 70,
                    ),
    
                    /// Don't Have an Account text
                    SizedBox(height: height * 0.05),
                    RichText(
                      text: TextSpan(
                        children: [
                          TextSpan(
                            text: 'Don\'t have an account?',
                            style: GoogleFonts.poppins(
                              fontSize: 12.0,
                              fontWeight: FontWeight.w500,
                              color: AppColors.whiteColor,
                            ),
                          ),
                          const WidgetSpan(child: SizedBox(width: 10.0)),
                          TextSpan(
                            text: 'SIGN UP',
                            style: GoogleFonts.poppins(
                              fontSize: 12.0,
                              fontWeight: FontWeight.w500,
                              color: AppColors.whiteColor,
                            ),
                            recognizer: TapGestureRecognizer()
                              ..onTap = () => Get.to(
                                    const SignupScreen(),
                                  ),
                          ),
                        ],
                      ),
                    ),
    
                    /// email field
                    SizedBox(height: height * 0.06),
                    CustomTextField(
                      controller: controller.emailController,
                      obscureText: false,
                      hintText: 'Email',
                      keyboardType: TextInputType.emailAddress,
                      prefixIconPath: AppIcons.emailIcon,
                      suffixIcon: null,
                    ),
    
                    /// password field
                    SizedBox(height: height * 0.02),
                    CustomTextField(
                      controller: controller.passwordController,
                      obscureText: true,
                      hintText: 'Password',
                      keyboardType: TextInputType.text,
                      prefixIconPath: AppIcons.lockIcon,
                      suffixIcon: null,
                    ),
    
                    /// Login button
                    SizedBox(height: height * 0.05),
                    CustomButton(
                      onTap: () {},
                      btnText: 'Login',
                    ),
    
                    /// forgot password Button
                    SizedBox(height: height * 0.01),
                    TextButton(
                      onPressed: () {
                        Get.to(ForgotPasswordScreen());
                      },
                      child: Text(
                        'Forgot Password?',
                        style: GoogleFonts.poppins(
                          fontSize: 14.0,
                          fontWeight: FontWeight.w400,
                          color: AppColors.whiteColor,
                        ),
                      ),
                    ),
    
                    /// login with Google button
                    SizedBox(height: height * 0.08),
                    CustomButton(
                      onTap: () {},
                      btnText: '',
                      btnColor: AppColors.whiteColor,
                      btnDataRow: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Image.asset(AppIcons.googleIcon),
                          const SizedBox(width: 8.0),
                          Text(
                            'Login with Google',
                            style: GoogleFonts.poppins(
                              fontSize: 14.0,
                              fontWeight: FontWeight.w400,
                              color: AppColors.blackColor,
                            ),
                          ),
                        ],
                      ),
                    ),
    
                    /// login with facebook
                    SizedBox(height: height * 0.02),
                    CustomButton(
                      onTap: () {},
                      btnText: '',
                      btnColor: AppColors.whiteColor,
                      btnDataRow: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Image.asset(AppIcons.fbIcon),
                          const SizedBox(width: 8.0),
                          Text(
                            'Login with Facebook',
                            style: GoogleFonts.poppins(
                              fontSize: 14.0,
                              fontWeight: FontWeight.w400,
                              color: AppColors.blackColor,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }
    }

    Login Screen GetX Controller

    import 'package:flutter/material.dart';
    import 'package:get/get.dart';
    
    class LoginController extends GetxController {
    
      TextEditingController emailController = TextEditingController();
      TextEditingController passwordController = TextEditingController();
      
    }

    Signup Screen Flutter UI

    class SignupScreen extends GetView<SignupController> {
      const SignupScreen({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        double height = MediaQuery.of(context).size.height;
        double width = MediaQuery.of(context).size.width;
        Get.put(SignupController());
        return Scaffold(
          backgroundColor: AppColors.mainColor,
          body: SafeArea(
            child: SizedBox(
              height: height,
              width: width,
              child: SingleChildScrollView(
                padding: const EdgeInsets.only(bottom: 30.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    /// app icon
                    SizedBox(height: height * 0.05),
                    Image.asset(
                      AppIcons.appLogo,
                      height: 70,
                    ),
    
                    /// Don't Have an Account text
                    SizedBox(height: height * 0.05),
                    RichText(
                      text: TextSpan(
                        children: [
                          TextSpan(
                            text: 'Already have account?',
                            style: GoogleFonts.poppins(
                              fontSize: 12.0,
                              fontWeight: FontWeight.w500,
                              color: AppColors.whiteColor,
                            ),
                          ),
                          const WidgetSpan(child: SizedBox(width: 10.0)),
                          TextSpan(
                            text: 'SIGN IN',
                            style: GoogleFonts.poppins(
                              fontSize: 12.0,
                              fontWeight: FontWeight.w500,
                              color: AppColors.whiteColor,
                            ),
                            recognizer: TapGestureRecognizer()
                              ..onTap = () => Get.to(
                                    const LoginScreen(),
                                  ),
                          ),
                        ],
                      ),
                    ),
    
                    /// full name field
                    SizedBox(height: height * 0.06),
                    CustomTextField(
                      controller: controller.nameController,
                      obscureText: false,
                      hintText: 'Full Name',
                      keyboardType: TextInputType.name,
                      prefixIconPath: AppIcons.userIcon,
                      suffixIcon: null,
                    ),
    
                    /// email field
                    SizedBox(height: height * 0.02),
                    CustomTextField(
                      controller: controller.emailController,
                      obscureText: false,
                      hintText: 'Email',
                      keyboardType: TextInputType.emailAddress,
                      prefixIconPath: AppIcons.emailIcon,
                      suffixIcon: null,
                    ),
    
                    /// password field
                    SizedBox(height: height * 0.02),
                    CustomTextField(
                      controller: controller.passwordController,
                      obscureText: true,
                      hintText: 'Password',
                      keyboardType: TextInputType.text,
                      prefixIconPath: AppIcons.lockIcon,
                      suffixIcon: null,
                    ),
    
                    /// signup button
                    SizedBox(height: height * 0.05),
                    CustomButton(
                      onTap: () {},
                      btnText: 'Sign Up',
                    ),
    
                    /// Terms of services
                    SizedBox(height: height * 0.03),
                    RichText(
                      text: TextSpan(
                        children: [
                          TextSpan(
                            text: 'By Signing Up, You agree our  ',
                            style: GoogleFonts.poppins(
                              fontSize: 12.0,
                              fontWeight: FontWeight.w500,
                              color: AppColors.whiteColor,
                            ),
                          ),
                          TextSpan(
                            text: 'TERMS OF SERVICES',
                            style: GoogleFonts.poppins(
                              fontSize: 12.0,
                              fontWeight: FontWeight.w500,
                              color: AppColors.whiteColor,
                              decoration: TextDecoration.underline,
                            ),
    
                            ///recognizer: TapGestureRecognizer(),
                          ),
                        ],
                      ),
                    ),
    
                    /// login with Google button
                    SizedBox(height: height * 0.04),
                    CustomButton(
                      onTap: () {},
                      btnText: '',
                      btnColor: AppColors.whiteColor,
                      btnDataRow: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Image.asset(AppIcons.googleIcon),
                          const SizedBox(width: 8.0),
                          Text(
                            'Login with Google',
                            style: GoogleFonts.poppins(
                              fontSize: 14.0,
                              fontWeight: FontWeight.w400,
                              color: AppColors.blackColor,
                            ),
                          ),
                        ],
                      ),
                    ),
    
                    /// login with facebook
                    SizedBox(height: height * 0.02),
                    CustomButton(
                      onTap: () {},
                      btnText: '',
                      btnColor: AppColors.whiteColor,
                      btnDataRow: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Image.asset(AppIcons.fbIcon),
                          const SizedBox(width: 8.0),
                          Text(
                            'Login with Facebook',
                            style: GoogleFonts.poppins(
                              fontSize: 14.0,
                              fontWeight: FontWeight.w400,
                              color: AppColors.blackColor,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }
    }

    Signup Screen GetX Controller

    import 'package:flutter/material.dart';
    import 'package:get/get.dart';
    
    class SignupController extends GetxController {
      TextEditingController nameController = TextEditingController();
      TextEditingController emailController = TextEditingController();
      TextEditingController passwordController = TextEditingController();
    }

    Forget Password Screen Flutter UI

    class ForgotPasswordScreen extends GetView<ForgotPassController> {
      const ForgotPasswordScreen({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        double height = MediaQuery.of(context).size.height;
        double width = MediaQuery.of(context).size.width;
        Get.put(ForgotPassController());
        return Scaffold(
          backgroundColor: AppColors.mainColor,
    
          body: SafeArea(
            child: SizedBox(
              height: height,
              width: width,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  /// app icon
                  SizedBox(height: height * 0.05),
                  Image.asset(AppIcons.appLogo,
                    height: 70,
                  ),
    
                  /// Don't Have an Account text
                  SizedBox(height: height * 0.05),
                  RichText(
                    text: TextSpan(
                      children: [
                        TextSpan(
                          text: 'Forget Password',
                          style: GoogleFonts.poppins(
                            fontSize: 12.0,
                            fontWeight: FontWeight.w500,
                            color: AppColors.whiteColor,
                          ),
                        ),
                      ],
                    ),
                  ),
    
                  /// email field
                  SizedBox(height: height * 0.06),
                  CustomTextField(
                    controller: controller.emailController,
                    obscureText: false,
                    hintText: 'Email',
                    keyboardType: TextInputType.emailAddress,
                    prefixIconPath: AppIcons.emailIcon,
                    suffixIcon: null,
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }

    Forget Password GetX Controller

    import 'package:flutter/material.dart';
    import 'package:get/get.dart';
    
    class ForgotPassController extends GetxController {
    
      TextEditingController emailController = TextEditingController();
    
    }
    

    Here is the article, In which we learn about Flutter UI of splash, login, signup and forget password screen using GetX.

    Flutter UI

    ► Source code: https://github.com/flutter99/flutter-ui-speed-code

    Related Articles:

    Flutter UI Custom Gradient Button

    Flutter UI Gradient Icon

    Tags: Flutter Beginner TutorialFlutter Frontend TutorialsFlutter UIFlutter UI with GetXForget Password Screen Flutter UILogin Screen Flutter UISignup Screen Flutter UISplash Screen Flutter UI

    Share
    June 10, 2022 by Bilal Ahmad Flutter Tutorial Blogs

    Bilal Ahmad

    He is Professional Flutter Mobile App Developer and article writer. He is working as a Flutter Mobile App Developer for more than 2 years and he has done more than 300 projects for clients. He is working as a blogger for me for more than 1 year. Working on different Freelance marketplaces like Upwork, Fiverr, Freelancer, Kwork, and Guru. contact him: https://www.upwork.com/freelancers/~01bb489da512873d44

    You may also like...

    • how to rotate animation circle in flutter

      Flutter Animation: How to repeat the animation of the circle

    • Flutter InkWell Widget Ripple Effect

      Flutter InkWell: How to add Ripple Effect on any widget

    • Pinput Package Example

      How to use PinPut Flutter Package in Flutter 2022

    1 Response

    • Comments0
    • Pingbacks1
    1. How to make Flutter Counter App with setState - SkillyPro
      June 28, 2022

      […] Flutter UI, Splash Login Signup Forgot Password Screen […]

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    Most Searches

    10 best google fonts adobe photoshop AI chatbot from OpenAI app developement best google fonts Chat GPT ChatGPT Chat GPT 3 ChatGPT advanced AI architecture ChatGPT feature ChatGPT Skillypro counter app Energy Saver Google Chrome fiverr flutter flutter animation flutter beginner Flutter Beginner Tutorial flutter beginner tutorials flutter counter app Flutter Developer Flutter Frontend Tutorials flutter learn flutter skillypro flutter tutorials Flutter Tutorials flutter skills flutter app development flutter ui tutorials How ChatGPT can help in Business? how GPT-4 differs from chat GPT? how to use ChatGPT? new features of chat gpt open ai openai chat gpt pub.dev skillypro skillypro.com some important notes about chat gpt top 10 best google fonts in 2022 websites what is 5g what is AI? what is AI and ML what is artificial intelligence what is ChatGPT what is chat gpt?

    Recent Posts

    • The Rise of Artificial Intelligence in the Healthcare Industry
    • Range and rates for Flutter developers on the international level
    • ChatGPT has achieved 100 million users | Open AI
    • ChatGPT is designed to be connected to the internet
    • What is Chat GPT/GPT-4? Is Chat GPT Free or Paid?

    Categories

    • Blogs (49)
    • Dart (6)
    • Flutter Tutorial Blogs (23)
    • Graphic Design PHOTOSHOP ILLUSTRATOR INDESIGN (1)
    • PhotoShop Quick Tutorials (1)
    • Technology (28)
    • Widgets (9)
    • Home
    • Dart
    • Flutter
      • Widgets
    • Technology
    • Blogs
    • Adobe PhotoShop

    SkillyPro © 2023. All Rights Reserved.

    Powered by WordPress. Theme by Alx.