Flutter Render Static List Array Items in ListView

In flutter we will use List to create multiple items in array format. Today we will make a Static items List and render all the list items into ListView widget. ListView widget creates scrollable data list in flutter.

Flutter Render Static List Array Items in ListView

1. Creating Static list and define multiple String items.

final List<String > listData = <String>[
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
    'Item 6',
    'Item 7',
    'Item 8',
    'Item 9',
    'Item 10',
    'Item 11',
    'Item 12'
  ];

2. Creating ListView.builder() method and defining Container widget and populate all list items one by one.

• listData.length : Here listData is the name of our Static list and length represents length of List.
• int index : Index position in list, Starting from Zero always if not defined.
• context : Application build context.

ListView.builder(
        itemCount: listData.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            height: 46,
            margin: const EdgeInsets.all(3.2),
            color: Colors.teal,
            child: Center(
                child: Text(
              listData[index],
              style: const TextStyle(fontSize: 21, color: Colors.white),
            )),
          );
        });

Screenshot:

Source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(body: MyApp()));
  }
}

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

class MyAppState extends State {
  final List<String> listData = <String>[
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
    'Item 6',
    'Item 7',
    'Item 8',
    'Item 9',
    'Item 10',
    'Item 11',
    'Item 12'
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: listData.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            height: 46,
            margin: const EdgeInsets.all(3.2),
            color: Colors.teal,
            child: Center(
                child: Text(
              listData[index],
              style: const TextStyle(fontSize: 21, color: Colors.white),
            )),
          );
        });
  }
}