TikTok Spinner Loader

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: const Duration(milliseconds: 1100),
    vsync: this,
  )
    ..repeat()
    ..addListener(() {
      setState(() {});
    });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        title: Text('Appbar'),
      ),
      body: Center(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
            Text(
              'Canvas',
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 20, height: 2),
            ),
            Container(
              alignment: Alignment.center,
//            color: Colors.black,
              width: 200,
              height: 200,
              child: CustomPaint(
                painter: OpenPainter(scaleAnim: _controller.value),
              ),
            ),
          ])),
    );
  }
}

class OpenPainter extends CustomPainter {
  double scaleAnim;
  double scaleFactor;
  double radius;
  double gap;
  OpenPainter(
      {required this.scaleAnim,
      this.radius = 50.0,
      this.scaleFactor = 0.3,
      this.gap = 3});

  @override
  void paint(Canvas canvas, Size size) {
    double scaleOffset = (scaleAnim > 0.5) ? 0.5 : 0;
    scaleAnim =
        (Curves.easeInOutQuart.transform((scaleAnim - scaleOffset) * 2)) / 2 -
            scaleOffset;

    double shiftAnim = ((((scaleAnim + 0.5) * 4 % 4) - 2).abs() - 1);
    double offsetAnim = ((shiftAnim + 1) / 2) * 2 - 1;
    double redAnim = ((((scaleAnim + 0.25) * 4 % 4) - 2).abs() - 1);
    double blueAnim = ((((scaleAnim + 0.75) * 4 % 4) - 2).abs() - 1);

    blueAnim = Curves.easeInOutCubic.transform((blueAnim + 1) / 2) * 2 - 1;
    redAnim = Curves.easeInOutCubic.transform((redAnim + 1) / 2) * 2 - 1;

    var red = Paint()..color = Color(0xFF25F4EE);
    var blue = Paint()..color = Color(0xFFFE2C55);
    var black = Paint()..color = Colors.black;
    var white = Paint()..color = Colors.white;

    canvas.drawPath(
      Path()
        ..addOval(Rect.fromCircle(
            center: Offset((radius + gap) * offsetAnim, 0),
            radius: radius + (radius * scaleFactor * blueAnim))),
      blue,
    );

    canvas.drawPath(
      Path()
        ..addOval(Rect.fromCircle(
            center: Offset(-(radius + gap) * offsetAnim, 0),
            radius: radius + (radius * scaleFactor * redAnim))),
      red,
    );

    canvas.drawPath(
        Path.combine(
          PathOperation.intersect,
          Path()
            ..addOval(Rect.fromCircle(
                center: Offset((radius + gap) * offsetAnim, 0),
                radius: radius + (radius * scaleFactor * blueAnim))),
          Path()
            ..addOval(Rect.fromCircle(
                center: Offset(-(radius + gap) * offsetAnim, 0),
                radius: radius + (radius * scaleFactor * redAnim))),
        ),
        white);

    canvas.clipPath(
        Path.combine(
          PathOperation.intersect,
          Path()
            ..addOval(Rect.fromCircle(
                center: Offset((radius + gap) * offsetAnim, 0),
                radius: radius + (radius * scaleFactor * blueAnim))),
          Path()
            ..addOval(Rect.fromCircle(
                center: Offset(-(radius + gap) * offsetAnim, 0),
                radius: radius + (radius * scaleFactor * redAnim))),
        ),
        doAntiAlias: true);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}