Question 258558 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How do I display a scrollable list where it's grouped by two fields?

I have this data:

[{ID: 0, Line: 100, Part: 00-87000088, Lots: 00865756,00866790,00868501,00871385,00871905,00872712,00875997,00878042}, {ID: 1, Line: 990000, Part: 00-87000001, Lots: 00746727,00748270,00750627,00750632,00753983,00754156,00757423,00758997,00762736,00792476}]

I need to display this in a scrollable widget like this:

Line      Part           Lots
100       00-87000088    00865756
                         00866790
                         00868501
                         00871385
                         00871905
                         00872712
                         00875997
                         00878042

990000    00-87000001    00746727          
                         00748270
                         00750627
                         00750632
                         00753983
                         00754156
                         00757423
                         00758997
                         00762736
                         00792476

The list of lots could be pretty long, that’s why it needs to be scrollable. And the list of lots is dynamic, so I don’t know the list ahead of time. How do I do this?

What I’ve tried:

//Populating the variables with data:
List<Map<dynamic, dynamic>> lotsPicked = [];
var lines = [];
var parts = [];
var lots = [];

lotsPicked = await globals.issuePartsGetLots(wo: wo);

for (var element in lotsPicked) {
    lines.add(element['Line']);
    parts.add(element['Part']);
    lots.add(element['Lots']);
}

//Showing the data:
ListView.builder(
    itemCount: lotsPicked.length,
    itemBuilder: (BuildContext context, int index) {
      return Column(
        children: [
          Text(lines[index].toString()),
          Text(parts[index].toString()),
          Text(lots[index].toString()),
        ],
      );
      return Text(lotsPicked[index]['Line'].toString());
    },
)
Tags:

2

Answers


  1. 0

    You can achieve this using ListView.builder Here is the code:

    Widget build(BuildContext context) {
return Scaffold(
    body: ListView.builder(
  itemCount: data.length,
  itemBuilder: (context, index) {
    final line = data[index]['Line'];
    final part = data[index]['Part'];
    final lots = data[index]['Lots'];

    return Container(
      padding: const EdgeInsets.all(30),
      child: Column(
        children: [
          if (index == 0)
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: const [
                Text('Line'),
                Text('Part'),
                Text('Lots'),
              ],
            ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('$line'),
              Text('$part'),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: lots.map<Widget>((lot) {
                  return Text(lot);
                }).toList(),
              ),
            ],
          ),
          const SizedBox(height: 16),
        ],
      ),
    );
  },
));
    Login or Signup to reply.
  2. 0

    You can create a itemBuilder for this.

    class ItemBuilder extends StatelessWidget {
  const ItemBuilder({
    Key? key,
    required this.line,
    required this.part,
    required this.parts,
  }) : super(key: key);

  final int line;
  final String part;
  final List<String> parts;

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('$line'),
        Text('$part'),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: parts.map((e) => Text(e)).toList(),
        )
      ].map((e) => Expanded(child: e)).toList(),
    );
  }
}

    And for the header include extend one item

     ListView.builder(
  itemCount: 10 + 1,
  itemBuilder: (context, index) {
    if (index == 0) {
      return Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text('line'),
          Text('part'),
          Text('parts'),
        ].map((e) => Expanded(child: e)).toList(),
      );
    }
    return ItemBuilder(
      line: index - 1, // -1 because of the header
      part: 'part',
      parts: List.generate(3, (index) => 'part $index'),
    );
  },
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search