tappable Horizontal list view in flutter. how do i make a clickable list view with images from the list

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,)),
              ),
            ),
          );
        }),
      ),
    );
  }
}

can you add a screenshot of the problem? – Omer Gamliel Jun 23 '20 at 11:52 — Omer Gamliel, Jun 23 '20 at 11:52

score 0 · Answer 1 · answered Jun 23 '20 at 12:36

Make a series of container widgets that will be held in the list view
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

score 0 · Accepted Answer · answered Jun 23 '20 at 12:38

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.

tappable Horizontal list view in flutter. how do i make a clickable list view with images from the list

2 Answers2