Hello friends, Recently I was working on a project where we have to make Local LIST MAP array in flutter Dart. In short words We would use List Map in dart which works same as Array. Now what I think will be useful for beginners printing all the array on mobile screen in ListView widget. Now what we’re doing in this tutorial is we would Show List MAP String Dynamic Array Values in ListView Flutter Dart. So let’s get started 🙂 .
Example of Show List MAP String Dynamic Array Values in ListView Flutter Dart :-
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp extends StatelessWidget class.
|
1 2 3 4 5 6 |
class MyApp extends StatelessWidget { } |
4. Creating a dynamic type of List MAP array with some static items named as myBooks.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
List<Map<String, dynamic>> myBooks = [ {"id": 1, "name": "HTML and CSS", "price": 150}, {"id": 2, "name": "Python", "price": 250}, {"id": 3, "name": "Dart", "price": 120}, {"id": 4, "name": "Java", "price": 100}, {"id": 5, "name": "JavaScript", "price": 110}, {"id": 6, "name": "Swift", "price": 90}, {"id": 7, "name": "C++", "price": 85}, {"id": 8, "name": "C#", "price": 58}, {"id": 9, "name": "Python", "price": 120}, {"id": 10, "name": "Ruby", "price": 55}, {"id": 11, "name": "FrameWork", "price": 125} ]; |
5. Creating Widget Build area -> Make ListView.builder widget and Here we would print only books name using ‘${myBooks[index][“name”]}’ .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text('Flutter Static Map List')), body: ListView.builder( itemCount: myBooks.length, itemBuilder: (BuildContext context, int index) { return Container( height: 85, margin: const EdgeInsets.all(2), color: const Color.fromARGB(216, 252, 2, 98), child: Center( child: Text( '${myBooks[index]["name"]}', style: const TextStyle(fontSize: 24, 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 36 37 38 39 40 41 42 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { List<Map<String, dynamic>> myBooks = [ {"id": 1, "name": "HTML and CSS", "price": 150}, {"id": 2, "name": "Python", "price": 250}, {"id": 3, "name": "Dart", "price": 120}, {"id": 4, "name": "Java", "price": 100}, {"id": 5, "name": "JavaScript", "price": 110}, {"id": 6, "name": "Swift", "price": 90}, {"id": 7, "name": "C++", "price": 85}, {"id": 8, "name": "C#", "price": 58}, {"id": 9, "name": "Python", "price": 120}, {"id": 10, "name": "Ruby", "price": 55}, {"id": 11, "name": "FrameWork", "price": 125} ]; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text('Flutter Static Map List')), body: ListView.builder( itemCount: myBooks.length, itemBuilder: (BuildContext context, int index) { return Container( height: 85, margin: const EdgeInsets.all(2), color: const Color.fromARGB(216, 252, 2, 98), child: Center( child: Text( '${myBooks[index]["name"]}', style: const TextStyle(fontSize: 24, color: Colors.white), )), ); }))); } } |
Screenshot :-
Hello! You obviously have a good knowledge of Flutter. At least the examples on your site are very interesting, useful and understandable. I am newbie. I have a question related to passing data from a list to application text, using it to replace images and so on.
I asked a question in the professional community. There are detailed questions, pieces of code and so on. But since I am a beginner, I asked the question incorrectly. Most likely. At least I still haven’t received a response.
I would like to ask you for advice. I am afraid that my link will end up in spam. Or can I do it? Thanks in advance.