How to Build a Flutter E-commerce App

Are you looking to build an e-commerce app using Flutter? Look no further! In this article, we will guide you through the process of building a Flutter e-commerce app from scratch.

Flutter is a powerful framework for building mobile applications that can run on both Android and iOS platforms. It is fast, efficient, and easy to use. With Flutter, you can build beautiful and responsive user interfaces that can be customized to fit your needs.

So, let's get started!

Setting up the Environment

Before we start building our e-commerce app, we need to set up our development environment. Here are the steps to follow:

1. Install Flutter: You can download Flutter from the official website. Follow the instructions to install it on your machine.

2. Install an IDE: You can use any IDE of your choice, but we recommend using Android Studio or Visual Studio Code. Both IDEs have excellent support for Flutter development.

3. Set up an emulator: You can use an emulator to test your app on different devices. You can set up an emulator using Android Studio or Visual Studio Code.

Once you have set up your development environment, you are ready to start building your e-commerce app.

Building the User Interface

The first step in building an e-commerce app is to design the user interface. The user interface is the most important part of any app, as it is what the user interacts with.

Flutter provides a wide range of widgets that you can use to build your user interface. Here are some of the widgets that we will be using in our e-commerce app:

• Scaffold: A widget that provides a basic structure for the app, including a navigation drawer, app bar, and body.

• AppBar: A widget that displays the app bar at the top of the screen.

• BottomNavigationBar: A widget that displays the bottom navigation bar.

• ListView: A widget that displays a list of items.

• Card: A widget that displays a card with a shadow effect.

• TextFormField: A widget that displays a text input field.

• FlatButton: A widget that displays a button.

• Image: A widget that displays an image.

