自定义弧形卡片形状 Flutter

Question

我试过创建这个形状，但我找不到弯曲卡片角的方法。这是我想要实现的目标 What I want to achieve

相反，我得到了这个形状： What I have achieved

这是我的示例代码：

    Container(
      child: Center(
        child: CustomPaint(
          painter: Chevron(),
          child: Container(
            width: 120.0,
            height: 140.0,
            child: Padding(
              padding: EdgeInsets.only(top: 30.0),
              child: Align(
                alignment: Alignment.topCenter,
                child: Text("1", style: TextStyle(fontSize: 24.0)),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
class Chevron extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final Gradient gradient = new LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [Colors.orangeAccent, Colors.yellow],
      tileMode: TileMode.clamp,
    );

    final Rect colorBounds = Rect.fromLTRB(0, 0, size.width, size.height);
    final Paint paint = new Paint()
      ..shader = gradient.createShader(colorBounds);

    Path path = Path();



    path.moveTo(0, 30);
    path.lineTo(0, size.height);
    //path.lineTo(size.width / 2, size.height - size.height / 3);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

知道如何解决这个问题吗？谢谢

Answer 1

您必须使用来自 here 的 flutter_custom_clippers 包来实现此形状。在你的pubspec.yaml文件中添加这个依赖，你可以参考我的回答here也

试试下面的代码希望对你有帮助

在你的文件中导入包

import 'package:flutter_custom_clippers/flutter_custom_clippers.dart';

您的小部件：

 ClipPath(
            clipper: RoundedDiagonalPathClipper(),
            child: Container(
              height: 320,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(
                  Radius.circular(
                    50.0,
                  ),
                ),
                color: Colors.grey[300],
              ),
              child: Center(
                child: Text("Your Shape"),//put your widget here
              ),
            ),
          ),

您的结果屏幕->

自定义弧形卡片形状 Flutter

Custom curved card shape Flutter

mobile

flutter

flutter-layout