79096770

Date: 2024-10-17 06:44:57
Score: 0.5
Natty:
Report link

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

enter image description here

 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(),
          ),
        ),
      ));
    }
Reasons:
  • Probably link only (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: Vaibhav Yadav