infinite-hyacinth-1071

readme.md

infinite-hyacinth-1071

Created with <3 with dartpad.dev.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Weight Dashboard Animation',
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: MyPainter(),
    );
  }
}

class MyPainter extends StatefulWidget {
  @override
  _MyPainterState createState() => _MyPainterState();
}

class _MyPainterState extends State<MyPainter>
    with TickerProviderStateMixin {

  late Animation<double> animation2;
  late AnimationController controller2;

  @override
  void initState() {
    super.initState();

    controller2 = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 4),
    );

    Tween<double> radiusTween = Tween(begin: 0.0, end: -20);

    animation2 = radiusTween.animate(CurvedAnimation(
      parent: controller2,
      curve: Curves.easeInOut,
    ))
      ..addListener(() {
        setState(() {});
      });
//       ..addStatusListener((status) {
//         if (status == AnimationStatus.completed) {
//           controller2.reverse();
//         } else if (status == AnimationStatus.dismissed) {
//           controller2.forward();
//         }
//       });

    controller2.forward();
  }

  @override
  void dispose() {
    controller2.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Polygons'),
      ),
      body: SafeArea(
        child: Stack(
          alignment: Alignment.topCenter,
          children: <Widget>[
            AnimatedBuilder(
              animation: animation2,
              builder: (context, snapshot) {
                return CustomPaint(
                  painter: ShapePainter(animation2.value),
                  child: Container(),
                );
              },
            ),
            Positioned(
              child: Container(
                color: Colors.pink.withOpacity(0.2),
                width: 2,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// FOR PAINTING POLYGONS
class ShapePainter extends CustomPainter {
  final double offset;
  final double strokeWidth;
  final double spaceBetween;

  ShapePainter(this.offset, [this.strokeWidth = 2, this.spaceBetween = 10]);

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.teal
      ..strokeWidth = strokeWidth
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round;

    var maxLines = (size.width / spaceBetween).floor();

    var halfLine = (maxLines / 2);
    var halfLineWidth = halfLine * spaceBetween;
    var halfWidth = size.width / 2;
    var x = halfWidth - halfLineWidth + (spaceBetween / 2);

    var leftOffset = (spaceBetween * offset) + x;

    print(
        'halfLine: $halfLine, halfLineWidth: $halfLineWidth, halfWidth: $halfWidth, x: $x, offset: $offset');

    for (var i = 0; i < maxLines * 1.5; i++) {
      canvas.drawLine(Offset(((i * spaceBetween) + leftOffset).toDouble(), 16),
          Offset(((i * spaceBetween) + leftOffset).toDouble(), 32), paint);
    }
  }

  @override
  bool shouldRepaint(ShapePainter oldDelegate) {
    return oldDelegate.offset != offset;
//     return false;
  }
}