Question 232883 in Flutter Question posted in
The official Flutter documentation can be found here.

How to create a container with tilt and curve in flutter?

I have this figma design as shown in below image, i don’t know how to achieve that curve container design in flutter.

[here is the image that i want to achieve in flutter](https://phpout.com/wp-content/uploads/2023/08/SkP5j-jpg.webp)

I was exploring the dribble and saw this and just curious how to achieve this.

Tags:

2

Answers


  1. 0

    You can rotate any element using the Transform Widget, and the Matrix4 function, which enables you to apply math transforms in any element.

    Here is a full example with code:

    Transform(
      alignment: FractionalOffset.center,
      transform: Matrix4.identity()
        ..setEntry(3, 2, 0.01)
        ..scale(0.5)
        ..rotateY(-0.15)
        ..rotateX(0.15),
      child: Container(
        decoration: BoxDecoration(
          gradient: const LinearGradient(
            colors: [
              Color.fromARGB(255, 136, 178, 19),
              Color.fromARGB(255, 255, 221, 221)
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),
          border: Border.all(),
        ),
      ),
    ),

    enter image description here

    There are some libraries that also help you create these kinds of effects, and add interactivity to them, like the Flutter animate

    Login or Signup to reply.
  2. 0 
    class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {

  @override
  Widget build(BuildContext context) {
    return Container(
  margin: EdgeInsets.only(left: 15, right: 15),
  alignment: Alignment.center,
  child: ClipPath(
    clipper: ClipPathClass(),
    child: SizedBox(
      width: 400,
      height: 450,
      child: Container( decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(30.0)),
    color: Colors.amber,
  ),),
    ),
  ),
);
  }
}

class ClipPathClass extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0.0, size.height);

    var firstControlPoint = Offset(size.width / 4, size.height);
    var firstPoint = Offset(size.width / 2, size.height);
    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstPoint.dx, firstPoint.dy);

    var secondControlPoint = Offset(size.width - (size.width / 2), size.height);
    var secondPoint = Offset(size.width - 75, size.height);
    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
        secondPoint.dx, secondPoint.dy);

    path.lineTo(size.width, 0.0);
    path.close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

    I tried to capture this shape by creating ClipPath. You can put and edit the image you want in the Container in ClipPath. I hope it helped. Enjoy your work.

    Output:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search