“Flutter UI Kit for E-commerce(Grocery App)” Documentation by “Thriftysoft” v1.1


“Flutter UI Kit for E-commerce(Grocery App)”

Created: 06/12/2019
Last Updated:04/04/2020
By: Thriftysoft
Email: admin@thriftysoft.tech

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. Installation
  2. Getting Started
  3. How to use UI Kit
  4. Build & Install the App

A) Installation - top

It is a Flutter UI Kit for E-commerce Mobile Application, specially designed for Farm products and groceries.more than 40 screens, widgets, empty states are given with different animations like Hero Animation, fade-in, pop-up, slide, etc. you can customize it as per your requirement. Since it is written in Flutter (Dart Language), so no need to write it separately for Android and IOS. The same code will be used for both platforms. The same code is used for iOS and Android.

Setting Flutter Environment

Follow base on the operating system on which you are installing Flutter:


B) Getting Started - top


C) How to use UI Kit - top

Read the details given below to know how you can reuse this UI kit in your own project. In the ecommerce-ui-kit/lib/ directory you will find five subdirectories and a main.dart file.


  1. Main File (main.dart)
  2. The main file contains global configuration (Title / Themes / Font Family / Colors...) of the App and initiates the initial route of the app.

    //........ MaterialApp( debugShowCheckedModeBanner: false, home: Splashscreen(), theme: ThemeData( primaryColor: Colors.red[500], accentColor: Colors.red[500], fontFamily: 'Roboto', selectedRowColor: Colors.red[200], primaryColorLight: Colors.red[200], ), initialRoute: '/', onGenerateRoute: RouteGenerator.generateRoute, ........//

  3. Controllers (controllers)
  4. The controller directory in ecommerce-ui-kit/lib/controllers/ holds controller files and subdirectories that helps a user or the ui component access the data models in an efficient and true manner. HTML Structure

    routes.dart

    The navigation mode in E-Commerce Flutter App UI Kit is route aspect it's easy and flexible approach. It holds all the routes and the route generator class which helps in routing the app through screens, models, provider, controllers etc.

    Example: //..... class RouteGenerator { static Route<dynamic> generateRoute(RouteSettings settings) { // Getting arguments passed in while calling Navigator.pushNamed final args = settings.arguments; switch (settings.name) { case '/': return MaterialPageRoute( builder: (_) => MyApp(), ); case '/cart': // Validation of correct data type return MaterialPageRoute( builder: (_) => Cart_main( cart_item_len: args, ), ); case '/login': return MaterialPageRoute( builder: (_) => Login(), ); .....//

    product_controller.dart

    This class provides a controller that helps fetch a dynamic product list as a gridlist.

    Example: //...... return GridView.builder( padding: const EdgeInsets.only(top: 10, bottom: 10.0, right: 20), gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, mainAxisSpacing: 5.0, crossAxisSpacing: 5.0, ), itemCount: snapshot.data.length, ......//

  5. Models (models)
  6. In this directory ecommerce-ui-kit /lib/models/ you should find all models and Entities used in the App which you can link them with your backend (Firebase, PHP, JAVA, or other APIs). This directory has several files that are basic data models which help provide some flexible data model structures.

    HTML Structure

    order_model.dart

    This model has a sample class with variables to form a model for an order fulfilment used for storing data components regarding an order. It is reusable and scalable.

    Example: //........ class Order { String stationID; String userID; String orderID; List products; String status; String totalQuantity; String totalPrice; String deliveryFee; String statusTag; String stationName; Timestamp timestamp; String deliveryAddress; Order() { this.stationID = ''; this.userID = ''; this.orderID = ''; this.status = ''; this.deliveryFee = ''; this.totalQuantity = ''; this.totalPrice = ''; } .....//

  7. Provider (provider)
  8. This directory ecommerce-ui-kit/lib/provider/ holds several subdirectories and files that have helper classes which fetch, push data from sources like firebase, firestore etc

    HTML Structure

  9. Screens (screens)
  10. These are the Screen available in ecommerce-ui-kit/lib/screens, ready to be used in your app. these includes login/signup, my cart, payment, product view and profile page etc..

    HTML Structure

    login_screen.dart

    This file provides a class which holds an impressive login ui. It has two tabs one for login and one for sign up

    Example: //..... debugShowCheckedModeBanner: false, home: DefaultTabController( length: 2, child: Scaffold( resizeToAvoidBottomPadding: false, appBar: PreferredSize( preferredSize: Size.fromHeight(60.0), child: AppBar( backgroundColor:Theme.of(context).primaryColor, bottom: TabBar( controller: _tabcontroller, tabs: <Tab>[ new Tab( child: Padding( padding:EdgeInsets.only(bottom: 5.0), child: Text('Login', style: TextStyle( color: Colors.white, fontSize: 20.0, fontWeight: FontWeight.w800, fontFamily: 'Canterbury', ), ), ), ), new Tab( child: Padding( padding:EdgeInsets.only(bottom: 5.0), child: Text('Sign Up', style: TextStyle(..........

  11. Widgets (widgets)
  12. This directory ecommerce-ui-kit/lib/widgets/ holds files for some extra widget like components.

    HTML Structure

    notifications.dart

    This file has a class that helps having in app notifications. In the code snippet below the container has fields filled for a sample notification.

    Example: //… Container( margin: EdgeInsets.all(10), width: 60, height: 60, decoration: BoxDecoration( borderRadius: BorderRadius.circular(10,), image: DecorationImage( image: AssetImage('asset/apple.png',), fit: BoxFit.cover) ), ), Padding( padding: EdgeInsets.only(left: 20.0), child: Text('Two kg apples for 250rs only\n-Arun merchants', style: TextStyle( //…

  13. Additional Components
  14. In the directory ecommerce-ui-kit/asset/ there are sample image files and assets that are provided in the Ecommerce UI kit. These assets are only for demonstration purposes, Use your own assets in production.

    HTML Structure

D) Build & Install the App - top

  1. After you make all your changes and customizations save the project.
  2. Open Console, navigate to your project folder
  3. Run flutter build apk --release you should get the apk file in the /output folder
  4. Run flutter install to install your application on your connected device

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Thriftysoft

Go To Table of Contents