Here is an example of what our e-commerce app's user interface might look like:

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('E-commerce App'),
      ),
      body: ListView(
        children: [
          Card(
            child: Column(
              children: [
                Image.network(
                  'https://picsum.photos/250?image=9',
                  height: 200,
                  fit: BoxFit.cover,
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Product Name',
                        style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: 10),
                      Text(
                        'Product Description',
                        style: TextStyle(
                          fontSize: 16,
                        ),
                      ),
                      SizedBox(height: 10),
                      TextFormField(
                        decoration: InputDecoration(
                          labelText: 'Quantity',
                        ),
                      ),
                      SizedBox(height: 10),
                      FlatButton(
                        onPressed: () {},
                        child: Text('Add to Cart'),
                        color: Colors.blue,
                        textColor: Colors.white,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_cart),
            label: 'Cart',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

This is just a basic example of what our e-commerce app's user interface might look like. You can customize it to fit your needs.

Adding Functionality

Now that we have designed our user interface, it's time to add functionality to our app. In an e-commerce app, the most important functionality is the ability to add products to the cart and checkout.

Here are the steps to follow:

1. Create a Product class: We need to create a Product class that will hold the information about each product, such as the name, description, price, and image.

class Product {
  final String name;
  final String description;
  final double price;
  final String image;

  Product({
    required this.name,
    required this.description,
    required this.price,
    required this.image,
  });
}

2. Create a Cart class: We need to create a Cart class that will hold the information about the products in the cart, such as the quantity and total price.

class Cart {
  final Product product;
  int quantity;

  Cart({
    required this.product,
    this.quantity = 1,
  });

  double get totalPrice => product.price * quantity;
}

3. Create a HomePage class: We need to modify the HomePage class to display a list of products and allow the user to add them to the cart.

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List<Product> _products = [
    Product(
      name: 'Product 1',
      description: 'Product 1 description',
      price: 10.0,
      image: 'https://picsum.photos/250?image=9',
    ),
    Product(
      name: 'Product 2',
      description: 'Product 2 description',
      price: 20.0,
      image: 'https://picsum.photos/250?image=10',
    ),
    Product(
      name: 'Product 3',
      description: 'Product 3 description',
      price: 30.0,
      image: 'https://picsum.photos/250?image=11',
    ),
  ];

  final List<Cart> _cart = [];

  void _addToCart(Product product) {
    final cartItem = _cart.firstWhere(
      (item) => item.product.name == product.name,
      orElse: () => Cart(product: product),
    );

    setState(() {
      cartItem.quantity++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('E-commerce App'),
      ),
      body: ListView.builder(
        itemCount: _products.length,
        itemBuilder: (context, index) {
          final product = _products[index];

          return Card(
            child: Column(
              children: [
                Image.network(
                  product.image,
                  height: 200,
                  fit: BoxFit.cover,
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        product.name,
                        style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: 10),
                      Text(
                        product.description,
                        style: TextStyle(
                          fontSize: 16,
                        ),
                      ),
                      SizedBox(height: 10),
                      TextFormField(
                        decoration: InputDecoration(
                          labelText: 'Quantity',
                        ),
                        initialValue: '1',
                        keyboardType: TextInputType.number,
                        onChanged: (value) {
                          final quantity = int.tryParse(value) ?? 1;

                          if (quantity < 1) {
                            return;
                          }

                          final cartItem = _cart.firstWhere(
                            (item) => item.product.name == product.name,
                            orElse: () => Cart(product: product),
                          );

                          setState(() {
                            cartItem.quantity = quantity;
                          });
                        },
                      ),
                      SizedBox(height: 10),
                      FlatButton(
                        onPressed: () {
                          _addToCart(product);
                        },
                        child: Text('Add to Cart'),
                        color: Colors.blue,
                        textColor: Colors.white,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          );
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_cart),
            label: 'Cart',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: 0,
        onTap: (index) {
          if (index == 1) {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => CartPage(cart: _cart),
              ),
            );
          }
        },
      ),
    );
  }
}

4. Create a CartPage class: We need to create a CartPage class that will display the products in the cart and allow the user to checkout.

class CartPage extends StatelessWidget {
  final List<Cart> cart;

  const CartPage({Key? key, required this.cart}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final total = cart.fold<double>(
      0.0,
      (previousValue, cartItem) => previousValue + cartItem.totalPrice,
    );

    return Scaffold(
      appBar: AppBar(
        title: Text('Cart'),
      ),
      body: ListView.builder(
        itemCount: cart.length,
        itemBuilder: (context, index) {
          final cartItem = cart[index];

          return ListTile(
            leading: Image.network(
              cartItem.product.image,
              height: 50,
              width: 50,
              fit: BoxFit.cover,
            ),
            title: Text(cartItem.product.name),
            subtitle: Text('\$${cartItem.product.price}'),
            trailing: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                IconButton(
                  onPressed: () {
                    if (cartItem.quantity > 1) {
                      cartItem.quantity--;

                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(
                          content: Text('Item removed from cart'),
                          duration: Duration(seconds: 1),
                        ),
                      );
                    } else {
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(
                          content: Text('Item removed from cart'),
                          duration: Duration(seconds: 1),
                          action: SnackBarAction(
                            label: 'Undo',
                            onPressed: () {
                              cartItem.quantity++;
                            },
                          ),
                        ),
                      );
                    }
                  },
                  icon: Icon(Icons.remove),
                ),
                Text(cartItem.quantity.toString()),
                IconButton(
                  onPressed: () {
                    cartItem.quantity++;

                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text('Item added to cart'),
                        duration: Duration(seconds: 1),
                      ),
                    );
                  },
                  icon: Icon(Icons.add),
                ),
              ],
            ),
          );
        },
      ),
      bottomNavigationBar: BottomAppBar(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                'Total: \$${total.toStringAsFixed(2)}',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
              FlatButton(
                onPressed: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text('Checkout not implemented'),
                      duration: Duration(seconds: 1),
                    ),
                  );
                },
                child: Text('Checkout'),
                color: Colors.blue,
                textColor: Colors.white,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

And that's it! We have successfully built an e-commerce app using Flutter.

Conclusion

In this article, we have learned how to build an e-commerce app using Flutter. We have covered the basics of designing the user interface and adding functionality to the app.

Flutter is a powerful framework for building mobile applications, and it is easy to use. With Flutter, you can build beautiful and responsive user interfaces that can be customized to fit your needs.

We hope that this article has been helpful to you. If you have any questions or comments, please feel free to leave them below. Happy coding!

Editor Recommended Sites