Fresh Mart Delivery App for E-commerce, Grocery Shopping App UI Kit in Flutter

Introduction

Welcome to the Fresh Mart Delivery App tutorial! In this comprehensive guide, we will walk you through the process of using the Fresh Mart Delivery App UI Kit in Flutter to create a seamless e-commerce and grocery shopping experience for your users. The Fresh Mart Delivery App UI Kit is a pre-designed Flutter package that provides a ready-to-use interface for your e-commerce and grocery shopping app.

Getting Started

Before we dive into the tutorial, make sure you have the following:

1. Flutter installed: You need to have Flutter installed on your machine. If you haven't installed Flutter yet, you can download it from the official Flutter website.
2. Fresh Mart Delivery App UI Kit: You need to have the Fresh Mart Delivery App UI Kit installed in your Flutter project. You can install it by running the following command in your terminal:

   flutter pub add fresh_mart_delivery_app_ui_kit

   Step 1: Setting up the App

To start using the Fresh Mart Delivery App UI Kit, you need to set up your app. Here's how:

1. Create a new Flutter project by running the following command in your terminal:

   flutter create my_app

2. Open the my_app directory and navigate to the lib folder.
3. Create a new file called main.dart and add the following code:

   
   import 'package:flutter/material.dart';
   import 'package:fresh_mart_delivery_app_ui_kit/fresh_mart_delivery_app_ui_kit.dart';

void main() { runApp(MyApp()); }

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Fresh Mart Delivery App', theme: ThemeData( primarySwatch: Colors.blue, ), home: FreshMartDeliveryApp(), ); } }

This code sets up a basic Flutter app with a `MaterialApp` widget and a `FreshMartDeliveryApp` widget as the home screen.

**Step 2: Configuring the App**

Before you can start using the Fresh Mart Delivery App UI Kit, you need to configure the app. Here's how:

1. Open the `fresh_mart_delivery_app_ui_kit.dart` file and add the following code:
```dart
import 'package:flutter/material.dart';
import 'package:fresh_mart_delivery_app_ui_kit/fresh_mart_delivery_app_ui_kit.dart';

class FreshMartDeliveryApp extends StatefulWidget {
  @override
  _FreshMartDeliveryAppState createState() => _FreshMartDeliveryAppState();
}

class _FreshMartDeliveryAppState extends State<FreshMartDeliveryApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fresh Mart Delivery App'),
      ),
      body: FreshMartDeliveryAppBody(),
    );
  }
}

This code sets up the basic structure of the app, including an AppBar and a Scaffold widget.

Step 3: Using the UI Kit

Now that you have set up the app, you can start using the Fresh Mart Delivery App UI Kit. Here's how:

1. Open the fresh_mart_delivery_app_ui_kit.dart file and add the following code:

   
   import 'package:flutter/material.dart';
   import 'package:fresh_mart_delivery_app_ui_kit/fresh_mart_delivery_app_ui_kit.dart';

class FreshMartDeliveryAppBody extends StatelessWidget { @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.all(16.0), child: Column( children: [ FreshMartDeliveryAppHeader(), FreshMartDeliveryAppSearchBar(), FreshMartDeliveryAppProductList(), ], ), ); } }

This code sets up the main body of the app, including a `Header`, a `SearchBar`, and a `ProductList`.

**Step 4: Customizing the UI Kit**

The Fresh Mart Delivery App UI Kit provides a lot of customization options to help you tailor the app to your needs. Here's how:

1. Open the `fresh_mart_delivery_app_ui_kit.dart` file and add the following code:
```dart
import 'package:flutter/material.dart';
import 'package:fresh_mart_delivery_app_ui_kit/fresh_mart_delivery_app_ui_kit.dart';

class FreshMartDeliveryAppHeader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text('Fresh Mart Delivery App'),
      actions: [
        IconButton(
          icon: Icon(Icons.notifications),
          onPressed: () {
            // Handle notification button press
          },
        ),
      ],
    );
  }
}

This code customizes the Header widget by adding a notification button.

Step 5: Adding Products

The Fresh Mart Delivery App UI Kit provides a ProductList widget that allows you to display a list of products. Here's how:

1. Open the fresh_mart_delivery_app_ui_kit.dart file and add the following code:

   
   import 'package:flutter/material.dart';
   import 'package:fresh_mart_delivery_app_ui_kit/fresh_mart_delivery_app_ui_kit.dart';

class FreshMartDeliveryAppProductList extends StatelessWidget { @override Widget build(BuildContext context) { return ListView.builder( itemCount: 10, itemBuilder: (context, index) { return ListTile( title: Text('Product ${index + 1}'), subtitle: Text('Description of product ${index + 1}'), trailing: Text('$${index + 1}.99'), ); }, ); } }

This code sets up a `ProductList` widget that displays a list of 10 products.

**Conclusion**

That's it! You have now completed the tutorial on how to use the Fresh Mart Delivery App UI Kit in Flutter. You have learned how to set up the app, configure the UI kit, customize the UI kit, and add products to the app. With this knowledge, you can start building your own e-commerce and grocery shopping app using the Fresh Mart Delivery App UI Kit.