Flutter / Examples / Listview with model data
Listview with model Data
-
Steps
1.Model
models/Product.dart
class Product { final String name; final String description; final double price; final String imageUrl; Product({ required this.name, required this.description, required this.price, required this.imageUrl, }); } 2. create a widget to display a single product item:
widgets/ProductItem.dart
import 'package:flutter/material.dart'; import 'package:nila/models/Product.dart'; class ProductItem extends StatelessWidget { final Product product; const ProductItem({Key? key, required this.product}) : super(key: key); @override Widget build(BuildContext context) { return Card( margin: EdgeInsets.all(8.0), child: ListTile( leading: Image.network( product.imageUrl, width: 50, height: 50, fit: BoxFit.cover, ), title: Text(product.name), subtitle: Text(product.description), trailing: Text('\$${product.price.toStringAsFixed(2)}'), onTap: () { // Action when a product is tapped }, ), ); } } 3. create a screen that will display a list of these products:
views/ProductListScreen.dart
import 'package:flutter/material.dart'; import 'package:nila/models/Product.dart'; import 'package:nila/widgets/ProductItem.dart'; class ProductListScreen extends StatelessWidget { final List products; const ProductListScreen({Key? key, required this.products}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Product Listing'), ), body: ListView.builder( itemCount: products.length, itemBuilder: (BuildContext context, int index) { return ProductItem(product: products[index]); }, ), ); } } 4. main screen
import 'package:flutter/material.dart'; import 'package:nila/models/Product.dart'; import 'package:nila/views/ProductListScreen.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final List products = [ Product( name: 'Product 1', description: 'Description for Product 1', price: 19.99, imageUrl: 'https://via.placeholder.com/150', ), // Add more Product objects as needed ]; return MaterialApp( title: 'Product App', theme: ThemeData( primarySwatch: Colors.blue, ), home: ProductListScreen(products: products), ); } }