Flutter Dart 2D Array to Widget

xcodertanks 0
Viewed 46

I have a array. I want to print this array with title header. I tried a lot of things but couldn't find a solution.

$marks = array(
"TİTLE 1" => array(
array(
"image" => "https://image.com",
"name" => "AAAA",
"id" => 1111,),
array(
"image" => "https://image.com",
"name" => "AAAA",
"id" => 1111,),
),
"TİTLE 2" => array(
array(
"image" => "https://image.com",
"name" => "AAAA",
"id" => 1111,),
array(
"image" => "https://image.com",
"name" => "AAAA",
"id" => 1111,),
),
);

The output I want

I tried this but i cant print title.

populerplaylist.map((user) => ).toList(),

flutter-layout dart flutter arrays
2 Answers

Get the data through api. Create a model class of that api response in your flutter project. Use http or dio package for api parsing. Create function to decode your api response. Show images using image.network()

GeekyChick0

first of all your table is in the php language. If you want to have it or receive it in flutter format it will be of this type:

Map<String, dynamic> marks = {
    "TITLE 1": [
      {
        "image" : "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fdownload.vikidia.org%2Fvikidia%2Ffr%2Fimages%2Ff%2Fff%2FChat_gris.jpg&f=1&nofb=1",
        "name" : "Cat 1",
        "id" : 1111,
      },
      {
        "image" : "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fdownload.vikidia.org%2Fvikidia%2Ffr%2Fimages%2Ff%2Fff%2FChat_gris.jpg&f=1&nofb=1",
        "name" : "Cat 2",
        "id" : 1111,
      }
    ],
    "TITLE 2": [
      {
        "image" : "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fdownload.vikidia.org%2Fvikidia%2Ffr%2Fimages%2Ff%2Fff%2FChat_gris.jpg&f=1&nofb=1",
        "name" : "Cat 1",
        "id" : 1111,
      },
      {
        "image" : "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fdownload.vikidia.org%2Fvikidia%2Ffr%2Fimages%2Ff%2Fff%2FChat_gris.jpg&f=1&nofb=1",
        "name" : "Cat 2",
        "id" : 1111,
      }
    ]
  };

Then if you want to display it in the form you want here is the code that does that:

 Widget displayMap(){
    List<Widget> list = [];

    marks.forEach(((key, value) {
      List<Widget> listWidgetTmp = [
        Text(key, style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold))
      ];

      listWidgetTmp.add(
        Container(
          height: 150,
          child: ListView.builder(
            shrinkWrap: true,
            scrollDirection: Axis.horizontal,
            itemCount: value.length,
            itemBuilder: (context, index){
              dynamic mark = value[index];
              
              return Container(
                margin: const EdgeInsets.all(10),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Image.network(mark["image"], height: 100, width: 100,),
                    Text(mark["name"]),
                  ],
                )
              );
            }
          )
        )
      );

      list.addAll(listWidgetTmp);
    }));

    return ListView(
      shrinkWrap: true,
      children: list,
    );
  }

So this is the result: enter image description here

Hope this will help you

G2IQ0
Related