如何在颤动中创建一侧倾斜容器

Question

我是 Flutter 新手。如何创建此处标记的形状？我试过。下面是代码。

Positioned(
                      top: 30.0,
                      left: 15.0,
                      width: 50.0,
                      height: 20.0,
                      child: Container(
                    decoration: BoxDecoration(
                      color: Colors.pink,
                      shape: BoxShape.rectangle
                    ),
                        child: Padding(
                          padding: const EdgeInsets.symmetric(vertical: 4.0,horizontal: 8.0),
                          child: Text('අලුත්ම පුවත',style: TextStyle(color: Colors.white, fontSize: 10.0,fontWeight: FontWeight.bold)),
                        ),
                  ),

complete code

Answer 1

可以使用clipPath来实现想要的输出。

下面的代码可以帮助您更好地理解。

class DeleteWidget extends StatefulWidget {
  @override
  _DeleteWidgetState createState() => _DeleteWidgetState();
}

class _DeleteWidgetState extends State<DeleteWidget> {
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ClipPath(
          clipper: SkewCut(),
          child: Container(
            color: Colors.red,
            width: 200,
            height: 50,
            child: Center(child: Text("Hello World")),
          ),
        ),
      ),
    );
  }
}

class SkewCut extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(size.width, 0);

    path.lineTo(size.width - 20, size.height);
    path.lineTo(0, size.height);
    path.close();

    return path;
  }

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

如何在颤动中创建一侧倾斜容器

How to create one side skew container in flutter

shapes

flutter

flutter-layout