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 Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023

Flutter E-commerce App


Color Codes







Card BG


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.


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:-

  1. UI / UX
  2. Firebase
  3. GetX State Management
  4. Shared Preferences (Sessions)
  5. 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);

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";