How to Populate ListView from List Array in Flutter App

In this example, we are going to show you the easiest way to populate or show elements from List array to ListView, Column, Row, Wrap widget. See the example below for more details.

How to Populate Simple array list to ListView:

List<String> strs = [
     "Hari Prasad Chaudhary",
     "Krishna Chaudhary",
     "John Cena",
     "Jonney Deep",
     "Clint Eastwood"
];

Populate strings to List view like below:

Container(
  child:ListView(
     children: strs.map((strone){
    return Container(
        child: Text(strone),
        margin: EdgeInsets.all(5),
        padding: EdgeInsets.all(15),
        color: Colors.green[100],
    );
  }).toList(),
)

Output:

How to Populate Elements from Modal Array List to Column or ListView:

Modal Class:

class User{
   String name, address;
   User({required this.name, required this.address});
}

List of Modal:

List<User> users = [
     User(name: "Hari Prasad Chaudhary", address: "Kathmandu, Nepal"),
     User(name:"David Mars", address: "Bangalore, India"),
     User(name:"Aurn Thapa", address:"Canada"),
     User(name: "John Bal", address:"United States of America")
];

Populate to Column or ListView:

Column(children: users.map((userone){
    return Container(
        child: ListTile(
            title: Text(userone.name),
            subtitle: Text("Address: " + userone.address),
        ),
        margin: EdgeInsets.all(5),
        padding: EdgeInsets.all(5),
        color: Colors.green[100],
    );
}).toList()

Output:

You can populate elements on same way to Wrap(), Row(), ListView().

Read This Also: How to Add (Push) and Remove Item from List Array with Dart in Flutter App

Full Code Example:

import 'package:flutter/material.dart';
void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    )
  );
}

class MyApp extends StatefulWidget{
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<User> users = [
     User(name: "Hari Prasad Chaudhary", address: "Kathmandu, Nepal"),
     User(name:"David Mars", address: "Bangalore, India"),
     User(name:"Aurn Thapa", address:"Canada"),
     User(name: "John Bal", address:"United States of America")

  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
              title:Text("Modal Array to List View"),
              backgroundColor: Colors.redAccent,
          ),
          body: Column(
                children: users.map((userone){
                    return Container(
                        child: ListTile(
                            title: Text(userone.name),
                            subtitle: Text("Address: " + userone.address),
                        ),
                        margin: EdgeInsets.all(5),
                        padding: EdgeInsets.all(5),
                        color: Colors.green[100],
                    );
                }).toList(),
          )
      );
  }
}

class User{
   String name, address;
   User({required this.name, required this.address});
}

In this way, you can populate elements from arraly list to ListView, Row, Column or Wrap widgets.