title: Creating A ListView With Stacked List Items in Flutter
body: <p>I stumbled upon this design in dribble
  <a href="https://i.stack.imgur.com/KBzck.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/KBzck.jpg" alt="enter image description here"></a></p>
  
  <p>and in trying to implement it in flutter I was able to create the curves using clip Path. this is what I have<a href="https://i.stack.imgur.com/6C4E9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6C4E9.png" alt="enter image description here"></a></p>
  
  <p>I am trying to get rid of the space in between the shapes so that they can collapse.</p>
  
  <p>this is my CurvedRectangleClipper:`
      import 'package:flutter/material.dart';</p>
  
  <pre><code>class CurvedRectangleClipper extends CustomClipper&lt;Path&gt; {
  final double offset = 80;
  @override
  Path getClip(Size size) {
      // TODO: implement getClip
      Path path = Path();
      path.lineTo(0, size.height - offset);
      var firstEndpoint = Offset(offset, size.height);
      path.arcToPoint(firstEndpoint, radius: Radius.circular(-offset),clockwise: false);
  
      path.lineTo(size.width, size.height);
      path.lineTo(size.width, offset);
      path.lineTo(offset, offset);
  
      var secondEndPoint = Offset(0,0);
  
      path.arcToPoint(secondEndPoint, radius: Radius.circular(-offset),clockwise: true);
      path.lineTo(0, 0);
      path.close();
      return path;
  }
  
  @override
  bool shouldReclip(CustomClipper oldClipper) {
      // TODO: implement shouldReclip
      return true;
  }
  }
  </code></pre>
  
  <p><code>
  and this is my main.dart file:</code>
      import 'package:devotion/CurvedRectangleClipper.dart';
      import 'package:flutter/material.dart';</p>
  
  <pre><code>void main() {
  runApp(HomeScreen());
  }
  
  class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
      return MaterialApp(
      home: MainScreen(),
      title: 'Devotion',
      theme: appTheme,
      );
  }
  }
  
  var appTheme =
      ThemeData(fontFamily: 'Oxygen', primaryColor: Colors.purpleAccent);
  
  class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
      return Scaffold(
      appBar: AppBar(
          title: Text('Devotion'),
      ),
      body: ListView(
          scrollDirection: Axis.vertical,
          children: &lt;Widget&gt;[
          CurvedListItem(
              title: 'Yoga and Meditation for Beginners',
              time: 'TODAY 5:30 PM'),
          CurvedListItem(
              title: 'Practice French, English And Chinese',
              time: 'TUESDAY 5:30 PM',
          ),
          CurvedListItem(
              title: 'Adobe XD Live Event in Europe',
              time: 'FRIDAY 6:00 PM',
          ),
          ],
      ),
      );
  }
  }
  
  class CurvedListItem extends StatelessWidget {
  final String title;
  final String time;
  final String people;
  final IconData icon;
  
  CurvedListItem({this.title, this.time, this.icon, this.people});
  
  @override
  Widget build(BuildContext context) {
      return ClipPath(
      clipper: CurvedRectangleClipper(),
      child: Container(
          color: Colors.pink,
          padding: EdgeInsets.only(
          left: 32,
          top: 100,
          bottom: 50,
          ),
          child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: &lt;Widget&gt;[
              Text(
                  time,
                  style: TextStyle(color: Colors.white, fontSize: 12),
              ),
              SizedBox(
                  height: 2,
              ),
              Text(
                  title,
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 22,
                      fontWeight: FontWeight.bold),
              ),
              Row(),
              ]),
      ),
      );
  }
  }
  </code></pre>
  
  <p>`
  I guess the top curve is not needed if the items are placed on each other but I left it there to know the actual shape. 
  Corrections and comments are also welcome. Thanks in advance.</p>