DEV Community

Cover image for Product listing page in flutter
Muhammed Shamal PV
Muhammed Shamal PV

Posted on

Product listing page in flutter

#dart #flutter #beginners #webdev

Follow me on LinkedIn
Follow me on Github.com

Click & Read

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
Enter fullscreen mode Exit fullscreen mode

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}); }
Enter fullscreen mode Exit fullscreen mode

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'), ];
Enter fullscreen mode Exit fullscreen mode

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, ), ), ), ); } }
Enter fullscreen mode Exit fullscreen mode

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(), ); } }
Enter fullscreen mode Exit fullscreen mode

Step 6: Running the Application

Run the application using the following command:

flutter run
Enter fullscreen mode Exit fullscreen mode

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 !

Top comments (0)