This is an eCommerce minimalist template with a clean and beautiful design for Flutter.

Overview

Buy Me A Coffee

Shope - Free Flutter eCommerce Template Twitter URL Open Source Love

The “Shope” e-Commerce UI Kit has the goal to help you to save time with the frontend development. You can use this template to build your apps for Android and iOS in Flutter. The UI Kit includes all resources you need to reuse the components, it includes 38 screens, assets, icons, and fonts.

Flutter is Google’s portable UI toolkit for building beautiful, natively-compiled applications for mobile, web, and desktop from a single codebase.

  1. Minimalist Design
  2. Clean and Structured code
  3. Reusable Components

mockup-intro

mockup-screens

Watch the video

youtube-video

Download the Android APK

youtube-video

Support me

If this is template is useful for you and you want to support me buy me a coffe!. This will give me motivation to keep doing more content like this.

Do you want to add more features? Reach me out

Comments
  • Step by step tutorial to run the templete in VS code

    Step by step tutorial to run the templete in VS code

    Hi Roberto,

    I encounter issue running your template in VS code. Would appreciate if you can do a video tutorial on how to use/run the template.

    Thank you.

    opened by clerry 2
  • when I tap on listview reverse animation is working instead of items in list

    when I tap on listview reverse animation is working instead of items in list

    Hello Roberto First thing first, thank you so much this is such a wonderful repository Actually this is not a repository issue, this is happened when i tried to add list to the category, hope you will help me with this. I am trying to create a category page where on click on specific category(image) will expand the list items and by clicking on the same category(image) the list items will collapse(close), my problem here is listview should not collapse on clicking the listview items instead it should go to other page, here is what i tried

    import 'package:flutter/material.dart';
    import 'package:parallax_image/parallax_image.dart';
    import 'package:ecommerce_int2/screens/staggeredList/card_list_screen.dart';
    
    class CCategoryCard extends StatelessWidget {
      final Color begin;
      final Color end;
      final String categoryName;
      final String assetPath;
    
      CCategoryCard(
          {Key key,
            this.controller,
            this.begin,
            this.end,
            this.categoryName,
            this.assetPath})
          :
    
            height = Tween<double>(begin: 200, end: 150.0).animate(
              CurvedAnimation(
                parent: controller,
                curve: Interval(
                  0.0,
                  0.400,
                  curve: Curves.ease,
                ),
              ),
            ),
            itemHeight = Tween<double>(begin: 0, end: 180.0).animate(
              CurvedAnimation(
                parent: controller,
                curve: Interval(
                  0.0,
                  0.900,
                  curve: Curves.ease,
                ),
              ),
            ),
    
            super(key: key);
    
    
      final Animation<double> controller;
      final Animation<double> height;
      final Animation<double> itemHeight;
    
      Widget _buildAnimation(BuildContext context, Widget child) {
        return Container(
          child: Column(
            children: <Widget>[
                   Container(
                    height: height.value,
                    width: MediaQuery.of(context).size.width,
    
                      child: new ParallaxImage(
                        extent: 200.0,
    
                        image: new AssetImage(
                          assetPath,
                        ),
    
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children:<Widget>[
                          Container(
                            padding: const EdgeInsets.all(16.0),
                            alignment: Alignment(-1, 0),
                            child: new Text(categoryName,
                            style: TextStyle(fontSize: 22,
                                color: Colors.white,
                                fontWeight: FontWeight.bold),),),
    
                          Container(
                            //padding: const EdgeInsets.all(16.0),
                              decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.all(Radius.circular(24))),
                            padding:
                            const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
                            child: Text(
                              'View more',
                              style: TextStyle(color: end, fontWeight: FontWeight.bold),
                            ),),],),),
                  ),
    
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.only(bottom: 16.0),
                    height: itemHeight.value,
                    child:  CardListScreen(),       //list view
                  ),
                ],
              ),
            ],
          ),
        );
      }
    
      @override
      Widget build(BuildContext context) {
        return AnimatedBuilder(
          builder: _buildAnimation,
          animation: controller,
        );
      }
    }
    
    class StaggeredCardCard extends StatefulWidget {
      final Color begin;
      final Color end;
      final String categoryName;
      final String assetPath;
      final String imagePath;
    
      const StaggeredCardCard(
          {Key key, this.begin, this.end, this.categoryName, this.assetPath, this.imagePath})
          : super(key: key);
    
      @override
      _StaggeredCardCardState createState() => _StaggeredCardCardState();
    }
    
    class _StaggeredCardCardState extends State<StaggeredCardCard>
        with TickerProviderStateMixin {
      AnimationController _controller;
      bool isActive = false;
    
      @override
      void initState() {
        super.initState();
    
        _controller = AnimationController(
            duration: const Duration(milliseconds: 300), vsync: this);
      }
    
    
      Future<void> _playAnimation() async {
        try {
          await _controller.forward().orCancel;
        } on TickerCanceled {
          // the animation got canceled, probably because we were disposed
        }
      }
    
      Future<void> _reverseAnimation() async {
        try {
          await _controller.reverse().orCancel;
        } on TickerCanceled {
          // the animation got canceled, probably because we were disposed
        }
      }
    
      @override
      Widget build(BuildContext context) {
        var timeDilation = 10.0; // 1.0 is normal animation speed.
        return GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () {
            if (isActive) {
              isActive = !isActive;
              _reverseAnimation();
            }
    
            else {
              isActive = !isActive;
              _playAnimation();
            }
          },
          child: CCategoryCard(
            controller: _controller.view,
            categoryName: widget.categoryName,
            begin: widget.begin,
            end: widget.end,
            assetPath: widget.assetPath,
          ),
        );
      }
    }
    

    Even on clicking the l list view the reverseAnimation is happening, which in my case it is not required please help me out

    opened by SriRamGovardhanam 1
  • issue with BoxDecoration function

    issue with BoxDecoration function

    Untitled

    Compiler message: lib/screens/auth/confirm_otp_page.dart:180:47: Error: The argument type 'BoxDecoration Function(Color)' can't be assigned to the parameter type 'BoxDecoration Function(Color, Color, {double borderWidth, double radius})'.

    • 'BoxDecoration' is from 'package:flutter/src/painting/box_decoration.dart' ('/E:/flutter/packages/flutter/lib/src/painting/box_decoration.dart').
    • 'Color' is from 'dart:ui'. pinBoxDecoration: (color) { ^ /E:/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_svg-0.14.4/lib/src/picture_stream.dart:92:3: Error: The superclass, 'Diagnosticable', has no unnamed constructor that takes no arguments. PictureStream(); ^^^^^^^^^^^^^ /E:/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_svg-0.14.4/lib/src/picture_stream.dart:192:16: Error: The superclass, 'Diagnosticable', has no unnamed constructor that takes no arguments. abstract class PictureStreamCompleter extends Diagnosticable { ^

    Compiler message: lib/screens/auth/confirm_otp_page.dart:180:47: Error: The argument type 'BoxDecoration Function(Color)' can't be assigned to the parameter type 'BoxDecoration Function(Color, Color, {double borderWidth, double radius})'.

    • 'BoxDecoration' is from 'package:flutter/src/painting/box_decoration.dart' ('/E:/flutter/packages/flutter/lib/src/painting/box_decoration.dart').
    • 'Color' is from 'dart:ui'. pinBoxDecoration: (color) { ^ /E:/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_svg-0.14.4/lib/src/picture_stream.dart:92:3: Error: The superclass, 'Diagnosticable', has no unnamed constructor that takes no arguments. PictureStream(); ^^^^^^^^^^^^^ /E:/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_svg-0.14.4/lib/src/picture_stream.dart:192:16: Error: The superclass, 'Diagnosticable', has no unnamed constructor that takes no arguments. abstract class PictureStreamCompleter extends Diagnosticable { ^ Target kernel_snapshot failed: Exception: Errors during snapshot creation: null build failed.

    FAILURE: Build failed with an exception.

    • Where: Script 'E:\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 882

    • What went wrong: Execution failed for task ':app:compileFlutterBuildDebug'.

    Process 'command 'E:\flutter\bin\flutter.bat'' finished with non-zero exit value 1

    • Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

    • Get more help at https://help.gradle.org

    BUILD FAILED in 25s Exception: Gradle task assembleDebug failed with exit code 1

    opened by pythonAeny 1
  • Runtime Error while running the project

    Runtime Error while running the project

    Hello Robert,

    I downloaded your project file but it shows me error message while running the application

    The supplied phased action failed with an exception. A problem occurred configuring root project 'android'. A problem occurred evaluating root project 'android'. A problem occurred configuring project ':app'. A problem occurred evaluating project ':app'. Screenshot 2022-08-22 at 3 49 31 PM

    Flutter SDK not found. Define location with flutter.sdk in the local.properties file.

    opened by rajivyadav23 1
  • Black Screen after Intro_page

    Black Screen after Intro_page

    Hello, I just downloaded this flutter code template and I have problem. It display black screen after the intro_page. I tried this on my other device and it does not show a black screen. How to solve this?

    opened by jonywk 1
Owner
Roberto Juarez
I am a passionate Software Engineer, Musician and Writer, with 4+ years of experience and now exploring the amazing world of Flutter
Roberto Juarez
A ecommerce app created in flutter implementing the features add to cart, total ,add, remove item and a login function

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

null 0 Nov 27, 2021
An Ecommerce application built in Flutter using Firebase.

Flutter-Commerce An Ecommerce application built in Flutter using Firebase. Getting started Project setup instructions are given at Wiki section. Scree

Ashish Rawat 423 Dec 31, 2022
Flutter Ecommerce App UI

Flutter Ecommerce App UI Watch it on YouTube Flutter Ecommerce App UI | Speed Code In this video we will create two screens for ecommerce app using #f

Gihan Lakshan 7 May 27, 2022
Flutter Ecommerce app connect with firebase database

ecomerce 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

Rajilatha 0 Nov 8, 2021
An eCommerce Application developed using Flutter+Firebase

EShopee: Flutter eCommerce App Status ?? EShopee App ?? Under testing... ?? Abou

null 8 Oct 31, 2022
Adidas Shoes Ecommerce App UI

Adidas Shoes Ecommerce App UI Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this i

Abdi Hamid 381 Dec 24, 2022
An opensource multivendor ecommerce app .

cloudcart 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

Muhammad Saad Shafiq 1 Nov 16, 2021
LuxOutfit is an Ecommerce mobile app

LuxOutfit • Ui / Ux DESIGN • See LICENSE As online sales are constantly growing, the retail field strives to offer customers the best deals and user-f

RAHUL SHARMA 3 Jul 2, 2022
Flutter Beautiful Login Page design and Animation - day 12

Flutter Beautiful Login Page design and Animation - day 12

Mohammad Rahmani 296 Jan 1, 2023
I am trying to teach Responsive Ui design. This video for Web and Mobile. This design is suitable for Desktop, Tab, and Mobile platforms.

before clone the GitHub repository please give a star on the repository. I am trying to teach Responsive Ui design. This video for Web and Mobile. Thi

Blackshadow Software Ltd 22 Sep 1, 2022
Flutter Grocery Shopping App Fully Working Template with WooCommerce API integration

Grocery-App (Widle Studio - A Creative Flutter App Development Company) OR Get an Estimate Flutter Grocery Shopping App Fully Working Template with Wo

Widle Studio LLP 812 Dec 31, 2022
Nice and clean Online Shop app UI by using #Flutter.

On our E-commerce app UI has two pages one for the product page which has a horizontal list of categories then a list of our products. Then on the details page, it shows the price and short description of the product with the Buy Now button. The best part of our E-commerce app is, each product has its own color which looks great.

Abu Anwar 1.7k Jan 3, 2023
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
Nice clean plant app UI using flutter

Plant App - Flutter UI Watch it on YouTube Packages we are using: flutter_svg: link Nice clean plant app UI using flutter, the Home page you will get

null 0 Nov 24, 2021
A nice clean Motorcycle Helmets Online Store Mobile App UI

Motorcycle Helmets Online Store - Mobile App Watch it on YouTube Motorcycle Helmets Online Store A nice clean Motorcycle Helmets Online Store Mobile A

Tushar Mahmud 4 Mar 29, 2022
Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.

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

IQBAL HASAN 3 Aug 24, 2022
Flutter Beautiful Login Signup UI

Flutter Beautiful Login Signup UI

Mohamed Ben Halima 14 Oct 19, 2022
Build Beautiful UIs with Flutter Widgets

I learnt this following thing from this project How to create Stateless Widgets What is the difference between hot reload and hot refresh and running

Chitraarasu.k 2 Dec 31, 2021
Beautiful Login Page In Flutter

Beautiful Login Page In Flutter Create a login and signup page in flutter. This amazing app is provided in open source. So, helpful contributions are

null 6 Sep 22, 2022