Flutter CustomPaint and animationController

86 views Asked by At

i want to animate the charging and discharging of the capacitor ,there is an equation for charging and another equation for discharging but i want when press button, start the new painting from the end point of the previous curve but in this code when press button it start to paint from the initial point again , so the output of my code here:enter image description here

and this the code :

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

class Trace extends StatefulWidget {
  const Trace({Key? key}) : super(key: key);
  @override
  State<Trace> createState() => _TraceState();
}

@override
class _TraceState extends State<Trace> with TickerProviderStateMixin {
  late AnimationController animation;

  bool isCharging = true;
  Duration duration = const Duration(seconds: 20);
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    double screenWidth = MediaQuery.of(context).size.width;
    double x = screenWidth / 2;

    // Calculate the lower bound based on the screen width
    double lowerBound = (x - 80) / (x + 82);

    animation = AnimationController(
      vsync: this,
      duration: duration,
      lowerBound: lowerBound,
      upperBound: 1,
    )..addListener(() {
        setState(() {});
      });
    animation.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(onPressed: () {
        setState(() {
          isCharging = !isCharging;
        });
      }),
      backgroundColor: Colors.black,
      body: InteractiveViewer(
        minScale: 0.5,
        maxScale: 5,
        boundaryMargin: const EdgeInsets.all(double.infinity),
        child: Container(
          alignment: Alignment.center,
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: CustomPaint(
            painter: TracePainter(animation, isCharging),
            child: Container(),
          ),
        ),
      ),
    );
  }
}

class TracePainter extends CustomPainter {
  TracePainter(this.animation, this.isCharging);
  final Animation animation;
  final bool isCharging;
  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = const Color.fromARGB(255, 89, 236, 255)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.4;
    
    final Paint paintRect = Paint()
      ..color = Colors.grey
      ..style = PaintingStyle.stroke
      ..strokeWidth = 0.5;

    double screenWidth = size.width;
    double screenheight = size.height;

    double x = screenWidth / 2;
    double y = (screenheight / 2) - 50;
    final path = Path();
    double t = x - 80;

    double vo = 100;
    double c = 2 * 0.000001;
    double r = 500000 * 10;
    double y1= y - 50;
    double y2 = y - 50;
    double out = 0;

    path.moveTo(x - 80, y1);

    for (t; t <= ((x + 82) * (animation.value)); t += 0.01) {
      y1 = (y - 50) - vo * (1 - exp((-(t - (x - 80)) / (r * c))));
      y2 = (y - 50) - vo * (exp((-(t - (x - 80)) / (r * c))));
      if (isCharging) {
        out = y1;
      } else {
        out = y2;
      }
      path.lineTo(t, out);
    }

    canvas.drawPath(path, paint);
    canvas.drawRect(
        Rect.fromCenter(center: Offset(x, y - 100), width: 164, height: 104),
        paintRect);
  }

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

finally ,i want to modify this code to make the curve like this :

enter image description here

0

There are 0 answers