how to display list using list tile

Question

I have already made a list which I want to display using Card (List Tile) where only using leading and trailing. Here is my code. I think I am missing something to declare which I am unable to figure out for set State. I am unable to display all of the lists.

    class SummaryPayment extends StatefulWidget {
      @override
      State<SummaryPayment> createState() => _SummaryPaymentState();
    }
    
    class _SummaryPaymentState extends State<SummaryPayment> {
      @override
      final List<dynamic> list = [
        {
          'id': 0,
          'leading': 'Payment Application',
          'trailing': 'System'
        },
        {
          'id': 1,
          'leading': 'Reference Number',
          'trailing': 'SYM12113OI'
        },
        {
          'id': 2,
          'leading': 'Total',
          'trailing': '$15.00'
        },
        {
          'id': 3,
          'leading': 'Details',
          'trailing': 'Civil Employment'
        },
      ];
    
      int index = 0;
      int _count = 1;
    
     Widget build(BuildContext context) {
        return Container(
          child: Card( 
            child: ListTile( 
              leading: Text(list[index]['leading']),
              trailing: Text(list[index]['trailing']),
            ),
          ),
        ),
  }
}

Answer 1

Try below code and used ListView

ListView.builder(
  itemCount: list.length,
  itemBuilder: (BuildContext context, int index) {
    return Card(
       shadowColor: Colors.grey.shade300,
      child: ListTile(
        leading: Text(
          list[index]['leading'],
        ),
        trailing: Text(
          list[index]['trailing'],
        ),
      ),
    );
  },
),

Full Example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  List<dynamic> list = [
    {
      'id': 0,
      'leading': 'Payment Application',
      'trailing': 'System',
    },
    {
      'id': 1,
      'leading': 'Reference Number',
      'trailing': 'SYM12113OI',
    },
    {
      'id': 2,
      'leading': 'Total',
      'trailing': '\$15.00',
    },
    {
      'id': 3,
      'leading': 'Details',
      'trailing': 'Civil Employment',
    },
  ];
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: list.length,
      itemBuilder: (BuildContext context, int index) {
        return Card(
          shadowColor: Colors.grey.shade300,
          child: ListTile(
            leading: Text(
              list[index]['leading'],
            ),
            trailing: Text(
              list[index]['trailing'],
            ),
          ),
        );
      },
    );
  }
}

Result Screen->

Answer 2

You can use ListView.Builder

ListView.builder(
                itemCount: stringList.length,
                shrinkWrap: true,
                itemBuilder: (BuildContext context, int index) {
                  return InkWell(
                    onTap: () {
                      onItemSelected(stringList[index]);
                    },
                    child: ListTile(
                      leading: Text(list[index]['leading']),
                      trailing: Text(list[index]['trailing'])
                    ),
                  );
                },
              )

Answer 3

You need to implement with listview builder or something like that.

class SummaryPayment extends StatefulWidget {
  @override
  State<SummaryPayment> createState() => _SummaryPaymentState();
}

class _SummaryPaymentState extends State<SummaryPayment> {
  @override
  final List<dynamic> list = [
    {'id': 0, 'leading': 'Payment Application', 'trailing': 'System'},
    {'id': 1, 'leading': 'Reference Number', 'trailing': 'SYM12113OI'},
    {'id': 2, 'leading': 'Total', 'trailing': '\$15.00'},
    {'id': 3, 'leading': 'Details', 'trailing': 'Civil Employment'},
  ];

  int index = 0;
  int _count = 1;

  Widget build(BuildContext context) {
    return Container(
      child: Card(
        child: ListView.builder(
          shrinkWrap: true,
          itemCount: list.length,
          itemBuilder: (context, index) {
            return ListTile(
              leading: Text(list[index]['leading']),
              trailing: Text(list[index]['trailing']),
            );
          },
        ),
      ),
    );
  }
}

output: