Reputation: 1
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.
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