Flutter Bagaimana menampilkan list by for loop

Question

Saya telah membuat daftar sederhana untuk menunjukkannya dengan for loop.

List categories = [
  {
    {
      'CatID': '0',
      'CatName': 'All'
    },
    {
      'CatID': '1',
      'CatName': 'Computer Hardware'
    },
    {
      'CatID': '2',
      'CatName': 'Computer Software'
    },
  }
];

lalu saya mendefinisikan widget seperti ini

List<Widget> CatWidget = List<Widget>(); 

Lalu saya menggunakannya seperti ini

for (int i = 0; i < 8; i++) {
  CatWidget.add(
    Container(
      child: Text(categories[i]['CatName']),
    ),
  );
}

Ini menunjukkan kesalahan Class '_CompactLinkedHashSet<Map<String, String>>' has no instance method '[]'.

Answer 1

Daftar Anda mengandung terlalu banyak tanda kurung:

List categories = [
    {
      'CatID': '0',
      'CatName': 'All'
    },
    {
      'CatID': '1',
      'CatName': 'Computer Hardware'
    },
    {
      'CatID': '2',
      'CatName': 'Computer Software'
    },
  ];

Dan loop Anda harus berjalan ke 3 bukan 8 karena Anda tidak memiliki 8.

Jadi yang berikut ini akan berhasil, namun, saya mendorong Anda untuk memeriksa jawaban lain untuk pendekatan yang lebih baik secara umum:

import 'package:flutter/material.dart';

void main() {

    List categories = [
  
    {
      'CatID': '0',
      'CatName': 'All'
    },
    {
      'CatID': '1',
      'CatName': 'Computer Hardware'
    },
    {
      'CatID': '2',
      'CatName': 'Computer Software'
    },
  ];

final catWidget = List<Widget>(); 

for (int i = 0; i < 3; i++) {
  catWidget.add(
    Container(
      child: Text(categories[i]['CatName']),
    ),
  );
}

  runApp(MyApp(catWidget));
}

class MyApp extends StatelessWidget {
  final List<Widget> children;
  
  const MyApp(this.children);
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(children: children),
        ),
     );
  }
}

Answer 2

Anda dapat menggunakan list.generate untuk mengulang melalui daftar Anda dan mengembalikan widget.

 Column(
            children: List.generate(
              tags.length,
              (index) => Container(
                // margin: EdgeInsets.symmetric(),
                child: NativeButton(
                  borderRadius: BorderRadius.circular(4),
                  padding: EdgeInsets.symmetric(
                    vertical: sizeConfig.height(.01),
                    horizontal: sizeConfig.width(.02),
                  ),
                  color: Colors.grey[200],
                  child: Text(tags[index]),
                ),
              ),
            ),
          ),

Answer 3

Anda memiliki array JSON, di dalam array JSON, Anda memiliki Objek JSON dan di dalam objek JSON itu, Anda memiliki beberapa objek JSON, yang ingin Anda iterasi satu per satu, yang mana tidak pantas.

JSON Array> JSON Objects True

JSON Array> JSON Array> JSON Object (s) True

JSON Array> JSON Object> JSON Object (s) False

For loop hanya dapat bekerja pada array atau daftar objek dan json harus seperti:

  [
    {
      'CatID': '0',
      'CatName': 'All'
    },
    {
      'CatID': '1',
      'CatName': 'Computer Hardware'
    },
    {
      'CatID': '2',
      'CatName': 'Computer Software'
    },
  ]