In Today’s 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 today’s 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 let’s get started 🙂 .
Contents in this project Flutter Show Array Elements in ListView Builder Android iOS Example:
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating our void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp class extends StatelessWidget. This is our main Root View class.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
4. Create a final type List <String> named as names to make an Array of random values in MyApp class.
|
1 2 3 4 5 6 7 8 9 |
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:
