Flutter using ListView.builder

Question

How can apply listview builder using the model and data as below to achieve the layout in the screenshot:

Model

class Location {
  String name;
  String imagePath;
  String summary;

  Location(this.name, this.imagePath, this.summary);
  
}

Data

import 'package:app_data_model/model/location.dart';

var locationData = [
  Location(
      'Statue of Liberty',
      'assets/images/new-york-city-statue-of-liberty.jpg',
      'The Statue of Liberty was France\'s gift to America. Built in 1886, it remains a famous world symbol of freedom and one of the greatest American icons. '),
  Location(
      'Central Park',
      'assets/images/new-york-city-central-park-lake-bridge-boats.jpg',
      'A walk, peddle, or carriage ride through the crisscrossing pathways of Central Park is a must-do on anyone\'s New York City itinerary. '),
  Location(
      'Empire State Building',
      'assets/images/new-york-city-empire-state-building.jpg',
      'The Empire State Building is one of New York\'s most famous landmark buildings and key tourist attractions. The 381-meter-tall, 102-storey building was the tallest in the world until the 1 World Trade Center tower rose higher, 41 years later. ')
];

yes, i did look at the documentation and googled but not sure how to apply the listview.builder to my data. — Jag99
– Jag99, Commented Sep 18, 2020 at 7:21

timilehinjegede · Accepted Answer · 2020-09-18 07:24:15Z

2

Added a demo based on what you want:

class StackOver extends StatelessWidget {
  var locationData = [
    Location(
        'Statue of Liberty',
        'assets/images/new-york-city-statue-of-liberty.jpg',
        'The Statue of Liberty was France\'s gift to America. Built in 1886, it remains a famous world symbol of freedom and one of the greatest American icons. '),
    Location(
        'Central Park',
        'assets/images/new-york-city-central-park-lake-bridge-boats.jpg',
        'A walk, peddle, or carriage ride through the crisscrossing pathways of Central Park is a must-do on anyone\'s New York City itinerary. '),
    Location(
        'Empire State Building',
        'assets/images/new-york-city-empire-state-building.jpg',
        'The Empire State Building is one of New York\'s most famous landmark buildings and key tourist attractions. The 381-meter-tall, 102-storey building was the tallest in the world until the 1 World Trade Center tower rose higher, 41 years later. ')
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Solve Before Downvote !'),
      ),
      body: ListView.builder(
        // give the listview a length based on your location data
        itemCount: locationData.length,
        itemBuilder: (context, index) {
          // return a custom widget based on your preference 
          return ListTile(
            // access the imagePath of your [locationData] using the index provided by the itembuilder
            leading: Image.asset(
              locationData[index].imagePath,
            ),
            // access the name of your [locationData] using the index provided by the itembuilder
            title: Text(
              locationData[index].name,
            ),
          );
        },
      ),
    );
  }
}

RESULT:

answered Sep 18, 2020 at 7:24

timilehinjegede

14.2k4 gold badges36 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jag99 Over a year ago

Perfect, that worked. What if I wanted to achieve the same using map ? When will we use map?

timilehinjegede Over a year ago

What do you mean using map ? Can you update your question or ask a separate question to include more details about what you are asking ?

Jag99 Over a year ago

stackflow wont allow to add more code and hence provided a screenshot of the code with map above. the ListView.builder works fine but what I wanted to read each item in the list using map to generate a dynamic listview?

timilehinjegede Over a year ago

Why do you want to place a ListView inside of another ListView ?

Jag99 Over a year ago

yeah, i'm confused. What I was trying to achieve is to create a dynamic listview using map. I was refering to this guide which pulls data from firebase but i put my data in a dart file. hackernoon.com/…

|

ahmed elajnaf · Accepted Answer · 2020-09-18 07:32:27Z

1

ListView.builder(itemCount: locationData.length, (BuildContext context,index)=>ListTile(leading: Image.network(locationData[index].image),title :Text(locationData[index].locationName);)

check the Location model to get the right attributes

answered Sep 18, 2020 at 7:32

ahmed elajnaf

1212 silver badges4 bronze badges

1 Comment

ahmed elajnaf Over a year ago

To make your code readable and easy in the Location constructor method add {} to your attributes so you won't get confused when calling the constructor

Collectives™ on Stack Overflow

Flutter using ListView.builder

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related