Creating a Shopping Card View in Flutter

In this tutorial, we will learn how to create a shopping card view in Flutter. The shopping card view will display a list of products, including their names, images, ratings, shop names, and prices. We will use the Flutter framework to build the user interface and create a custom widget to represent each product card.

Table of Contents:

1. Setting up the Project
2. Building the Shopping Card View
3. Creating the Product Card Widget
4. Displaying the Product Cards
5. Conclusion

1. Setting up the Project:

To begin, make sure you have Flutter installed on your system. Create a new Flutter project and replace the default code in the main.dart file with the following code:

import 'package:flutter/material.dart';

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

class ShoppingCardApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shopping Card View',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ShoppingCard(),
    );
  }
}

2. Building the Shopping Card View:

Inside the main.dart file, create a new StatefulWidget called ShoppingCard. This widget will serve as the main container for the shopping card view. In the build method of the ShoppingCardState, return a Scaffold widget with an AppBar and a body containing a ListView.

class ShoppingCard extends StatefulWidget {
  @override
  _ShoppingCardState createState() => _ShoppingCardState();
}

class _ShoppingCardState extends State<ShoppingCard> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Shopping Card View"),
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: <Widget>[
          // Product cards will be displayed here
        ],
      ),
    );
  }
}

3. Creating the Product Card Widget:

Next, we need to create a custom widget to represent each product card. Create a new StatefulWidget called _ProductListWidget. This widget will take various properties such as the product name, image URL, shop name, star rating, price, and a BuildContext.

class _ProductListWidget extends StatefulWidget {
  final String name, image, shopName;
  final double star;
  final int price;
  final BuildContext buildContext;

  const _ProductListWidget({
    Key? key,
    required this.name,
    required this.image,
    required this.shopName,
    required this.star,
    required this.price,
    required this.buildContext,
  }) : super(key: key);

  @override
  __ProductListWidgetState createState() => __ProductListWidgetState();
}

class __ProductListWidgetState extends State<_ProductListWidget> {
  // State implementation for the product card widget
}

Inside the __ProductListWidgetState's build method, return a Card widget that represents the product card. The card will contain a Row with a Hero widget for the product image, and a Container for the product details.

class __ProductListWidgetState extends State<_ProductListWidget> {
  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 8,
      child: Row(
        children: <Widget>[
          Hero(
            tag: 'Home',
            child: ClipRRect(
              borderRadius: const BorderRadius.all(Radius.circular(8)),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Image.network(
                  widget.image,
                  height: 90.0,
                  width: 90.0,
                  fit: BoxFit.fill,
                ),
              ),
            ),
          ),
          const SizedBox(
            width: 20,
          ),
          Expanded(
            child: Container(
              height: 90,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  // Product details will be displayed here
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

4. Displaying the Product Cards:

In the build method of the ShoppingCardState, create multiple instances of the _ProductListWidget to display the product cards. Customize the properties for each product card, such as the name, image URL, shop name, star rating, and price.

class _ShoppingCardState extends State<ShoppingCard> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Shopping Card View"),
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: <Widget>[
          Container(
            margin: const EdgeInsets.only(top: 24),
            child: _ProductListWidget(
              name: "Men's clothing",
              image: 'https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg',
              shopName: 'Den cosmics',
              star: 4.5,
              price: 12,
              buildContext: context,
            ),
          ),
          Container(
            margin: const EdgeInsets.only(top: 24),
            child: _ProductListWidget(
              name: "Jewelery",
              image: 'https://fakestoreapi.com/img/61sbMiUnoGL._AC_UL640_QL65_ML3_.jpg',
              shopName: 'Lee Shop',
              star: 3.8,
              price: 14,
              buildContext: context,
            ),
          ),
          // Add more product cards here
        ],
      ),
    );
  }
}

5. Conclusion:

Congratulations! You have successfully created a shopping card view in Flutter. In this tutorial, we learned how to build a custom widget to represent the product cards and display them in a ListView. Feel free to customize the styles and add more functionality to enhance the shopping card view in your Flutter application.

Remember to import the necessary packages and run the application on your preferred device or emulator to see the shopping card view in action.

Thank you for following along with this tutorial. 

Happy coding!