flutter: Change path shape position in grid view items

user_9010134 0
Viewed 211

In my page I have a gridview. In gridview items I use ClipPath. The problem is here. The path that I shows is on top and it is not possible to change it's position into the bottom:

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context,
        designSize: Size(360, 640), allowFontScaling: true);
    return Scaffold(
      body: Stack(
        children: [
          Padding(
            padding: Dimention.mainChartsOverallLRPadding.copyWith(top: 100.h),
            child: Column(
              mainAxisSize: MainAxisSize.max,
              children: [
                Expanded(
                  child: GridView.count(
                    padding: EdgeInsets.zero,
                    physics: ScrollPhysics(),
                    crossAxisCount: 2,
                    childAspectRatio: 160 / 144,
                    mainAxisSpacing: 8,
                    crossAxisSpacing: 8,
                    children: gridItems
                        .map(
                          (item) => Container(
                            decoration: BoxDecoration(
                              color: Colors.red,
                              borderRadius: BorderRadius.circular(8),
                            ),
                            child: Stack(
                              children: [
                                ClipPath(
                                  clipper: ChartDegreeArtWidget(),
                                  child: Container(
                                    decoration: BoxDecoration(
                                      color: item.color.toColor(),
                                      borderRadius: BorderRadius.circular(8),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                        )
                        .toList(),
                    shrinkWrap: true,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );

It's result:

enter image description here

How can I change curve path position into bottom of container ? Align is not working

flutter-layout flutter
1 Answers

enter image description here

here is my result, I think so the problem is in the ChartDegreeArtWidget, use the code below

class ChartDegreeArtWidget extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();

    path.moveTo(0, size.height * 0.55);
    path.quadraticBezierTo(size.width * 0.25, size.height * 0.3, size.width * 0.6, size.height * 0.6);
    path.quadraticBezierTo(size.width * 0.85, size.height * 0.8, size.width * 1.0, size.height * 0.6);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
user_41551650
Related