How to create one side skew container in flutter

Question

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

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

Solution

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

Comments

[TipVisor]

yes.. thank you. It's correct. How can the width of the container change when the word length is reduced or increased?

[Viren V Varasadiya]

Remove width property of container.

[TipVisor]

yes it's good. i added tha padding & to right side add big value. that's smart.

[Shourya Shikhar]

Can you explain this block? path.lineTo(size.width, 0); path.lineTo(size.width - 20, size.height); path.lineTo(0, size.height); path.close();