Flutter Login App
CODE & RESOURCES
This flutter UI tutorial will teach us to design two Flutter Profile UI Design Pages. In this video, we'll take a look at how to design a Flutter profile page UI. We'll cover the basics of how to design a Flutter profile page UI, including how to create a Flutter...
In this flutter firebase tutorial, we will learn flutter firebase phone number authentication and will sent OTP verification SMS to verify. In this video, we'll be learning how to create a Flutter Firebase phone number OTP authentication. This will allow us to secure...
In this flutter tutorial, we will learn flutter firebase authentication. Using Email and Password, we will use GETX State Management to perform firebase authentication in a flutter. There will be many topics that we will cover in this playlist and they are as follows....
In this flutter firebase tutorial, we will learn, how to set up a firebase in a flutter. We will use a simple and quick way to set up a firebase. Learn to setup firebase in flutter with a quick and easiest way! In this flutter firebase tutorial, we will learn Flutter...
In this flutter UI Design tutorial, we will learn to design a modern Homepage Dashboard UI in a flutter. This Flutter dashboard UI will be divided into multiple segments and cover multiple core flutter design concepts. This dashboard UI tutorial is for all who are new...
In this flutter UI tutorial, we will learn how to design a beautiful modern and minimal Flutter OTP Screen UI. To design this OTP screen we will use Flutter OTP TextField. There are two mainly used Flutter OTP Packages and dependencies on pub.dev....
In this flutter tutorial, we will learn how to design a forgot password screen in our FLUTTER LOGIN APP. In this tutorial, we will learn to reset the password screen in flutter using two methods. Mail and Phone No authentication. We will also learn how to create Model...
In this flutter tutorial, we will learn to design a modern Signup screen UI or Signup Page in Flutter. We are creating Flutter UI Design which is a part of our Flutter Login App. In this flutter ui tutorial, we will not just design but also we will learn to create a...
In this flutter tutorial, we learn to design a modern flutter Login Page UI. Flutter Login Screen is the screen that has been used by almost every 2nd application. So, it has a very important role to Retain user or let them go. So, a beautiful login signup design is...
In this flutter tutorial, we learn to use animations in flutter. In Flutter Animation tutorial, we will learn to create a custom widget that can be used anywhere in flutter to animate any widget. In our previous tutorials, we already learned how to make the Splash...
In this flutter tutorial, we will learn to design the Welcome Screen in flutter which is a part of our Flutter login app course. We will create a flutter-responsive UI or make our design responsive using the flutter column widget. We will also learn, how to get...
In this flutter tutorial, we will create Flutter Onboarding Screen using Flutter Liquid Swipe animation. The onboarding screen is a list of pages we use to explain the basics of an app. It only appears for the first time. So, to create an onboarding screen in Flutter,...
In this flutter custom splash screen tutorial, we will learn how to create a Custom Splash Screen in Flutter with animation 2022 so, I have divided this tutorial into 3 main portions. Design a splash screen in flutter Add Animation using Stateful Widget & use...
In this flutter native splash example tutorial, we will learn how to create or add Flutter Native Splash 2022. To add a Flutter native splash we have to use a pub.dev package called flutter_native_splash and it can be removed with a remove keyword. Prerequisite...
In this tutorial, we will learn how to use themes in a flutter, use Color Swatches or create your own custom swatches. We will then learn to create a custom theme. We will also cover the Light and Dark Theme. How to switch themes and make it sync with the device using...
In this flutter tutorial, we will learn how to set up a folder structure in a flutter, where to put assets of our flutter project & how to create a flutter package that can be reused in any other flutter app. Prerequisite Install Android Studio Install Flutter...
Poppins (Google Fonts)
Flutter Courses App
Become a Pro App Developer
In this flutter course, you will learn how to create an app from scratch in flutter. This playlist will be very helpful to all those who want to either learn flutter or to create a professional complete app in flutter.
If you are new in creating an flutter apps and don’t know where you have to start and where to go, then you are in the right place.
Thus, at first, let me tell you about this application, what will it do, why you have to follow this tutorial and How this tutorial will help you.
1- What is the purpose of our application?
There are many reasons to watch this playlist but let’s have a look at some.
- This playlist, will help you to jump start app development
- Setup a professional folder structure
- You can learn to create light & dark themes in flutter
- Two types of splash screen designs
- Use this app in any type of application, that requires Login, Signup
- Learn to use Firebase Database
- Store our data in Shared Preferences
- Use of Packages with a complete separation of concern.
3- Why you have to follow this tutorial?
There are many reasons to follow this playlist,
- You can watch this course in Playlist with details in each seprate video.
- You can also get a complete single Video of in detail course at the end.
- You can also get speed code video in case you dont need details.
- If you follow this playlist, then you can make your own application and upload it on play store.
Just be with us to become a professional developer from a beginner in android.
Finally, we have to put functionality in all the modules.
So let’s get started.
In this flutter app , you will learn to design, code, and write back-end professionally.
You will also be able to create any type of app after watching this series step by step.
The main reason to create this login app is to easily cover more core concepts with less code, that requires in any app development.
We will create a login app in flutter, that will cover the following topics:-
- UI / UX
- GetX State Management
- Shared Preferences (Sessions)
- Animations and much more…
This Flutter app can also be used in any type of Flutter Application that requires LOGIN, SIGNUP functionality.
I have divided this course in 2 main parts.
- Design Flutter Apps – UI / UX
- Write Back-end code / functionality using GETX State-Management and FIREBASE as Database.
/* -- LIST OF ALL COLORS -- */
const tPrimaryColor = Color(0xFFFFE400);
const tSecondaryColor = Color(0xFF272727);
const tAccentColor = Color(0xFF001BFF);
const tWhiteColor = Colors.white;
const tDarkColor = Color(0xff000000);
const tCardBgColor = Color(0xFFF7F6F1);
// -- ON-BOARDING COLORS
const tOnBoardingPage1Color = Colors.white;
const tOnBoardingPage2Color = Color(0xfffddcdf);
const tOnBoardingPage3Color = Color(0xffffdcbd);
/* -- App Image Strings -- */
// -- Splash Screen Images
const String tSplashTopIcon = "assets/images/splash_images/splash-top-icon.png";
const String tSplashImage = "assets/images/splash_images/splash-screen-image.png";
// -- OnBoarding Screen Images
const String tOnBoardingImage1 = "assets/images/on_boarding_images/on-boarding-image-1.png";
const String tOnBoardingImage2 = "assets/images/on_boarding_images/on-boarding-image-2.png";
const String tOnBoardingImage3 = "assets/images/on_boarding_images/on-boarding-image-3.png";
// -- Welcome Screen Images
// -- also used in Login & SignUp
const String tWelcomeScreenImage = "assets/images/welcome_images/welcome-screen-image.png";
// -- Login & SignUp Images
const String tGoogleLogoImage = "assets/logo/google-logo.png";
// -- Forget Password Images
const String tForgetPasswordImage = "assets/images/forget_password/forget-password.png";
/* -- App Sizing -- */
//App default Sizing
const tDefaultSize = 30.0;
const tSplashContainerSize = 30.0;
const tButtonHeight = 15.0;
const tFormHeight = 30.0;
/* -- App Text Strings -- */
// -- GLOBAL Texts
const String tNext = "Next";
const String tLogin = "Login";
const String tEmail = "E-Mail";
const String tSignup = "Signup";
const String tPhoneNo = "Phone No";
const String tPassword = "Password";
const String tFullName = "Full Name";
const String tForgetPassword = "Forget Password";
const String tSignInWithGoogle = "Sign-In with Google";
// -- Splash Screen Text
const String tAppName = ".appable/";
const String tAppTagLine = "Learn To Code. \nFree For Everyone";
// -- On Boarding Text
const String tOnBoardingTitle1 = "Build Awesome Apps";
const String tOnBoardingTitle2 = "Learn from YouTube";
const String tOnBoardingTitle3 = "Get Code & Resources";
const String tOnBoardingSubTitle1 = "Let's start your journey with us on this amazing and easy platform.";
const String tOnBoardingSubTitle2 = "Get Video Tutorials of each topic to learn things easily.";
const String tOnBoardingSubTitle3 = "Save time by just copy pasting complete apps you learned from videos.";
const String tOnBoardingCounter1 = "1/3";
const String tOnBoardingCounter2 = "2/3";
const String tOnBoardingCounter3 = "3/3";
// -- Welcome Screen Text
const String tWelcomeTitle = "Build Awesome Apps";
const String tWelcomeSubTitle = "Let's put your creativity on the development highway.";
// -- Login Screen Text
const String tLoginTitle = "Welcome Back,";
const String tLoginSubTitle = "Make it work, make it right, make it fast.";
const String tRememberMe = "Remember Me?";
const String tDontHaveAnAccount = "Don't have an Account? ";
// -- Sign Up Screen Text
const String tSignUpTitle = "Get On Board!";
const String tSignUpSubTitle = "Create your profile to start your Journey.";
const String tAlreadyHaveAnAccount = "Already have an Account? ";
// -- Forget Password Text
const String tForgetPasswordTitle = "Make Selection!";
const String tForgetPasswordSubTitle = "Select one of the options given below to reset your password.";
const String tResetViaEMail = "Reset via Mail Verification";
const String tResetViaPhone = "Reset via Phone Verification";
// -- Forget Password Via Phone - Text
const String tForgetPhoneSubTitle = "Enter your registered Phone No to receive OTP";
// -- Forget Password Via E-Mail - Text
const String tForgetMailSubTitle = "Enter your registered E-Mail to receive OTP";