Giter VIP home page Giter VIP logo

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

Flutter E-Commerce App Template

If you want to learn how to build this 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.

Video Preview of the Shop template

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

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

Contributors

abuanwar072 avatar akashsami avatar harshkc avatar manuinnz avatar sidikfaha avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

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

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.

bottom tab navigator

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

Video Preview of UI

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

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)

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

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?

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

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

No License

Hello,

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

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 ?

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.

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?

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.

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

Typos in README title

In README.md, the title has two typos.

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

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

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:
โ”‚ ^
โ•ต

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!
Captura de pantalla 2023-05-23 a la(s) 3 52 16

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.