This is the code I have implemented it through using Custom Painter You can even Twig the path.quadraticBezierTo(0, 0, 0, 10); quadraticBezier for difrrenr shapes
It has exact same curved shape and line as in the image
import 'package:flutter/material.dart';
// Custom painter for straight horizontal line and small curve at the end
class CurvedLinePainter extends CustomPainter {
final bool isLeft;
CurvedLinePainter({required this.isLeft});
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.grey
..strokeWidth = 2.0
..style = PaintingStyle.stroke;
final path = Path();
if (isLeft) {
// Left side: horizontal straight line and small downward curve at the end
path.moveTo(size.width, 0); // Start from top-right
path.lineTo(10, 0); // Draw horizontal line to the left
path.quadraticBezierTo(0, 0, 0, 10); // Small downward curve at the end
} else {
// Right side: horizontal straight line and small downward curve at the end
path.moveTo(0, 0); // Start from top-left
path.lineTo(size.width - 10, 0); // Draw horizontal line to the right
path.quadraticBezierTo(size.width, 0, size.width, 10); // Small downward curve at the end
}
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}
class CurvedTextRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center, // Ensure vertical centering
children: [
// Left side
Container(
width: 60,
height: 20,
child: CustomPaint(
painter: CurvedLinePainter(isLeft: true),
),
),
// Center text
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Text(
'Top Categories',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 19,
),
),
),
// Right side
Container(
width: 60,
height: 20,
child: CustomPaint(
painter: CurvedLinePainter(isLeft: false),
),
),
],
);
}
}
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Curved Lines Demo')),
body: Center(
child: CurvedTextRow(),
),
),
));
}