How to create this in flutter

Question

enter image description here

I have tried different ways like transform and rotation but not able do it

Answer 1

I think you've been getting some downvotes because you didn't share any of your previous attempts, on which the solution could be built.

I think what you might want to do is use a CustomClipper to create the desired shape. I wrote you a simple one that makes a wedged shape with just 4 points, but you can use Path.arc to make it more like the image you provided:

class WedgeClipper extends CustomClipper<Path> {
  final bool isRight;

  WedgeClipper({this.isRight = false});

  @override
  Path getClip(Size size) {
    Path path = Path();
    // mirror the clip accordingly when it's left or right aligned
    if (isRight) {
      path.addPolygon([
        Offset(0, size.height / 4),
        Offset(size.width, 0),
        Offset(size.width, size.height),
        Offset(0, 3 * size.height / 4)
      ], true);
    } else {
      path.addPolygon([
        Offset(0, 0),
        Offset(size.width, size.height / 4),
        Offset(size.width, 3 * size.height / 4),
        Offset(0, size.height)
      ], true);
    }

    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return true;
  }
}

Then to use it in your code, you can do something like:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Wedge List View'),
      ),
      body: ListView.builder(
        itemBuilder: (context, index) {
          bool isRightAligned = index % 2 == 0;
          return Padding(
            child: ClipPath(
              child: Material(
                child: SizedBox(
                  height: 80,
                  width: double.maxFinite,
                  child: Row(
                    mainAxisAlignment: isRightAligned ? MainAxisAlignment.end : MainAxisAlignment.start,
                    children: isRightAligned ? [
                    Text('Tile to the right side'),
                    SizedBox(width: 10),
                    Image.network('https://upload.wikimedia.org/wikipedia/commons/b/b1/VAN_CAT.png'),
                  ] : [
                    Image.network('https://upload.wikimedia.org/wikipedia/commons/b/b1/VAN_CAT.png'),
                    SizedBox(width: 10),
                    Text('Tile to the left side'),
                  ],),
                ),
                color: Color(0xffdddddd),
              ),
              clipper: WedgeClipper(
                  isRight: isRightAligned), // alternating left/right clips
            ),
            padding: EdgeInsets.symmetric(horizontal: 8.0),
          );
        },
      ),
    );
  }

It basically draws a rectangle, clips it with the CustomClipper and renders what's left.

The result looks like this: