请问如何在flutter中实现这个形状

Question

如何在flutter中实现这个形状

我尝试过画这个形状，结果是这样的

我的尝试

我不知道如何绘制圆角圆形边框
就像提供的第一张图片一样

在 flutter 中构建这个形状 如何在flutter中实现这个形状

我的代码

     Center(
                  child: ClipPath(
                    clipper: MyCustomClipper(),
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.red,
                      ),
                      width: 200,
                      height: 200,
                      child: const Center(
                        child: Text(
                          'Clipped Container',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                  ),
                ),


class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.moveTo(30, 0);
    path.lineTo(size.width, 0);
    path.lineTo(size.width - 30, size.height);
    path.lineTo(0, size.height); // (3

    path.close();
    return path;
  }

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

Answer 1

这是实现所提供图像中的形状的完整代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CustomPaint(
            size: Size(200, 300), 
            painter: GradientShapePainter(),
          ),
        ),
      ),
    );
  }
}

class GradientShapePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // Define the gradient
    final Gradient gradient = LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: <Color>[
        Color(0xFF4CAF50), // Green
        Color(0xFFFFCDD2), // Light pink
      ],
    );

    // Create a paint object and set its shader to the gradient
    final Paint paint = Paint()
      ..shader = gradient.createShader(Rect.fromLTWH(0, 0, size.width, size.height));

    // Define the path for the shape
    final Path path = Path()
      ..moveTo(size.width * 0.1, 0) // Top left corner
      ..lineTo(size.width * 0.9, 0) // Top right corner
      ..lineTo(size.width, size.height) // Bottom right corner
      ..lineTo(0, size.height) // Bottom left corner
      ..close();

    // Draw the shape with rounded corners
    canvas.drawPath(
      path,
      paint,
    );
  }

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