Mapping Lists Widget

 import "package:flutter/material.dart";

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Hello Flutter",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.brown,
      ),
      home: const FlutterMapping(),
    );
  }
}

class FlutterMapping extends StatefulWidget {
  const FlutterMapping({super.key});

  @override
  State<FlutterMapping> createState() {
    return MappingState();
  }
}

class MappingState extends State<FlutterMapping> {
  var arrData = [
    /* "Raman",
    "Rahul",
    "Rajeev",
    "Raj",
    "Rohan",
    "Ramesh",
    "Ravi",
    "Rajveer",
    "Rohit",
    "Rajan",
    "Ritu",
    "Rocky"*/

    {
      "name": "Raman",
      "mobno": "8563219744",
      "unread": "2",
    },
    {
      "name": "Rahul",
      "mobno": "8842331099",
      "unread": "1",
    },
    {
      "name": "Rajeev",
      "mobno": "5561022374",
      "unread": "5",
    },
    {
      "name": "Raj",
      "mobno": "4011789635",
      "unread": "3",
    },
    {
      "name": "Rohan",
      "mobno": "7763022198",
      "unread": "4",
    },
    {
      "name": "Ramesh",
      "mobno": "6355201774",
      "unread": "1",
    },
    {
      "name": "Ravi",
      "mobno": "9362208441",
      "unread": "6",
    },
    {
      "name": "Rajan",
      "mobno": "8055396144",
      "unread": "7",
      //"image" : "assets/images/google_icon.png",
    },
    {
      "name": "Ritu",
      "mobno": "5596032217",
      "unread": "1",
    },
    {
      "name": "Rocky",
      "mobno": "70155429388",
      "unread": "2",
    },
    {
      "name": "Rohit",
      "mobno": "2366901477",
      "unread": "3",
    },
    {
      "name": "Rajveer",
      "mobno": "8863011247",
      "unread": "7",
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const Drawer(),
      appBar: AppBar(
        title: const Text(
          "Mapping Lists to Widget",
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),

      ///when ListView build then it will reach to "children"."children" requires multiple widgets.Then map function will call
      ///(with different value)according to the number of elements present in the "arrData" array.And return Container for every
      ///index with the "Text" widget which has our value."Text" widget will repeat inside Container and print the value.In this way
      ///we created the list without multiple time creating the widget because here we require the same widget pattern with different
      ///content with the help of list which we have defined above."map" function always expects "widget" (in return) from us

      body: Container(
        child: ListView(
          /* children: arrData.map((value) {
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(21),
                  color: Colors.blue.shade200,
                ),
                //color: Colors.blue.shade200,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Center(
                      child: Text(value)),
                ),
              ),//"widget" is declared which we want to apply for that index
            );
          },).toList(),*/

          children: arrData.map(
            (value) {
              return ListTile(
                leading: const Icon(Icons.account_circle, size: 60),
                title: Text(value["name"].toString()),
                subtitle: Text(value["mobno"].toString()),
                trailing: CircleAvatar(
                  radius: 12,
                  backgroundColor: Colors.green,
                  child: Text(
                    value["unread"].toString(),
                  ),
                ),
              );
            },
          ).toList(),
        ),
      ),
    );
  }
}