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
This is an E-commerce App that you can buy goods, it has no data base so all you see in this app are created as default

This is an E-commerce App that you can buy goods, it has no data base so all you see in this app are created as default. Once I create a server and connect with it, I will create another repository or simply update this one.

Khusan Flutter Dev 2 Feb 10, 2022
E-commerce App UI Using Flutter

E-commerce App - Flutter UI Watch it on YouTube Packages we are using: flutter_svg: link On our E-commerce app UI has two pages one for the product pa

null 4 Sep 12, 2022
E-commerce application ui in flutter

E-commerce application ui in flutter

Shailesh Mishra 111 Jan 5, 2023
Flutter E-commerce Bloc Arch Public Version

Mauve Flutter E-commerce Mauve E-commerce single vendor | Flutter BloC arch Tech Stack Client: Dart, Flutter Server: Firebase firestore Features, Tech

Youssef Elshiaty 24 Jan 4, 2023
Pet Shop is an e-commerce application for Android built with Flutter (iOS to come soon).

Check out my latest project >> MOVING PICTURES Pet Shop is an e-commerce application for Android built with Flutter (iOS to come soon). The goal is to

Nifemi 209 Dec 28, 2022
App-flutter-travel-app - Travel App Built Using Flutter

App-flutter-travel-app - Travel App Built Using Flutter

Sangvaleap Vanny 69 Dec 4, 2022
The Medito app is a 100% free meditation app built with flutter. The app is available on Android and iOS.

Medito App Meditation can positively transform people's lives. We believe no one should have to pay for it. We are the Medito Foundation, and we've bu

Medito Foundation 438 Dec 26, 2022
Flutter Responsive Game of Thrones Flutter App Flutter Responsive Game of Thrones Flutter App

got_2019 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

Pawan Kumar 16 Jun 9, 2022
Flutter Gender Prediction App Flutter Gender Prediction App

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

Pawan Kumar 30 May 31, 2022
Flutter Login Page Bloc Pattern App Flutter Login Page Bloc Pattern App

gdgbloc 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

Pawan Kumar 99 Oct 20, 2022
Flutter: QR Code Scanner App Flutter: QR Code Scanner App

Flutter QRCode Scanner APP Show some โค๏ธ and star the repo to support the project A new Flutter project. Features Scan 2D barcodes Scan QR codes Contro

Pawan Kumar 250 Nov 10, 2022
Phone-Store-App-UI-Flutter - Flutter Phone E-Store App UI with support for dark and light mode

Phone-Store-App-UI-Flutter - Flutter Phone E-Store App UI with support for dark and light mode

Jakub Sobaล„ski 2 Apr 30, 2022
Fingerprint Local Auth App Flutter Advanced Face ID & Touch ID/Fingerprint Local Auth App

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

Pawan Kumar 71 Dec 17, 2022
A Flutter app that demonstrates how to build a simple app using the SpaceX API created by the Very Good Ventures Team.

SpaceX Demo Developed with ?? by Very Good Ventures ?? A Flutter app that demonstrates how to build a simple app using the SpaceX API created by the V

Very Good Ventures 120 Dec 27, 2022
Package your Flutter app into OS-specific bundles (.app, .exe, etc.) via Dart or the command line.

flutter_app_packager Package your Flutter app into OS-specific bundles (.app, .exe, etc.) via Dart or the command line. The flutter_app_packager sourc

LeanFlutter 415 Jan 8, 2023
Flutter Sound Editing App - Midia App

Flutter Sound Editing App - Midia App I uploaded on youtube!! Thanks to Watch And Thanks to Subscribe!!! Introduction I'm working on a project to laun

Lomio 3 Nov 1, 2021
mezza 0 Nov 24, 2021
News app - News App using Flutter and Firebase Auth

News App in Flutter using Firebase Auth, Firebase Realtime Database & Times of I

Raunak Chatterjee 6 Nov 6, 2022