abuanwar072/e-commerce-complete-flutter-ui

The FlutterShop template makes it easier to develop an e-commerce app using Flutter. It includes all the necessary pages to build a shopping app for both Android and iOS using flutter.

Flutter E-Commerce App Template

The FlutterShop template makes it easier to develop an e-commerce app using Flutter. It includes all the necessary pages to build a shopping app for both Android and iOS using flutter.

    

This shop app template comes with 100+ screens. Some of these pages are Splash, Login, Signup, Home, Product, Search, Cart, Profile, Payment, Wallet, Order Tracking, and Order History. Additionally, all pages support both light and dark themes.You just need to connect the UI to your preferred backend, such as Firebase, WordPress, or your custom API. You can do anything you want with it.

Well organized project very easy to customize

Loading is no longer boring [New update V1.1] Doc

The progress indicator that comes with Flutter, by default is okay in most places, but not in every place. Especially when you build an ecommerce app. This is why we have created a custom loading effect that boosts your user engagement even during the loading process. This kind of loading is common in popular apps like YouTube and LinkedIn. It's a small detail, but it makes a big difference.

Screens on the FlutterShop E-commerce Template

As mentioned, this kit contains 100+ nicely crafted minimal screens that cover everything you need!👇

Onboarding

• Onboarding Choose item
• Onboarding Add to cart
• Onboarding Pay online
• Onboarding Track order
• Onboarding Find store
• Notification permission
• Select language

Authentication

• Log in
• Forgot password
  • Choose verification method
  • Verification code
• Set new password
• Done reset password
• Sign up
  • Setup profile
  • Verification code
• Successfully sign up
• Terms and conditions
• Enable fingerprint
• Enable face ID

Product

• Product page
  • Notify when available (Out of stock)
  • Buy Now
  • Product details
  • Product reviews
  • Add review
  • Shipping methods
  • Product return policy
  • Product size guide
  • Store Pickup Availability
  • Added to cart message
  • Product gallery (Will be added soon)

Main Page

• Home page
• On sales page
• Kids product page
• Brand page
• Discover Page (Categories)
  • Style 1
  • Style 2 (Will be added soon)
  • Style 3 (Will be added soon)
• Bookmark products page

Search

• Recent search (Search history)
• Search suggestions
• Search filters
  • Size filter
  • Color filter
  • Brand filter
  • Price filter
  • Sort by
• Search results
  • Product not found

Cart

• Products on Cart
• Empty cart
• Choose address
• Review & payment
• Checkout / Payment method
  • Select card
  • Pay with cash
  • Use credit
• Thanks for order
• Add new card
• Scan card (Will be added soon)

Profile

• Account
  • Normal version
  • Pro version
  • Profile
    • Edit profile
  • Notifications
    • Empty notification
    • Enable notification
    • Notification options
  • Select Language
  • Addresses
    • Empty address
    • Add new address
  • Add number
    • Verification code
  • Selected location
  • Payment
    • Cards
    • Empty payment
  • Wallet
    • Empty Wallet
    • Wallet history
  • Help & Chat (Support)
    • Chat
  • Preferences

Order

• Account Orders
  • Processing orders
    • Cancel order
  • Canceled orders
  • Delivered orders
  • Return orders (Will be added soon)
  • More screens added in that sector soon

Return & Request (Will be added soon)

• Return order list
• Empty return order
• Return order
• Return detail

Error & Permission

• Notification permission
• No notification
• Select language
• No internet
• Server error
• Location permissions
• No search result
• Empty order list
• No Address found
• Empty payment
• Empty wallet

and MORE!!!! 🤩

If you want to learn how to build ecommerce template on Flutter watch the playlist on YouTube, In the first video, we start by making a neat onboarding screen for our shopping app. This works on both Android and iOS because it's made with Flutter. In the next video, we tackle the 'Sign In' and 'Forgot Password' screens, adding some unique error messages. The third video covers the 'Sign Up' and OTP processes. The fourth one is fun – we create the main homepage. In the fifth, we dive into the product page, and in the sixth, we craft an order page with cool features like 'swipe to delete.' Finally, in the seventh video, we design the user profile page.

Visit FlutterLibrary.com to Download the Flutter e-commerce app template & other templates, and components.

e-commerce-complete-flutter-ui's Issues

Some problems were found with the configuration of task

do yoy have any platform similar to UBER or Rappi??

show me please and write me by whatsapp [phone]

bottom tab navigator

