E-Commerce Complate App - Flutter UI

Overview

E-Commerce Complate App - Flutter UI

In the first part of our complete e-commerce app, we show you how you can create a nice clean onboarding screen for your e-commerce app that can run both Andriod and iOS devices because it builds with flutter. Then on the second episode, we build a Sign in, Forgot Password screen with a custom error indicator. The third Episode contains Sign Up and OTP screen. The fourth episode is the most exciting episode because we build our home page on this episode than on the fifth episode we work on our product page, last not least on the 6th episode we build an order screen which has some cool stuff like swipe to remove. At the end 7th episode we build a profile screen.

Watch it on YouTube

Packages we are using:

Video Preview of Final UI

Preview

Screens it contains:

=> Onboarding

=> Login

=> Forgot Password

=> Sign Up

=> Complete Profile

=> OTP Verification

=> Home Page

=> Product Details

=> Order

=> Profile (added)

=> Bottom Navigation Bar (added)

Now it contains all the screen, thanks for your love and support πŸ™

Photos

Preview Preview Preview Preview Preview Preview Preview

Comments
  • CustomAppBar issues

    CustomAppBar issues

    I have been able to fix almost all of the 2.2.0 flutter migration issues. However, I cannot for the life of mine, fix this. Is anyone else recieving the issue on PreferredSize?

    Error: The superclass 'PreferredSize' doesn't have a zero argument constructor.

    Not sure what I should do to fix it?

    opened by osama3101995 2
  • LinearGradient throws an error

    LinearGradient throws an error

    const kPrimaryGradientColor = LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [Color(0xFFFFA53E), Color(0xFFFF7643)], );

    it should be wrapped in a gradient() how to fix this ?

    opened by LebToki 2
  • keyboard open padding crash problem fixed

    keyboard open padding crash problem fixed

    A RenderFlex overflowed by 73 pixels on the bottom. E-commerce-Complete-Flutter-UI/lib/screens/login_success/components/body.dart:9:12 E-commerce-Complete-Flutter-UI/lib/screens/details/components/body.dart:9:18

    opened by NerdFaisal404 2
  • Migration: migrates deprecated classes according to official docs πŸ› οΈ

    Migration: migrates deprecated classes according to official docs πŸ› οΈ

    Description

    This PR is raised for the issue(#40)

    • ChangesFlatButton() to TextButton() and made relevant changes according to parameter.
    • changes overflow: Overflow.visible property to relevant clipBehaviour: Clip.none property.

    Type of change

    • [x] 🧹 Code refactor

    *The code is built and run on android device and no existing design has been changed along with no breaking changes introduced.

    opened by harshkc 1
  • Bottom overflowed by 10 pixels

    Bottom overflowed by 10 pixels

    Hello, I am new to flutter technology and just started to learn. I was trying to find some flutter template app to get started and I found your e-commerce UI app. This is really great and very useful for me. I just pulled latest changes, and I got this error in ui: Bottom overflowed by 10 pixels. I am using oneplus 8 for debugging and I think I got this error because of large screen. Can you please check it out and give me your suggestion. I have also attached error screen shot here. Error is shown at the bottom of page with yellow and black lines Screenshot_20200928-144836

    opened by uditparmar 1
  • Migration: Deprecated Classes

    Migration: Deprecated Classes

    • [x] Code refactor

    Description

    This issue highlights need for migration of deprecated classes in recent version of Flutter. overflow: Overflow.visible has been deprecated. FlatButton() has been deprecated.

    I would like to work on the migration issue.

    opened by harshkc 0
  • Countdown to 00:00

    Countdown to 00:00

    Here is the edit for the timer countdown. As at now using this on line 52 in the OTP's body: "00:${value.toInt()}" produces an output such as 00.0 at the end of the countdown. A simple edit for that is to use an if statement: value.toInt() == 0 ? "00:${value.toInt()}0" : "00:${value.toInt()}"

    opened by rennylangat 0
  • Right Overflow in cart_data.dart [fixed]

    Right Overflow in cart_data.dart [fixed]

    I fixed this issue. I/flutter (21816): ══║ EXCEPTION CAUGHT BY RENDERING LIBRARY β•žβ•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β• [ +3 ms] I/flutter (21816): The following assertion was thrown during layout: [ +36 ms] I/flutter (21816): A RenderFlex overflowed by 6.4 pixels on the right. [ +3 ms] I/flutter (21816): The relevant error-causing widget was: [ +1 ms] I/flutter (21816): Row [ +26 ms] I/flutter (21816): * file:///C:/data/projects/flutter/E-commerce-Complete-Flutter-UI/lib/screens/cart/components/cart_card.dart:17:12 [ +25 ms] I/flutter (21816): The overflowing RenderFlex has an orientation of Axis.horizontal. [ +3 ms] I/flutter (21816): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and [ +1 ms] I/flutter (21816): black striped pattern. This is usually caused by the contents being too big for the RenderFlex. [ +4 ms] I/flutter (21816): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the [ +4 ms] I/flutter (21816): RenderFlex to fit within the available space instead of being sized to their natural size. [ +16 ms] I/flutter (21816): This is considered an error condition because it indicates that there is content that cannot be [ +20 ms] I/flutter (21816): seen. If the content is legitimately bigger than the available space, consider clipping it with a [ +5 ms] I/flutter (21816): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, [ +1 ms] I/flutter (21816): like a ListView. [ +3 ms] I/flutter (21816): The specific RenderFlex in question is: RenderFlex#509ad relayoutBoundary=up10 OVERFLOWING: [ +5 ms] I/flutter (21816): creator: Row ← CartCard ← FractionalTranslation ← SlideTransition ← Stack ← Listener ← [ +13 ms] I/flutter (21816): _GestureSemantics ← RawGestureDetector ← GestureDetector ← Dismissible-[<'1'>] ← Padding ← [ +32 ms] I/flutter (21816): RepaintBoundary ← β‹― [ +19 ms] I/flutter (21816): parentData: (can use size) [ +5 ms] I/flutter (21816): constraints: BoxConstraints(0.0<=w<=321.6, 0.0<=h<=Infinity) [ +1 ms] I/flutter (21816): size: Size(321.6, 100.0) [ +3 ms] I/flutter (21816): direction: horizontal [ +5 ms] I/flutter (21816): mainAxisAlignment: start [ +43 ms] I/flutter (21816): mainAxisSize: max [ +7 ms] I/flutter (21816): crossAxisAlignment: center [ +22 ms] I/flutter (21816): textDirection: ltr [ +2 ms] I/flutter (21816): verticalDirection: down [ +4 ms] I/flutter (21816): β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€β—’β—€ [ +14 ms] I/flutter (21816): ════════════════════════════════════════════════════════════════════════════════════════════════════ [ +6 ms] I/flutter (21816): Another exception was thrown: A RenderFlex overflowed by 7.4 pixels on the right. WhatsApp Image 2021-01-30 at 10 03 47 PM

    opened by upendra-bajpai 0
  • add Page Views

    add Page Views

    When we add this service, it will count every hit of this repo. And this will guide us more about the visitors each day and will indicate the total views. For me, this is very helpful both for us and for those will view this repo seeing this page views. If there is the website built from this repo, it can be simply added there too.

    Even if you have the YouTube video that will count the views, this is another one as it will tell whether visitors is coming from GitHub or from YouTube.

    Screenshot (1638)

    opened by jdevstatic 0
  • Architecture

    Architecture

    Hello,

    Which architecture you use for this project? 'Classic', MVP, MVVM, RxAndroid, Flux? I would like to write down architecture for it, but I don't know with what assumptions you created it.

    opened by DawidGrzejek 0
  • Right overflow by x pixel at checkout screen

    Right overflow by x pixel at checkout screen

    Hello, I installed the app to my Redmi Go phone (Android 8.1.0). I have got right overflow error at checkout screen. Screenshot is attached. Thank you for this great app, Best regards, Ozgur!

    RightOverflow

    opened by ozdeozgu 3
Owner
Abu Anwar
Google Developer Expert - Flutter & Dart | Founder of The Flutter Way
Abu Anwar
Flutter Shop UI - an e-commerce app using Flutter

If you are planning to create an e-commerce app using Flutter then this Shop UI Kit would be the perfect choice for you to make a gorgeous app for both Android & iOS.

TrαΊ§n VΔƒn NguyΓͺn 21 Nov 21, 2022
E-Commerce App built in flutter

flutter_ecommerce_app E-Commerce app is a design implementaion of E-commerce App designed by Imran Download App Android Screenshots HomePage Product D

Sonu Sharma 2.5k Jan 3, 2023
Demo UI of e-commerce app made with Flutter.

Flutter Ecommerce App UI Demo A sample application to show an Ecommerce App Flutter Clone. Demo Android Screen iOS Screen Getting Started This project

FlutterDevs 345 Jan 5, 2023
E commerce App using Flutter

buy_it A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this i

HusseinElbhrawy 0 Nov 15, 2021
Open Flutter E-commerce App

Open E-commerce App Open Flutter Project E-commerce App is mobile application for e-commerce. We are building a commercially valuable product as an op

null 666 Dec 23, 2022
App that simulates an e-commerce of natural products with Flutter and Dart

E-commerce Orgs App que simula um e-commerce de produtos naturais para o curso de navegação e rotas com nuvigator através do Flutter e Dart. ?? Funcio

Heliomar P. Marques 1 Feb 18, 2022
Flutter E-commerce mobile app with Firebase

ecommerce A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

null 0 Dec 27, 2021
Flutter E-Commerce App UI with support for dark and light mode.

Flutter E-Commerce App UI with support for dark and light mode.

Martin GogoΕ‚owicz 18 Aug 19, 2022
A nice clean onboarding screen for your e-commerce app that can run both Andriod and iOS devices because it builds with flutter

A nice clean onboarding screen for your e-commerce app that can run both Andriod and iOS devices because it builds with flutter

null 23 Dec 4, 2022
An e-commerce app built with Flutter

shopy A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this is

Matiullah Karimi 7 Sep 6, 2022
Basic e-commerce app made in Flutter and Supabase.

Available on Android / IOS Made in Flutter and Supabase Package Provider Supabase http Features Authentication filter products by discount, rating, ca

MontyDLemon 3 Nov 20, 2022
A Retro Theme-based e-commerce app for antiques. #Hack20

Motivation ?? ?? With the boons of internet ?? spreading worlwide over the last two decades, e-commerce has evolved to be one of the largest industrie

HIMANSHU SHARMA 79 Dec 19, 2022
πŸ› A full E-commerce app with nice UI consists of on-boarding, login, sign-up, home, product details, cart and user profile.

?? A full E-commerce app with nice UI consists of on-boarding, login, sign-up, home, product details, cart and user profile.

null 56 Nov 27, 2022
A e-commerce app.

ecom A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this is

Suvindran 0 Feb 16, 2022
Ecommerceapp - E-commerce app that sells clothing and home goods

E Commerce App for Shrine e-commerce app that sells clothing and home goods.

GΓΌlsen Keskin 3 Sep 17, 2022
A fakestore E-Commerce app

fakestore A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

Md Abir Ahsan Tahmim 0 Jul 14, 2022
E-commerce fullstack cross-platform app

Glamor Ecommerce Project Glamor e-ticaret projesinin aΓ§Δ±k kaynak kodudur. Γ–ΔŸeyi getirme metodlarΔ± (GET) /api/v1/product/all /api/v1/product/${prod

İsmail Ertuğlu 4 Nov 24, 2022
A small attempt to make an e-commerce user interface in Flutter for Android and iOS.

Flutter ecommerce App A small attempt to make an e-commerce user interface in Flutter for Android and iOS. I developed this application just for learn

Md Tarikul Islam 615 Jan 3, 2023
Flutter - E Commerce UI KIT ( completely free for everyone )

Flutter E-Commerce UI KIT A powerful Flutter E-Commerce starter template that bootstraps development of your mobile application. Flutter E-Commerce St

Muhammad Furqan 307 Dec 24, 2022