簡體   English   中英

如何制作特定的矩形 flutter

[英]How to make a specific rectangle flutter

我想制作像下面這樣的形狀並在我的 flutter 應用程序中寫上它在此處輸入圖像描述

我怎樣才能做到?

你可以使用 ClipPath

 class _BottomBarState extends State<BottomBar> {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: ClipPath(
        clipper: MyCustomClipper(),
        child: Container(
          width: 300,
          height: 50,
          color: Colors.red,
          alignment: Alignment.center,
          child:const Text("Your Text"),
        ),
      ),
    ));
  }
}

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

    path.lineTo(size.width, 0);
    path.lineTo(size.width - 50, 25);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);

    return path;
  }

  @override
  bool shouldReclip(MyCustomClipper oldClipper) => false;
}

輸出

您應該像這樣制作CustomPainter

class MyCustomRectangle extends CustomPainter {
  final Color color;

  const MyCustomRectangle({
    this.color = Colors.red,
  });

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.color = color;
    paint.style = PaintingStyle.fill;

    var path = Path();

    path.lineTo(size.width, 0);
    path.lineTo(size.width - (size.height / 2), size.height / 2);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);

    canvas.drawPath(path, paint);
  }

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

然后像這樣使用它:

CustomPaint(
          painter: MyCustomRectangle(),
          child: Padding(
            padding: EdgeInsets.symmetric(
              horizontal: 36.0,
              vertical: 8.0,
            ),
            child: Text(
              "Free Home Delivery 30 min",
              style: TextStyle(
                color: Colors.white,
                fontSize: 23.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        )

output:
在此處輸入圖像描述

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM