How to create one side skew container in flutter

user_2056451 0
Viewed 1007

I'm new to Flutter. How do I create the shape marked here? I tried. Below is the code. enter image description here

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

flutter-layout flutter shapes
1 Answers

You can use clipPath to achieve desire output.

Following code help you more to understand.

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;
}
user_79240720
Related