如何使用 CarouselSlider 制作 customPaint

Question

I'm trying to Achieve the Above Design :

what what I did is creating CarouselSlider with a custom painter with help of stack and position property

what is not working for me is that can't laying any other image or text over my custom shape

                CarouselSlider.builder(
                itemCount: coverImage.length,
                itemBuilder: (context, index, realIdx) {
                  return CustomPaint(
                    size: Size(320, (320 * 0.5).toDouble()),
                    //You can Replace [WIDTH] with your desired width for Custom Paint and height will be calculated automatically
                    painter: RPSCustomPainter(),
                  );
                },

the original design :

Is this the best way to do it ?

Answer 1

Use CarouselOptions to set size.

options: CarouselOptions(
          /// here controll the CardSize
          aspectRatio: 400 / 300, 
          height: 300,
          onPageChanged: (index, reason) {
            print(index.toString());
          },
        ),

Also, you can wrap with Row to use CustomPaint 's size: but I don't recommend to use here extra multChild-Widget .

Here is the demo widget.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CarouselSlider.builder(
        itemCount: 33,
        options: CarouselOptions(
          /// here controll the CardSize
          aspectRatio: 400 / 300,
          height: 300,

          onPageChanged: (index, reason) {
            print(index.toString());
          },
        ),
        itemBuilder: (context, index, realIdx) {
          return
              // Row(  //* Row not recommend
              //   children: [
              CustomPaint(
            size: const Size(50, 30), /* this size have no Effect on item without row
            painter: MyPaint(),
            child: Stack(
              children: [
                Align(
                  alignment: Alignment.topCenter,
                  child: Text("Item $index"),
                ),
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Text("Item vB: $index"),
                ),
              ],
            ),
            //   ),
            // ],
          );
        },
      ),
    );
  }
}

class MyPaint extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.orange
      ..style = PaintingStyle.fill;

    canvas.drawRect(
        Rect.fromLTRB(10, 10, size.width - 10, size.height - 10), paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}