FLUTTER E-COMMERCE APP
In this course we will learn, how to create an E-commerce app in flutter from scratch. This course is perfect for anyone wanting to make an online shopping app using Flutter. From setting up to final deployment, we cover it all. Boost your Flutter skills and learn to make a top-notch Flutter E-commerce app with ease.
Flutter E-commerce App
CODE & RESOURCES
Flutter Login- Flutter Profile Page UI Design – Flutter App Design [2023]
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...
Flutter firebase phone authentication with example tutorial 2022
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...
Flutter Firebase Authentication Tutorial 2022 using GETX
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....
How to setup firebase in flutter – Firebase Setup 2022
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...
Flutter UI Design Tutorial – Flutter Homepage Dashboard UI – 2022
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...
Flutter OTP Screen UI Example – OTP TextField Code
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....
How to Reset Password Screen in Flutter – UI Code
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...
Flutter Signup UI Page Example Code – Flutter UI 2022
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...
Flutter Login Screen Design – Modern Login Screen UI
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...
Flutter Animation 2022 – Animate any widget in flutter
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...
Modern Flutter Welcome Screen UI – Flutter UI 2022
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...
Flutter Onboarding Screen – Flutter Liquid Swipe
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,...
How to create beautiful splash screen in flutter with animation 2022
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...
How to add or remove Flutter Native Splash 2022
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...
How to use Theme in Flutter – Dark and Custom Theme
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...
How to Setup Folder Structure in Flutter
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...
Color Codes
(Primary)
#FEE400
(Secondary)
#272727
(Accent)
#001BFF
Card BG
#F7F6F1
Fonts Used
App Headings
Montserrat (Google Fonts)
App Body
Poppins (Google Fonts)
Flutter Ecommerce 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.
Interested??
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 [2022], 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
- Firebase
- 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.
import 'package:flutter/material.dart';
/* -- 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";