ListView with Rounded Edges

Issue

What is the best way to implement the following ListView with the corner edge in Flutter?

Since I need overlapping on the rounded corner, is there a certain implementation using Stack and Positioned for this?

enter image description here

Solution

I found a way to do it without the use of Stack and Positioned.

I created a ListView using the ListView.builder() with each row being two container (parent and child). The bottom container (parent) takes the background of the next row’s colour from the array (index+1). Then I add a container with a rounded edge taking it’s colour based on its index. If it was the last row, the bottom container will be transparent. This will give the result as expected.

  List<Color> colours = [
    Colors.red,
    Colors.green,
    Colors.blue,
    Colors.amber,
    Colors.brown,
    Colors.deepPurple,
  ];

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Hello"),
      ),
      body: ListView.builder(
        itemCount: colours.length,
        itemBuilder: (context, index) {
           return Container( // This is the back container which will show next cell colour on the rounded edge
              color: index + 1 < colours.length
                  ? colours[index + 1] // get next row background as back container background
                  : Colors.transparent, // Otherwise keep it transparent to prevent out of bounds error
              child: Container(
                height: 180,
                decoration: BoxDecoration(
                  borderRadius:
                  const BorderRadius.only(bottomLeft: Radius.circular(85.0)),
                  color: colours[index],
                ),
                child: Center(
                  child: Text(
                    index.toString(),
                    style: const TextStyle(color: Colors.white, fontSize: 50),
                  ),
                ),
              ),
           );
        },
      ),
    );
  }
}

enter image description here

Answered By – Assim

Answer Checked By – Marie Seifert (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.