Valerii Vvedenskyi
Valerii Vvedenskyi

Reputation: 1

How to create a smooth transition from a rounded corner to a diagonal line?

I'm working on a custom shape in Flutter using CustomPainter, and I need to create smooth transitions between rounded corners and diagonal lines. The goal is for these transitions to look seamless and natural, without any visible joints.

enter image description here

I need to implement 3 elements in this form enter image description here

My current code creates rounded corners on the top-right and bottom-left, but the transition between the rounded corners and diagonal lines appears sharp and disconnected. Here’s the code I have so far, which is close but still not achieving the desired smoothness:

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromRGBO(21, 21, 21, 1),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            ClipPath(
              clipper: RoundedTriangleClipper(),
              child: Container(
                decoration: const BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [
                          Color.fromRGBO(172, 23, 50, 1),
                          Color.fromRGBO(211, 42, 73, 1),
                        ]),
                    boxShadow: [
                      BoxShadow(
                        color: Color.fromRGBO(255, 255, 255, 0.08),
                        spreadRadius: 0,
                        blurRadius: 8,
                        offset: Offset(0, -4),
                      ),
                      BoxShadow(
                        color: Color.fromRGBO(0, 0, 0, 0.8),
                        spreadRadius: 0,
                        blurRadius: 8,
                        offset: Offset(0, 4),
                      ),
                    ]),
                width: 150,
                height: 150,
              ),
            )
          ],
        ),
      ),
    );
  }
}

class RoundedTriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    const double radius = 25;
    Path path = Path()
      ..moveTo(radius, 0)
      ..lineTo(size.width - radius, 0)
      ..arcToPoint(Offset(size.width, radius),
          radius: const Radius.circular(radius))
      ..lineTo(radius, size.height)
      ..arcToPoint(Offset(0, size.height - radius),
          radius: const Radius.circular(radius))
      ..lineTo(0, radius)
      ..arcToPoint(const Offset(radius, 0),
          radius: const Radius.circular(radius))
      ..close();

    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return false;
  }
}

Upvotes: 0

Views: 76

Answers (0)

Related Questions