How build a listview like this in Flutter?

Question

I created this using two columns and split the list into two parts. But it got so ugly. Any suggestions on how I can create something like this more elegantly?

ListView of cards with differents heights

Answer 1

You can use flutter_staggered_grid_view with QuiltedGridTile

class TAA extends StatelessWidget {
  const TAA({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.custom(
        gridDelegate: SliverQuiltedGridDelegate(
          crossAxisCount: 2,
          mainAxisSpacing: 4,
          crossAxisSpacing: 4,
          repeatPattern: QuiltedGridRepeatPattern.inverted,
          pattern: [
            QuiltedGridTile(2, 1),
            QuiltedGridTile(1, 1),
          ],
        ),
        childrenDelegate:
            SliverChildBuilderDelegate((context, index) => Container(
                  color: Colors.red,
                )),
      ),
    );
  }
}

You can decorate the way you want.