1

What I try to achieve: I try to create a GroupedListView where items are grouped by date (so far so good with the GroupedListView widget) and then I want to show the grouped items in a single card.

Desired result enter image description here

The problem is that the item builder creates a single card for each item, but I can't find a way to put all items with the same date in a single card. Any piece of advice? The closest discussion I found on this topic is here but I don't know how to apply it to Flutter. Many thank in advance for your help!

For illustration purpose, I'm copying/pasting the sample code from pub dev(see https://pub.dev/packages/grouped_list#-example-tab). As shown in the official exemple, each item has its own card. This is where I am stuck...

    import 'package:flutter/material.dart';
    import 'package:grouped_list/grouped_list.dart';
    
    void main() => runApp(MyApp());
    
    List _elements = [
      {'name': 'John', 'group': 'Team A'},
      {'name': 'Will', 'group': 'Team B'},
      {'name': 'Beth', 'group': 'Team A'},
      {'name': 'Miranda', 'group': 'Team B'},
      {'name': 'Mike', 'group': 'Team C'},
      {'name': 'Danny', 'group': 'Team C'},
    ];
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: Scaffold(
            appBar: AppBar(
              title: Text('Grouped List View Example'),
            ),
            body: GroupedListView<dynamic, String>(
              groupBy: (element) => element['group'],
              elements: _elements,
              sort: true,
              groupSeparatorBuilder: (String value) => Padding(
                padding: const EdgeInsets.all(8.0),
                child: Center(
                    child: Text(
                  value,
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                )),
              ),
              itemBuilder: (c, element) {
                return Card(
                  elevation: 8.0,
                  margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
                  child: Container(
                    child: ListTile(
                      contentPadding:
                          EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
                      leading: Icon(Icons.account_circle),
                      title: Text(element['name']),
                      trailing: Icon(Icons.arrow_forward),
                    ),
                  ),
                );
              },
            ),
          ),
        );
      }
    }

Omatt
  • 8,564
  • 2
  • 42
  • 144
NicoloFR
  • 11
  • 3

0 Answers0