Each navigation open as new page, even in tab pages, is there a easy fix for this please?

No License

Hello,

Wonderful Job bro. But can we use this for our app. there is no licence mentioned. is this open source ?

problem when upgrade Flutter version 2.0.0 to use

In Function and Widget deceparate can't not work to use widget instead please guide me.

Some problems were found with the configuration of task ':app:compileDebugRenderscript' (type 'RenderscriptCompile').

Hello, I've got this error when building the project.

Some problems were found with the configuration of task ':app:compileDebugRenderscript' (type 'RenderscriptCompile').
  - In plugin 'com.android.build.gradle.api.AndroidBasePlugin' type 'com.android.build.gradle.tasks.RenderscriptCompile' method 'useAndroidX()' should not be annotated with: @Input.

    Reason: Input/Output annotations are ignored if they are placed on something else than a getter.

    Possible solutions:
      1. Remove the annotations.
      2. Rename the method.

    Please refer to https://docs.gradle.org/7.6.1/userguide/validation_problems.html#ignored_annotations_on_method for more details about this problem.
  - In plugin 'com.android.build.gradle.api.AndroidBasePlugin' type 'com.android.build.gradle.tasks.RenderscriptCompile' property 'ndkConfig' is missing an input or output annotation.

    Reason: A property without annotation isn't considered during up-to-date checking.

    Possible solutions:
      1. Add an input or output annotation.
      2. Mark it as @Internal.

    Please refer to https://docs.gradle.org/7.6.1/userguide/validation_problems.html#missing_annotation for more details about this problem.

Would you have any suggestion?

I have tried to set the compileSdkVersion 31 but the error persist.

I'm on the latest Futter and Dart version.

Cant' connect to backend

Does this project with its code at present, allow integration with backend services i.e Firebase?

Will you add new screens ?

This screen are important, I hope they will be available :-
1 Order confirmation screen
2 Payment screen ( including modes of Payment)
3 Order Tracking screen
4 Refund or Return item screen
5 Chat screen for doubt regarding product
6 Apply coupon screen
7 Change Profile screen
8 Wishlist screen
9 Rewards screen
10 Customer review screen
11 Other products from same supplier screen
12 Help screen
13 Order History screen

This I can tell you for now other I will inform If I remember other kind of screen.
Hope you will continue add new screens and keep project alive.
And thanks for such a great work.

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 ?

Typos in README title

In README.md, the title has two typos.

• 'Complate' should be 'Complete'
• 'Staring' should be 'Starting'

Expecting binder but got null!

Built build/app/outputs/flutter-apk/app-debug.apk.
Connecting to VM Service at ws://127.0.0.1:53294/AfCO9wnDgC8=/ws
I/xample.shop_app(20166): Compiler allocated 4579KB to compile void android.view.ViewRootImpl.performTraversals()
W/Parcel (20166): Expecting binder but got null!

Deprecated classes

How could I fix these deprecations, guys?

For example TextButton highlights shape and color properties in VScode.

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: getProportionateScreenHeight(56),
      child: TextButton(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
        color: kPrimaryColor,
        onPressed: press,
        child: Text(
          text,
          style: TextStyle(
            fontSize: getProportionateScreenWidth(18),
            color: Colors.white,
          ),
        ),
      ),
    );
  }

flutter analyze

