颤振-绘制卡片的左上角和下半部分

Question

我想在卡的左上角绝对位置和下部绘制一个旋转的圆角

我已经制作好卡片了，但是我不知道如何绘制左上角和下部，我尝试了CustomPainter和rotated_rounded_corners程序包，但是没有帮助。

对代码进行了一些更改，并添加了新的屏幕截图：

import 'package:flutter/material.dart';
import 'package:flutter_covid19_stats/config/palette.dart';

class StatsGrid2 extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.45,
      child: Column(
        children: <Widget>[
          Flexible(
            child: Row(
              children: <Widget>[
                _buildStatCard('65,600', 'Deaths', 59412),
                _buildStatCard('895,500', 'Active', 59410),
              ],
            ),
          ),
          Flexible(
            child: Row(
              children: <Widget>[
                _buildStatCard('251,822', 'Recovered', 59413),
                _buildStatCard('210', 'Countries', 0xe3a2),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Expanded _buildStatCard(String count, String title, int iconCode){

    final double _borderRadius = 15.0;

    return Expanded(
      child: Container(
        padding: EdgeInsets.all(12.0),
        child: Stack(
          children: <Widget>[
            Container(
              // width: MediaQuery.of(context).size.width,
              height: 120.0,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(_borderRadius),
                gradient: LinearGradient(
                  colors: [Palette.swatch4, Palette.swatch3],
                  begin: Alignment.bottomCenter,
                  end: Alignment.topCenter,
                ),
              ),
            ),
            Positioned(
              left: 0,
              top: 0,
              child: CustomPaint(
                size: Size(180, 120),
                painter: CustomPainter2(Palette.swatch6),
              ),
            ),
            Positioned(
              left: 0,
              bottom: 0,
              child: CustomPaint(
                size: Size(180, 140),
                painter: CustomPainter1(Palette.swatch3),
              ),
            ),
            Positioned.fill(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Expanded(
                    child: Padding(
                      padding: EdgeInsets.only(left: 5.0, top: 5.0),
                      child: Align(
                        alignment: Alignment.topLeft,
                        child: Icon(
                          IconData(iconCode, fontFamily: 'MaterialIcons'),
                          color: Palette.swatch1,
                        ),
                      ),
                    ),
                    flex: 1,
                  ),
                  Expanded(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Text(
                          count,
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 30.0,
                              fontWeight: FontWeight.w600
                          ),
                        ),
                        SizedBox(height: 25.0),
                        Text(
                          title,
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 15.0,
                            fontWeight: FontWeight.w600
                          ),
                        ),
                        SizedBox(height: 5.0),
                      ],
                    ),
                    flex: 13,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

}

class CustomPainter1 extends CustomPainter{

  final Color customColor;
  // final Color endColor;

  CustomPainter1(this.customColor);

  @override
  void paint(Canvas canvas, Size size) {

    var paint = Paint();
    paint.color = customColor;
    // paint.shader = ui.Gradient.linear(
    //     Offset(0, 0), Offset(size.width, size.height), [
    //   HSLColor.fromColor(startColor).withLightness(0.8).toColor(),
    //   endColor
    // ]);

    var path = Path()
      ..moveTo(0, size.height * 0.8)
      ..quadraticBezierTo(0, size.height,size.width * 0.1, size.height)
      ..lineTo(size.width * 0.8, size.height)
      ..quadraticBezierTo(size.width, size.height,size.width, size.height * 0.8)
      ..lineTo(0, size.height * 0.8)
      ..close();

    canvas.drawPath(path, paint);

  }

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

class CustomPainter2 extends CustomPainter{

  final Color customColor;

  CustomPainter2(this.customColor);

  @override
  void paint(ui.Canvas canvas, ui.Size size) {

    var paint = Paint();
    paint.color = customColor;

    var path1 = Path()
      ..moveTo(size.width * 0.1, 0)
      ..lineTo(size.width * 0.2, 0)
      ..quadraticBezierTo(size.width * 0.25, size.height * 0.34, 0, size.height * 0.29)
      ..lineTo(0, size.height * 0.1)
      ..quadraticBezierTo(0, 0, size.width * 0.1, 0)
      ..close();

    canvas.drawPath(path1, paint);
  }

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

}

对于卡片Quadratice的底部，Bezeir没有在右下角给我所需的弯曲角， 还有其他方法可以达到这个目的吗？

目标： Stat_Grid

结果： stat_grid_present