title: Flutter ListView grouped
body: <p>How can I achieve something like this</p>
  <p><a href="https://i.stack.imgur.com/XShsq.png" rel="nofollow noreferrer">https://i.stack.imgur.com/XShsq.png</a></p>
  <p>So far I handle to get this</p>
  <p><a href="https://i.stack.imgur.com/GIs0d.png" rel="nofollow noreferrer">https://i.stack.imgur.com/GIs0d.png</a></p>
  <p>But I dont know how to separate each container</p>
  <p>this is my actual code</p>
  <pre><code>  Widget build(BuildContext context) {
      TextStyle boldStyle = const TextStyle(fontWeight: FontWeight.bold);
      return BlocConsumer&lt;AppCubit, AppState&gt;(
        listener: (context, state) {},
        builder: (context, state) {
          List&lt;PurchaseCategory&gt; purchases =
              AppCubit.get(context).purchasesCategories;
          return Container(
            decoration: buildBoxDecoration(context),
            margin: const EdgeInsets.all(16),
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
            child: GroupedListView(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              elements: purchases,
              groupBy: (PurchaseCategory purchase) =&gt; purchase.date,
              groupHeaderBuilder: (PurchaseCategory purchase) =&gt; Padding(
                padding: const EdgeInsets.only(bottom: 10.0),
                child: Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: &lt;Widget&gt;[
                        Text(
                          '${purchase.date}',
                          style: boldStyle,
                        ),
                        Text(
                          'Total: 400 \$',
                          style: boldStyle,
                        ),
                      ],
                    ),
                    const Divider(
                      color: Colors.red,
                    ),
                  ],
                ),
              ),
              itemBuilder: (BuildContext context, PurchaseCategory purchase) {
                return ListTile(
                  contentPadding: const EdgeInsets.all(0),
                  leading: Container(
                    padding: const EdgeInsets.all(5),
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: purchase.categoryColor,
                    ),
                    child: Icon(purchase.categoryIcon),
                  ),
                  title: Text(
                    purchase.description,
                    style: boldStyle,
                  ),
                  subtitle: Text(purchase.categoryName),
                  trailing: Text(
                    '\$ ${purchase.price}',
                    style: boldStyle,
                  ),
                );
              },
            ),
          );
        },
      );
    } 
  </code></pre>
  <p>I handle to grouped by dates but I would like to grouped in different containers as the first picture</p>