Name: Product listing page in flutter
Rating: 4.4 (9219 reviews)
Author: muhammedshamal

Follow me on LinkedIn
Follow me on Github.com

let's create a simple product listing page in Flutter. This example will include a basic UI to display a list of products with their names and images. We'll also include a dummy data list to simulate fetching product data.

This example is easy to understand and serves as a good starting point for beginners to learn how to build a product listing page in Flutter.

Step 1: Setting Up the Project

First, ensure you have Flutter installed and set up on your machine. Create a new Flutter project:

flutter create product_listing
cd product_listing

Step 2: Creating the Product Model

Create a simple model class for the product. This will help us to organize the product data.

// lib/models/product.dart
class Product {
  final String name;
  final String imageUrl;

  Product({required this.name, required this.imageUrl});
}

Step 3: Creating Dummy Data

Let's create some dummy data for our products.

// lib/data/dummy_products.dart
import '../models/product.dart';

List<Product> dummyProducts = [
  Product(name: 'Product 1', imageUrl: 'https://via.placeholder.com/150'),
  Product(name: 'Product 2', imageUrl: 'https://via.placeholder.com/150'),
  Product(name: 'Product 3', imageUrl: 'https://via.placeholder.com/150'),
  Product(name: 'Product 4', imageUrl: 'https://via.placeholder.com/150'),
];

Step 4: Creating the Product Listing Page

Now, we'll create the product listing page that will display our list of products.

// lib/screens/product_listing_page.dart
import 'package:flutter/material.dart';
import '../models/product.dart';
import '../data/dummy_products.dart';

class ProductListingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Product Listing'),
      ),
      body: GridView.builder(
        padding: const EdgeInsets.all(10.0),
        itemCount: dummyProducts.length,
        itemBuilder: (ctx, i) => ProductItem(dummyProducts[i]),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 3 / 2,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
        ),
      ),
    );
  }
}

class ProductItem extends StatelessWidget {
  final Product product;

  ProductItem(this.product);

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(10),
      child: GridTile(
        child: Image.network(
          product.imageUrl,
          fit: BoxFit.cover,
        ),
        footer: GridTileBar(
          backgroundColor: Colors.black87,
          title: Text(
            product.name,
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

Step 5: Updating the Main Application File

Finally, update the main application file to use the ProductListingPage.

// lib/main.dart
import 'package:flutter/material.dart';
import 'screens/product_listing_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Product Listing',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ProductListingPage(),
    );
  }
}

Step 6: Running the Application

Run the application using the following command:

flutter run

Summary

This simple Flutter application displays a list of products using a GridView. Each product is represented by a name and an image. We used dummy data to simulate product information and created a basic UI to present the data.

happy coding !