Shopier Multi-Vendor Flutter Complete mobile UI/UX

Introduction

Welcome to the Shopier Multi-Vendor Flutter Complete mobile UI/UX tutorial! With this comprehensive guide, we will walk you through setting up and customizing Shopier's Multi-Vendor Flutter Complete mobile UI/UX, a popular Open-source e-commerce solution on Flutter. This tutorial aims to help you get familiar with the Shopier package, its features, and how to use it effectively to build a fully-featured e-commerce app. By the end of this tutorial, you will be able to create a professionally-designed e-commerce app, complete with vendor management, product listing, payment integrations, and more. So, let's dive in!

Step 1: Setting up the Shopier Multi-Vendor Flutter Complete

Before starting, make sure you have the following:

• Flutter installed on your machine
• A code editor or IDE of your choice
• The latest version of the Shopier Multi-Vendor Flutter Complete package

To set up Shopier, follow these steps:

1. Create a new Flutter project by opening your terminal or command line and running the command:

   flutter create [project_name]

   Replace [project_name] with the desired name for your project.

2. Open the project folder in your code editor and navigate to the lib directory.
3. Run the following command in your terminal to add Shopier to your project:

   flutter pub add shopier_multi_vendor_flutter_complete

4. Wait for Shopier to be installed.

Step 2: Configuring Shopier Multi-Vendor Flutter Complete

Now that Shopier is installed, let's configure it. Open the lib directory and open the main.dart file. This file serves as the entry point for your Flutter app.

You'll see a few places where you need to modify the code to configure Shopier. Here's an example of what you can do:

1. Create a new file called shopier_config.dart. This file will hold our Shopier configuration settings:

   
   import 'package:shopier_multi_vendor_flutter_complete/shopier_config.dart';

void main() { ShopierConfig shopierConfig = ShopierConfig( // Your Shopier secret key secretKey: 'YOUR_SECRET_KEY', // Your shop name shopName: 'Your Shop', // Your shop title shopTitle: 'Your Shop Title', );

runApp(MultiVendorApp(shopierConfig)); }

Replace `YOUR_SECRET_KEY` with your actual Shopier secret key, which you can obtain by creating an account on Shopier's website.

2. Update the `MaterialApp` widget in the `main.dart` file to use the `shopierConfig` object created in the previous step:

```dart
import 'package:flutter/material.dart';
import 'package:shopier_multi_vendor_flutter_complete/shopier_config.dart';

void main() {
  ShopierConfig shopierConfig = ShopierConfig(
    // Your Shopier secret key
    secretKey: 'YOUR_SECRET_KEY',
    // Your shop name
    shopName: 'Your Shop',
    // Your shop title
    shopTitle: 'Your Shop Title',
  );

  runApp(MyApp(shopierConfig));
}

class MyApp extends StatelessWidget {
  final ShopierConfig shopierConfig;

  MyApp(this.shopierConfig);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Use the shopierConfig object
      title: shopierConfig.shopName,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyAppHome(),
    );
  }
}

Run the app by clicking on the "Run" button in your IDE or executing the command flutter run in your terminal.

Step 3: Creating Vendors and Managing Products

Now that your app is set up and configured, let's learn how to create vendors and manage products.

1. Vendors: To create vendors, navigate to the /vendors route by opening the MyApp widget and adding the Navigator widget to redirect to the /vendors route:

   class MyApp extends StatelessWidget {
   final ShopierConfig shopierConfig;
   
   MyApp(this.shopierConfig);
   
   @override
   Widget build(BuildContext context) {
   return MaterialApp(
     title: shopierConfig.shopName,
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: MyAppHome(),
     routes: {
       '/vendors': (_) => VendorsPage(shopierConfig),
     },
   );
   }
   }

2. Products: To create and manage products, navigate to the /products route:

class MyHomePage extends StatelessWidget {
  final ShopierConfig shopierConfig;

  MyHomePage(this.shopierConfig);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shopier Multi-Vendor Flutter Complete'),
      ),
      body: ListView(
        children: [
          ListTile(
            title: Text('Create Product'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => NewProductPage(shopierConfig)),
              );
            },
          ),
        ],
      ),
    );
  }
}

Note: This is just the beginning of the tutorial! In the next part of this tutorial, we'll explore more advanced topics and features of Shopier's Multi-Vendor Flutter Complete package.