Flutter 列表界面

Question

我正在正确地构建一个带有 flutter 的应用程序，在搜索一些想法时，我遇到了这个列表，我想问一下如何获得这些结果？

https://dribbble.com/shots/15932824--Transactions-Overview-Detailview

最后一张图片，上面写着 2021 年 6 月 30 日，在这张图片下，列表就像是连接的，有没有办法实现这一点？在此先感谢我希望我很清楚。

Answer 1

class MyHomePage extends StatelessWidget {
  final List<Map<String, dynamic>> dispalyList = [
    {
      "date": "30 june 2021",
      "amount": "10000",
      "items": [
        {
          "product": "Fintroy",
          "amount": "100",
          "product_desc": "Purchase on site",
        },
        {
          "product": "Consta coffee",
          "amount": "5",
          "product_desc": "Purchase on store",
        },
      ]
    },
    {
      "date": "24 june 2021",
      "amount": "5000",
      "items": [
        {
          "product": "ATM Withdrow",
          "amount": "100",
          "product_desc": "Sale earnings",
        },
        {
          "product": "Consta coffee",
          "amount": "4",
          "product_desc": "Purchase on shop",
        },
      ]
    }
  ];
  MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8),
        child: ListView.builder(
          itemCount: dispalyList.length,
          itemBuilder: (context, index) {
            final List<Map<String, dynamic>> productList =
                dispalyList[index]["items"];
            return Column(
              children: [
                Row(
                  children: [
                    Text(dispalyList[index]["date"] ?? ""),
                    const Spacer(),
                    Text(dispalyList[index]["amount"] ?? ""),
                  ],
                ),
                const SizedBox(height: 12),
                Container(
                  decoration: BoxDecoration(
                      color: Colors.black.withOpacity(0.5),
                      borderRadius:
                          const BorderRadius.all(Radius.circular(12))),
                  child: ListView.separated(
                    physics:
                        const NeverScrollableScrollPhysics(), // AVOID CHILD LISTVIEW SCROLL
                    separatorBuilder: (context, index) => const Divider(),
                    shrinkWrap: true,
                    itemCount: productList.length,
                    itemBuilder: (context, index) {
                      return Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Row(
                          children: [
                            const CircleAvatar(
                              backgroundColor: Colors.amber,
                            ),
                            const SizedBox(width: 8),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(productList[index]["product"]),
                                Text(productList[index]["product_desc"])
                              ],
                            ),
                            const Spacer(),
                            Text(productList[index]["amount"])
                          ],
                        ),
                      );
                    },
                  ),
                ),
                const SizedBox(height: 12),
              ],
            );
          },
        ),
      ),
    );
  }
}