如何在 Flutter 中制作圆角矩形答案

【问题标题】：How to make Rounded Rectangle in Flutter如何在 Flutter 中制作圆角矩形
【发布时间】：2021-09-02 20:41:22
【问题描述】：

我正在尝试使自定义画家的三角形具有圆角。左边的图片是我目前所做的，右边的图片是我想做的。

这是我的代码。

 class Triangle extends StatelessWidget {
  const Triangle({
    Key? key,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
        painter: MyPainter(),
        child: Container(
            height: MySize.yMargin(10),
            width: MySize.xMargin(20),
            decoration: BoxDecoration(borderRadius: BorderRadius.circular(30)),
            child: Center(
                child: Padding(
                    padding: const EdgeInsets.only(left: 30.0, bottom: 16),
                    child: Transform.rotate(
                        angle: math.pi / 4,
                        child: Text('New',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: MySize.textSize(5),
                              fontWeight: FontWeight.bold,
                            )))))));
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    paint.color = Colors.yellow;
    var path = Path();
    path.lineTo(size.width, 0);
    path.lineTo(size.height, size.width);
    path.close();
    canvas.drawPath(path, paint);
  }

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

【问题讨论】：

标签： flutter dart flutter-layout custom-painter

【解决方案1】：

你可以试试看这个package

【讨论】：

谢谢，但是那个包无法实现我想要做的。

【解决方案2】：

试试这个：

import 'package:vector_math/vector_math.dart' as vector;

        child: Container(
          color: Colors.yellow,
          width: 300,
          height: 100,
          child: Stack(
            children: [
              Positioned(
                top: -20,
                right: -20,
                child: Transform.rotate(
                  angle: vector.radians(45),
                  child: ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(10)),
                    child: Container(
                      alignment: Alignment.bottomCenter,
                      height: 50,
                      width: 50,
                      color: Color(0xff2DD485),
                      child: Text('NEW'),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),

【讨论】：