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 !
Top comments (0)