In Todays tutorial we would learn about Show Array Elements in ListView Builder in flutter android iOS application. Array is used to store same type of multiple values in single data object. Every array item can be accessed via Index position. In todays article first we would make a Array in flutter via List type string and store some random names inside it. Now we would use the ListView.builder() widget to show these array items one by one in flutter application. So lets get started . Contents in this project Flutter Show Array Elements in ListView Builder Android iOS Example:1. Open your projects main.dart file and import material.dart package. | import 'package:flutter/material.dart'; |
2. Creating our void main runApp() method and here we would call our main MyApp class. | void main() => runApp(MyApp()); |
3. Creating our main MyApp class extends StatelessWidget. This is our main Root View class. | class MyApp extends StatelessWidget { } |
4. Create a final type List <String> named as names to make an Array of random values in MyApp class. | final List<String> names = <String>[ 'Manish', 'Jitender', 'Pankaj', 'Aarti', 'Nighat', 'Mohit', 'Ruchika', ]; |
5. Create Widget Build Area -> Material App -> Scaffold Widget -> ListView.builder() widget. - itemCount Here we would pass the names.length which would pass the length of Array.
- itemBuilder Use to build Each item of ListView widget.
- height Used to set the ListView Item height.
- margin Used to set ListView item margin.
- color Used to set the ListView item background color.
- child Item label text .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: ListView.builder( itemCount: names.length, itemBuilder: (BuildContext context, int index) { return Container( height: 50, margin: EdgeInsets.all(2), color: Colors.green, child: Center( child: Text( '${names[index]}', style: TextStyle(fontSize: 22, color: Colors.white), )), ); }))); } |
6. Complete source code for main.dart file: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { final List<String> names = <String>[ 'Manish', 'Jitender', 'Pankaj', 'Aarti', 'Nighat', 'Mohit', 'Ruchika', ]; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: ListView.builder( itemCount: names.length, itemBuilder: (BuildContext context, int index) { return Container( height: 50, margin: EdgeInsets.all(2), color: Colors.green, child: Center( child: Text( '${names[index]}', style: TextStyle(fontSize: 22, color: Colors.white), )), ); }))); } } |
Screenshot: Also Read:Flutter Dart Add Single Line Multiple Line Comments Syntax Example Type Test Operator in Dart Flutter With Example Flutter Dart List of All Arithmetic Operators with Example Tutorial Flutter Dart Difference Between Constant and Final Explained Example Flutter Solve Your app is not using AndroidX Build Migration Error | 
