Yu Tant

Home
array

Flutter : Mapping List

 Lanjut belajar bareng kuldii, mantablah baru kali ini merasa terbantu sekali, thank's kuldii. And now we learn about Maping List. Apa itu mapping list? gampangnya belajar memetakan data (array) ke UI, contohnya ada data kontak kemudian dibawah ada list warna favorit yang bisa discroll.

ok ini ditangkapan layarku untuk maping list


dan ini adalah arsip codenya :



import 'package:flutter/material.dart';

void main() {
  runApp(MapList());
}

class MapList extends StatelessWidget {
  final List<Map<String, dynamic>> myList = [
    {
      "Name": "Dani Damanik",
      "Age": "27",
      "img": "1",
      "favcol": [
        "Red",
        "black",
        "blue",
        "green",
        "amber",
        "white",
        "yellow",
        "pink"
      ],
    },
    {
      "Name": "Muhasyim",
      "Age": "27",
      "img": "2",
      "favcol": [
        "Red",
        "black",
        "blue",
        "green",
        "amber",
        "white",
        "yellow",
        "pink"
      ],
    },
    {
      "Name": "Fadjar",
      "Age": "27",
      "img": "3",
      "favcol": [
        "Red",
        "black",
        "blue",
        "green",
        "amber",
        "white",
        "yellow",
        "pink"
      ],
    },
    {
      "Name": "Moh. Lana",
      "Age": "27",
      "img": "4",
      "favcol": [
        "Red",
        "black",
        "blue",
        "green",
        "amber",
        "white",
        "yellow",
        "pink"
      ],
    },
    {
      "Name": "Setio Adi Nugroho",
      "Age": "26",
      "img": "5",
      "favcol": [
        "green",
        "amber",
        "white",
        "red",
        "black",
        "blue",
        "green",
        "yellow",
        "pink"
      ],
    }
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text("yTn: Mapping List"),
        ),
        body: ListView(
          children: myList.map((data) {
            List myfavcolor = data["favcol"];
            return Card(
              margin: EdgeInsets.all(20),
              color: Colors.green[200],
              child: Container(
                margin: EdgeInsets.all(10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    //Row
                    Row(
                      children: [
                        CircleAvatar(
                          backgroundImage: NetworkImage(
                              "https://randomuser.me/api/portraits/men/${data['img']}.jpg"),
                        ),
                        SizedBox(
                          width: 20,
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "Name : ${data['Name']}",
                              style: TextStyle(
                                fontSize: 20,
                              ),
                            ),
                            Text("Age : ${data['Age']}"),
                          ],
                        )
                      ],
                    ),
                    //FavRow
                    SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                      child: Row(
                        children: myfavcolor.map((color) {
                          return Container(
                            color: Colors.orange,
                            margin: EdgeInsets.symmetric(
                              vertical: 15,
                              horizontal: 8,
                            ),
                            padding: EdgeInsets.all(10),
                            child: Text(
                              color,
                            ),
                          );
                        }).toList(),
                      ),
                    )
                  ],
                ),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}