Custom Ui using flutter

To create a UI with a Row widget that includes a curved line on the left, text in the middle, and a curved line on the right, you can indeed use a CustomPainter. Below, I’ll guide you through the process step by step.

Step 1: Set Up the Basic Structure
First, you’ll need a basic Flutter application structure. If you haven’t created a Flutter app yet, you can use the following command to create a new one:

flutter create curved_line_app
cd curved_line_app

Step 2: Create the Custom Painter
You will need to create a custom painter for the curved lines. Create a new file called curved_line_painter.dart:

import 'package:flutter/material.dart';

class CurvedLinePainter extends CustomPainter {
final bool isLeft;

CurvedLinePainter({required this.isLeft});

@override
void paint(Canvas canvas, Size size) {
 Paint paint = Paint()
  ..color = Colors.blue // Change color as needed
  ..style = PaintingStyle.stroke
  ..strokeWidth = 3.0; // Change thickness as needed

 // Define the path for the curve
 Path path = Path();
 if (isLeft) {
   path.moveTo(0, size.height / 2);
   path.quadraticBezierTo(size.width / 4, 0, size.width / 2, size.height 
   / 2);
 } else {
   path.moveTo(size.width / 2, size.height / 2);
   path.quadraticBezierTo(size.width * 3 / 4, size.height, size.width, 
   size.height / 2);
 }

  canvas.drawPath(path, paint);
 }

 @override
 bool shouldRepaint(CustomPainter oldDelegate) {
   return false;
 }

}

Step 3: Build the Row Widget
Now, use the CustomPainter in your main widget. Open main.dart and replace the content with the following code:

import 'package:flutter/material.dart';
import 'curved_line_painter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text('Curved Line UI'),
    ),
    body: Center(
      child: Row(
        children: [
          // Left curved line
          CustomPaint(
            size: Size(100, 50), // Adjust the size as needed
            painter: CurvedLinePainter(isLeft: true),
          ),
          // Text in the middle
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            child: Text(
              'Your Text Here',
              style: TextStyle(fontSize: 20),
            ),
          ),
          // Right curved line
          CustomPaint(
            size: Size(100, 50), // Adjust the size as needed
            painter: CurvedLinePainter(isLeft: false),
          ),
        ],
      ),
    ),
  ),
  );
 }
}

Step 4: Run Your Application
After setting everything up, run your application:

Explanation

CurvedLinePainter: This is a custom painter that draws a quadratic Bezier curve. The isLeft parameter determines if the curve should be drawn on the left or the right side.

CustomPaint: This widget is used to render the curves. You can adjust the size of the CustomPaint widget to change the width and height of the curves.

Row: This is used to align the curved lines and text horizontally.

Customization

• You can adjust the colors and sizes in the CurvedLinePainter.
• Change the text inside the Text widget as needed.