Analyzing E-commerce-Complete-Flutter-UI...                             

   info • 'FlatButton' is deprecated and shouldn't be used. Use TextButton
          instead. See the migration guide in
          flutter.dev/go/material-button-migration-guide). This feature
          was deprecated after v1.25.0-8.1.pre. •
          lib/components/default_button.dart:20:14 • deprecated_member_use
   info • 'FlatButton' is deprecated and shouldn't be used. Use TextButton
          instead. See the migration guide in
          flutter.dev/go/material-button-migration-guide). This feature
          was deprecated after v1.25.0-8.1.pre. •
          lib/components/rounded_icon_btn.dart:33:14 •
          deprecated_member_use
   info • Unused import:
          'package:shop_app/screens/profile/profile_screen.dart' •
          lib/main.dart:3:8 • unused_import
   info • Duplicate import • lib/models/Cart.dart:4:8 • duplicate_import
   info • 'FlatButton' is deprecated and shouldn't be used. Use TextButton
          instead. See the migration guide in
          flutter.dev/go/material-button-migration-guide). This feature
          was deprecated after v1.25.0-8.1.pre. •
          lib/screens/details/components/custom_app_bar.dart:26:22 •
          deprecated_member_use
   info • 'overflow' is deprecated and shouldn't be used. Use clipBehavior
          instead. See the migration guide in
          flutter.dev/go/clip-behavior. This feature was deprecated after
          v1.22.0-12.0.pre. •
          lib/screens/home/components/icon_btn_with_counter.dart:25:9 •
          deprecated_member_use
   info • 'Overflow' is deprecated and shouldn't be used. Use clipBehavior
          instead. See the migration guide in
          flutter.dev/go/clip-behavior. This feature was deprecated after
          v1.22.0-12.0.pre. •
          lib/screens/home/components/icon_btn_with_counter.dart:25:19 •
          deprecated_member_use
   info • 'FlatButton' is deprecated and shouldn't be used. Use TextButton
          instead. See the migration guide in
          flutter.dev/go/material-button-migration-guide). This feature
          was deprecated after v1.25.0-8.1.pre. •
          lib/screens/profile/components/profile_menu.dart:21:14 •
          deprecated_member_use
   info • 'overflow' is deprecated and shouldn't be used. Use clipBehavior
          instead. See the migration guide in
          flutter.dev/go/clip-behavior. This feature was deprecated after
          v1.22.0-12.0.pre. •
          lib/screens/profile/components/profile_pic.dart:16:9 •
          deprecated_member_use
   info • 'Overflow' is deprecated and shouldn't be used. Use clipBehavior
          instead. See the migration guide in
          flutter.dev/go/clip-behavior. This feature was deprecated after
          v1.22.0-12.0.pre. •
          lib/screens/profile/components/profile_pic.dart:16:19 •
          deprecated_member_use
   info • 'FlatButton' is deprecated and shouldn't be used. Use TextButton
          instead. See the migration guide in
          flutter.dev/go/material-button-migration-guide). This feature
          was deprecated after v1.25.0-8.1.pre. •
          lib/screens/profile/components/profile_pic.dart:27:22 •
          deprecated_member_use
   info • Name non-constant identifiers using lowerCamelCase •
          lib/screens/sign_up/components/sign_up_form.dart:20:10 •
          non_constant_identifier_names

12 issues found. (ran in 2.5s)

Add 4 digit PIN Authentication

Can you add PIN Authentication page? when App closed and reopened PIN page should opened

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?

Do you have any plans to develop a payment screen?

As the title says, do you have any plans to develop a payment screen? I'm asking because I just happened to update this app to the latest version and it would be nice to have a payment screen.

Create a Website for this Repo

Hi there.

Is there a website for this repo?

Because if you don't have, well, this repo can simply be turned into a website right away. Others will discover this project in that website.

Steps:

1. Go to Settings and look for GitHub Pages, scroll down. That's almost at the bottom.

2. You will see there: Branch:none, so you should change that to master because you have a README.md file in the master repo. This will be your page. Click Save first.

3. Then click Choose a theme, you select a predefined theme of your site.

4. Visit your site now! The URL will be https://abuanwar072.github.io/E-commerce-Complete-Flutter-UI.

If you were amazed by that, simply read the documentation about GitHub Pages.

Get email & password value on textField in login screen

How to get email & password value on textField in login screen?

I am facing this issue in my samsung j7nxt......

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!

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.

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.

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()}"

Error: Gradle task assembleDebug failed with exit code 1

[flutter_ecommerce_app] flutter pub get --no-example Resolving dependencies... The lower bound of "sdk: '>=2.6.0 <3.0.0'" must be 2.12.0' or higher to enable null safety. The current Dart SDK (3.1.2) only supports null safety. For details, see https://dart.dev/null-safety exit code 65

│ ext.kotlin_version = '<latest-version>'

Responsivity problem

I have a problem with responsivity my device is 5.2" but there are problems in displaying elements related to padding and margin !!

Ecommerce lab

E-commerce flutter ui

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

I am facing this issue in my Samsung j7 nxt....

Video Preview of UI

Hello,
Nice app, which software or website did you use to create this amazing video?

Migration: Deprecated Classes

• 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.

font error?

it is give me font error.. :(
Error detected in pubspec.yaml:
Error on line 65, column 7: While parsing a block collection, expected '-'.
╷
65 │ fonts:
│ ^
╵

Build failed due to use of deprecated Android v1 embedding.

Build failed due to use of deprecated Android v1 embedding For Android Developer..

How to Solve??

just go to to AndroidMainfest.xml file and paste this android:name="${applicationName}"