Flutter//How can I add an image to the product list I created?

This is product model.dart

class ProductScreen extends StatelessWidget {
  final ValueSetter<ProductModel> _valueSetter;

  ProductScreen(this._valueSetter);

  List<ProductModel> products = [
    ProductModel("T-shirt1", 50,),
    ProductModel("T-shirt2", 60,),
    ProductModel("T-shirt3", 70,),
    ProductModel("T-shirt4", 80,),
    ProductModel("T-shirt5", 90,),
  ];

This is Productmodel.dart

lass ProductModel{
      String name;
      int price;
    
    
      ProductModel(this.name, this.price);

CodePudding user response：

Model:

class ProductModel{
      String name, image;
      int price;

ProductModel(this.name, this.price, this.image);
}

In a Widget (Stateless/Statefull):

class ProductScreen extends StatelessWidget {

  List<ProductModel> products = [
    ProductModel("T-shirt1", 50,"www.samplepic.com/1"),
    ProductModel("T-shirt2", 60,"www.samplepic.com/2"),
    ProductModel("T-shirt3", 70,"www.samplepic.com/3"),
    ProductModel("T-shirt4", 80,"www.samplepic.com/4"),
    ProductModel("T-shirt5", 90,"www.samplepic.com/5"),
  ];
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Showing Images From Model"
        ),
       
      ),
      body: Center(
      child: Image.network(products[0])
         ),
     );
}
}

CodePudding user response：

Add it to product model aswell, usually images are coming from network service as url, or asset path, so you can make it String. Like this:

class ProductModel{
      String name, image;
      int price;

ProductModel(this.name, this.price, this.image);

and like this during implementation:

class ProductScreen extends StatelessWidget {
  final ValueSetter<ProductModel> _valueSetter;

  ProductScreen(this._valueSetter);

  List<ProductModel> products = [
    ProductModel("T-shirt1", 50,"www.samplepic.com/1"),
    ProductModel("T-shirt2", 60,"www.samplepic.com/2"),
    ProductModel("T-shirt3", 70,"www.samplepic.com/3"),
    ProductModel("T-shirt4", 80,"www.samplepic.com/4"),
    ProductModel("T-shirt5", 90,"www.samplepic.com/5"),
  ];

CodePudding user response：

I'm new to Flutter. I made the model part. but I couldn't make the product part, where should I write the image codes?

import 'package:flutter/material.dart';
    import '../ProductModel.dart';
    
   
    class ProductScreen extends StatelessWidget {
      final ValueSetter<ProductModel> _valueSetter;
    
      ProductScreen(this._valueSetter);
    
      List<ProductModel> products = [
        ProductModel("T-shirt1", 50,""),
        ProductModel("T-shirt2", 60,"www.samplepic.com/1"),
        ProductModel("T-shirt3", 70,"www.samplepic.com/1"),
        ProductModel("T-shirt4", 80,"www.samplepic.com/1"),
        ProductModel("T-shirt5", 90,"www.samplepic.com/1"),
      ];
    
      @override
      Widget build(BuildContext context) {
        return ListView.separated(
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(products[index].name),
                trailing: Text(
                  "₺${products[index].price}",
                  style: const TextStyle(
                      color: Colors.redAccent,
                      fontSize: 20,
                      fontWeight: FontWeight.bold),
                ),
                onTap: () {
                  _valueSetter(products[index]);
                },
              );
            },
            separatorBuilder: (context, index) {
              return const Divider();
            },
            itemCount: products.length);
      }
    }

CodePudding user response：

You can use the leading property of ListTile and call your products list inside the container. and inside a container, you can shape your image box. Hope you will get your answer.

  import 'package:flutter/material.dart'; 
    class ProductScreen extends StatelessWidget {
      final ValueSetter<ProductModel> _valueSetter;
    
      ProductScreen(this._valueSetter);
    
      List<ProductModel> products = [
        ProductModel("T-shirt1", 50,""),
        ProductModel("T-shirt2", 60,"www.samplepic.com/1"),
        ProductModel("T-shirt3", 70,"www.samplepic.com/1"),
        ProductModel("T-shirt4", 80,"www.samplepic.com/1"),
        ProductModel("T-shirt5", 90,"www.samplepic.com/1"),
      ];
    
      @override
      Widget build(BuildContext context) {
        return ListView.separated(
            itemBuilder: (context, index) {
              return ListTile(
                leading: Container(
                  height: 40,
                  width: 40,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5),
                      shape: BoxShape.rectangle,
                      image: DecorationImage(
                        image: NetworkImage(products[index].image),fit: BoxFit.cover,
                      )
                  ),
                ),
                title: Text(products[index].name),
                trailing: Text(
                  "₺${products[index].price}",
                  style: const TextStyle(
                      color: Colors.redAccent,
                      fontSize: 20,
                      fontWeight: FontWeight.bold),
                ),
                onTap: () {
                  _valueSetter(products[index]);
                },
              );
            },
            separatorBuilder: (context, index) {
              return const Divider();
            },
            itemCount: products.length);
      }
    }
    class ProductModel{
      String name, image;
      int price;
    
      ProductModel(this.name, this.price, this.image);