Question 212737 in Flutter Question posted in
The official Flutter documentation can be found here.

How to make custom paint lines edges in flutter

This is first image which i want to create

This is the second image which i achieved using that code

**I have to create an animation like line moving from left to right in zigzag motion with round curves .This custom-paint code generates these lines but these are straight zig-zag lines like , i want to make these lines with some round curve in them how can i do that

I have to create an animation like line moving from left to right in zigzag motion with round curves .This custom-paint code generates these lines but these are straight zig-zag lines like , i want to make these lines with some round curve in them how can i do that
I have to create an animation like line moving from left to right in zigzag motion with round curves .**

  class DigitalWavePainter extends CustomPainter {
    final double animationValue;
    final double widthOfCanvas;
    final double heightOfCanvas;   
    DigitalWavePainter(
        this.animationValue, this.widthOfCanvas, this.heightOfCanvas);
  @override
  void paint(Canvas canvas, Size size) {
    final width = widthOfCanvas;
    final height = heightOfCanvas;   
    final path = Path();   
    final path2=Path();    
    final numSegments = 200; // Increase the number of line segments
    final segmentWidth = width / numSegments;    
    final amplitude = height + 10;
    final upperBoundary = height * 0.01;
    final lowerBoundary = height; // Adjust the lower boundary value    
    final waveProgress = animationValue * 2;
    final waveProgressCircle = animationValue;
    double dotY = 0;
    double dotX = -50;
    path.moveTo(width, (math.sin(0) * amplitude) + height / 2); // Start at the initial point of the wave
    path2.moveTo(-50, (math.sin(0) * amplitude) + height / 2);    
        for (int i = 1; i <= numSegments; i++) {
        final x = i * segmentWidth ;
        final animationTime = (x / width * math.pi) + waveProgress * math.pi;
        final y = (math.sin(animationTime) * amplitude) + height / 12;
        dotY = y;
        if (y < upperBoundary) {
          final newY = upperBoundary;
          dotY = newY;
          dotX = x;            
      path2.lineTo(
         x,newY
          );
        } else if (y > lowerBoundary) {
          final newY = lowerBoundary;
          dotY = newY;
          dotX = x;
           path2.quadraticBezierTo(x - segmentWidth, newY, x, newY);               
          print("lower boundary");
        } else {
          dotX = x;
          dotY = y;
          path2.lineTo(x, y);
        }
      }    
    for (int i = 1; i <= numSegments / 2; i++) {
      final x = width - i * segmentWidth;
      final animationTime = (x / width * math.pi) + waveProgress * math.pi;
      final y = (math.sin(animationTime) * amplitude) + height / 12;
      dotY = (math.sin(animationTime) * amplitude) + height / 12;
      if (y < upperBoundary) {
        final newY = upperBoundary;    
        dotY = newY ;
     path.quadraticBezierTo(x + segmentWidth, newY, x, newY);
      } else if (y > lowerBoundary) {
        final newY = lowerBoundary;   
        dotY = newY;        
         path.quadraticBezierTo(x + segmentWidth, newY, x, newY);
      } else {
        dotY = y;
        path.lineTo(x, y);
      }
    } 
    const dotRadius = 20.0; // Set the radius of the dot    
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 16.0
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round; 
    final circlePaint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;
  
    final boundaryPaint = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.stroke
      ..strokeWidth = 5.0;   
    canvas.drawPath(path, paint);
    canvas.drawPath(path2,paint);
    // Draw the dot as a filled circle at the current position
    canvas.drawCircle(
      Offset(width / 2, dotY + animationValue),
      dotRadius,
      circlePaint,
    );   
    // Draw the boundary circle
    canvas.drawCircle(Offset(width / 2, dotY), dotRadius, boundaryPaint);
  }   
    @override
    bool shouldRepaint(DigitalWavePainter oldDelegate) {
      return oldDelegate.animationValue != animationValue;
    }   
  }
Tags:

2

Answers


  1. 0

    I have come up with this solution :
    enter image description here

    Login or Signup to reply.
  2. 0

    digitalVavePainter.dart

    import 'package:flutter/material.dart';
import 'package:stackoverflow_demo/screens/zig_zag_demo.dart';

class DigitalVavePainter extends StatefulWidget {
  @override
  State<DigitalVavePainter> createState() => _DigitalVavePainterState();
}

class _DigitalVavePainterState extends State<DigitalVavePainter> {
  @override
  Widget build(BuildContext context) {
    double screenHeight = MediaQuery.of(context).size.height;

    return Scaffold(
      backgroundColor: Color(0xff171e26),
      body: Stack(
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 40),
            child: Align(
                alignment: Alignment.topCenter,
                child: Text(
                  "Sleep",
                  style: TextStyle(
                      fontSize: 25,
                      color: Colors.white,
                      fontWeight: FontWeight.bold),
                )),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 170),
            child: Align(
                alignment: Alignment.topCenter,
                child: Text(
                  "ExHale",
                  style: TextStyle(
                      fontSize: 20,
                      color: Colors.white,
                      fontWeight: FontWeight.bold),
                )),
          ),
          Center(
            child: CustomPaint(
              size: Size(double.infinity, screenHeight * 1),
              painter: ZigZagPainter(),
            ),
          ),
        ],
      ),
    );
  }
}

    create class file ZigZagPainter.dart

    import 'package:flutter/material.dart';

class ZigZagPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // Define the points for the cubic Bézier curve
    double startPointX = size.width * 0.00;
    double startPointY = size.height * 0.35;
    double endPointX = size.width * 1;
    double endPointY = size.height * 0.5;

    Offset startPoint = Offset(startPointX, startPointY);
    Offset endPoint = Offset(endPointX, endPointY);
    Offset controlPoint1 = Offset(size.width * 0.5, size.height * 0.3);
    Offset controlPoint2 = Offset(size.width * 0.8, size.height * 0.7);

    // Create the path for the cubic Bézier curve
    var path = Path()
      ..moveTo(startPoint.dx, startPoint.dy)
      ..cubicTo(
        controlPoint1.dx,
        controlPoint1.dy,
        controlPoint2.dx,
        controlPoint2.dy,
        endPoint.dx,
        endPoint.dy,
      );

    // Create a paint object and set its properties
    var paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke
      ..strokeWidth = 4.0;

    // Draw the cubic Bézier curve on the canvas
    canvas.drawPath(path, paint);

    // Calculate the position and tangent at t = 0.5 (middle of the curve)
    var metrics = path.computeMetrics();
    var middleMetric = metrics.elementAt(0);
    var middlePosition =
        middleMetric.getTangentForOffset(middleMetric.length / 2)!.position;

    // Draw a circle at the middle position
    var circlePaint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;
    canvas.drawCircle(middlePosition, 10, circlePaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search