how to Iterate through array object in flutter-CodePudding

I need to Iterate through a list of objects inside an array in flutter, tried the map function, But its showing some errors,

final List<dynamic> data = [
    {
      'ccNumber': '1111 1111 1111 1111',
      'expDate': '12/27',
      'cvv': '123',
      'ccHolderName': 'xxx'
    },
    {
      'ccNumber': '2222 2222 2222 2222',
      'expDate': '12/27',
      'cvv': '123',
      'ccHolderName': 'yyy'
    },
    {
      'ccNumber': '3333 3333 3333 3333',
      'expDate': '12/27',
      'cvv': '123',
      'ccHolderName': 'zzz'
    }
];

This is the object of array si want to iterate and i want to iterate below widget.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    const Text('1212 21** ****'),
    IconButton(
      onPressed: () {
        showDialog(
          context: context,
          builder: (context) {
            return Dialog(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              child: const SingleChildScrollView(
                scrollDirection: Axis.vertical,
                child: CardsWidget(),
              ),
            );
          },
        );
      },
      icon: const FaIcon(
        FontAwesomeIcons.pen,
        size: 16,
      ),
    ),
  ],
),

Need to iterate through the Row and want the ccNumber in object array to show at const Text section and pass each data to the CardsWidget(). tried many ways, but nothing seems to work.

CodePudding user response：

Use ListView.builder and put itemCount as data.length. Then Text(data[i]["ccNumber])

ListView.builder(
  itemCount: data.length,
  itemBuilder: (context, i){
     return Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    const Text(data[i]["ccNumber"]),
    IconButton(
      onPressed: () {
        showDialog(
          context: context,
          builder: (context) {
            return Dialog(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              child: const SingleChildScrollView(
                scrollDirection: Axis.vertical,
                child: CardsWidget(),
              ),
            );
          },
        );
      },
      icon: const FaIcon(
        FontAwesomeIcons.pen,
        size: 16,
      ),
    ),
  ],
);
}
)

CodePudding user response：

@Ranto Berk

ListView having index from the itemBuilder. so it will iterate itself and return as per your array length.

itemBuilder: (BuildContext context,int index) {}

if you need to add an edit button at end of each text?

inside ListView you can declare Row. 
Row having children properties. so you can give two column inside Row.
First column give text widget 
Second column for Edit you can use MaterialButton widget(it having onPress properties) there you can perform your functionality as per your requirement.

Blue print:

Row(
        children: [
          Column(
            children: const [
              Text(
                'Your text'
              )
            ],
          ),
          const SizedBox(width: 10.0),
          Column(
            children: [
              MaterialButton(onPressed: () {
                
              }),
            ],
          ),
        ],
      );

for material button you can refer from official website https://api.flutter.dev/flutter/material/MaterialButton-class.html

happy coding!!!