flutter 中的可点击水平列表视图。 如何使用列表中的图像制作可点击的列表视图

Question

i am new to flutter and dart and i wanted to make a horizontal list with images that one can click and that will take them to the product page. i want the product details to be taken from the var product_list which i will use to make the product page. the below code runs but the list is not visible

import 'package:flutter/material.dart';

import 'package:app/pages/product_details.dart';

class Mostpop extends StatelessWidget {
  final product_name;
  final product_picture;
  final product_price;

  Mostpop({
    this.product_name,
    this.product_picture,
    this.product_price
});
  var product_list = [
    {
      "name": "The Bundle",
      "picture": "images/thumbnails/t1.jpg",
      "price": 99,
    },
    {
      "name": "The Bundle",
      "picture": "images/thumbnails/t1.jpg",
      "price": 99,
    },
    {
      "name": "The Bundle",
      "picture": "images/thumbnails/t1.jpg",
      "price": 99,
    },
    {
      "name": "The Bundle",
      "picture": "images/thumbnails/t1.jpg",
      "price": 99,
    },
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Horizontal ListView'),
      ),
      body: Container(
        padding: EdgeInsets.symmetric(),
        height: MediaQuery.of(context).size.height * 0.35,
        child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: product_list.length, itemBuilder: (context, index) {
          return Container(
            width: MediaQuery.of(context).size.width * 0.6,
            child: Card(
              color: Colors.blue,
              child: Container(
                child: Center(child: Image.asset(product_picture,fit: BoxFit.cover,)),
              ),
            ),
          );
        }),
      ),
    );
  }
}

Answer 1

1. Make a series of container widgets that will be held in the list view
2. Map the list in order to pass the product_pictures to each of the Image.asset features

see => Dart: mapping a list (list.map)

with what you have now when you call product_picture within Imageasset nothing is being referenced because product_picture is within a list, you need to use the list when calling the product picture within the dictionary

Answer 2

The issue is caused by the following line

child: Center(child: Image.asset(product_picture,fit: BoxFit.cover,)),

product_picture is not initialized (its null). Also when you use the ListView.Builder you can take advantage of the index parameter to return the Widget for every item in product list.

You can modify the code to the following -

class Mostpop extends StatelessWidget {
  final product_name;
  final product_picture;
  final product_price;

  Mostpop({this.product_name, this.product_picture, this.product_price});
  var product_list = [
    {
      "name": "The Bundle",
      "picture": "assets/images/t1.png",
      "price": 99,
    },
    {
      "name": "The Bundle",
      "picture": "assets/images/t1.png",
      "price": 99,
    },
    {
      "name": "The Bundle",
      "picture": "assets/images/t1.png",
      "price": 99,
    },
    {
      "name": "The Bundle",
      "picture": "assets/images/t1.png",
      "price": 99,
    },
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Horizontal ListView'),
      ),
      body: Container(
        padding: EdgeInsets.symmetric(),
        height: MediaQuery.of(context).size.height * 0.35,
        child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: product_list.length,
            itemBuilder: (context, index) {
              return Container(
                width: MediaQuery.of(context).size.width * 0.6,
                child: Card(
                  color: Colors.blue,
                  child: Container(
                    child: Center(
                        child: Image.asset(
                      product_list[index]["picture"],
                      fit: BoxFit.cover,
                    )),
                  ),
                ),
              );
            }),
      ),
    );
  }
}

Also you should consider separating the widget tree with the model definition, also strongly typed model will help you detect all the type checking errors at compile time as otherwise they may arrive during the runtime.