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 weather app with a minimalist design using the flutter_bloc library for state management.

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

null 1 Jul 9, 2022
Minimalist Flutter Todo App, built using BLoC pattern

Deer Minimalist Todo Planner app built around the idea of efficiency and clean aesthetic. Showcase Development Deer uses BLoC (Business Logic Componen

Aleksander Woźniak 355 Dec 24, 2022
Kite is the chat app with the most minimalist user experience.

Kite is the chat app with the most minimalist user experience. It's simple, easy to use and perfect for chatting with your friends in the classroom, at work or on the go.

Felipe Passos 1 Nov 19, 2021
A Package providing Core functionality/Template to start off a Clean Architecture based project

A Package providing Core functionality/Template to start off a Clean Architecture based project Features Provides with APIResult & UseCaseResult model

null 1 Dec 25, 2021
A flutter app for a wordpress websites with clean and elegant design. This app is available in free and pro version. You can choose to use the one you need.

?? Get Flutter for Wordpress Flutter for wordpress is currently available in free and pro version: Flutter for Wordpress Flutter for Wordpress Pro Bea

mcyos118 18 Dec 13, 2022
Flutter App to save notes secure, using cryptography, clean architecture and some design patterns.

notes 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

Gabriel Scotá 6 Mar 28, 2022
Arisshopuiiesm - Build a clean and elegant Shop UI design for your Flutter app

Flutter Tutorial - 2/3 Shop UI - From Scratch We will build a clean and elegant

Behruz Hurramov 3 Oct 29, 2022
A simple eCommerce Shop Application developed using Flutter And Firebase

?? E-commerce App "Spring" It's a simple eCommerce "Shop" Application developed using Flutter-Firebase. It has the feature of adding products to the a

null 1 Feb 18, 2022
Flutter Grocery UI - A Grocery eCommerce app build with flutter

grocery_shop_flutter A Grocery eCommerce app build with flutter. This app includ

Muhammad Bilal 12 May 17, 2022
An Ecommerce application built in Flutter using Firebase.

An Ecommerce application built in Flutter using Firebase.

Ashish Rawat 426 Jan 8, 2023
Full Ecommerce Flutter Project

Ecommerce Flutter Project It created for proffesinal app developing processes. Design You can download to the design in github folder.

Veli Bacik 53 Dec 17, 2022
A Ecommerce application where you can buy stuff online

eazeal 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

Sameer Pokharel 3 May 26, 2022
EcommerceApp dukan - Ecommerce app with static data

shop_now A new Flutter project. Getting Started #ScreenShots ![1](https://user-i

Nouman Ashraf 2 Jan 11, 2022
Flutter-task-planner-app - A beautiful task planner app design made in flutter.

Flutter Task Planner App Design Task Planner App is built with flutter. App design is based on Task Planner App designed by Purrweb UI. This app is st

Sourav Kumar Suman 692 Jan 2, 2023
Nimbus is a beautiful portfolio design built using flutter

nimbus This is Nimbus (Portfolio & CV), a beautifully designed portfolio website built with flutter. It is inspired by Web Genius Lab Designs on Behan

David-Legend 196 Dec 26, 2022
CLI package manager and template for Flutter

Slidy CLI package manager and template generator for Flutter. Generate Modules, Pages, Widgets, BLoCs, Controllers, tests and more. Slidy supports mob

Flutterando 768 Dec 20, 2022
GJAMAssist is an open source Flutter-based template for a business assistant application.

GJAMAssist is an open source Flutter-based template for a business assistant application. It has been designed to use Google Firebase as ba

Japan Gor 12 Oct 9, 2022
🍔😋 Grocery Shopping App template UI kit in Flutter

?? ?? Fryo - Grocery Shopping App template kit A Flutter UI template of a Grocery Shopping App I found on Uplabs. Design screens are on Uplabs. It's p

Victor Aremu 490 Jan 3, 2023
This repo contains the side menu UI for admin template

f9tech 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

F9 Info Technologies Pvt Ltd 0 Dec 11, 2021