Flutter-使用Custompaint绘制一个圆圈进度条

今天正好需求做完了没啥事，学习了一下CustomPaint，做了一个圆圈式的进度条，代码如下：

import 'dart:async';
import 'dart:math';

import 'package:Flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "Flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "Flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: CustomPaintTestPage(),
    );
  }
}

class CustomPaintTestPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return CustomPaintTestState();
  }
}

class CustomPaintTestState extends State<CustomPaintTestPage> with TickerProviderStateMixin{

  AnimationController anim;
  Animation animation;

  @override
  void initState() {
    anim = AnimationController(duration: Duration(seconds: 2), vsync: this);
    animation = CurvedAnimation(parent: anim, curve: Curves.easeInOut, );
    animation = Tween<double>(begin: 0, end: 360).animate(animation)
      ..addListener( () {
          if (mounted) setState(() {});
        }
      )
      ..addStatusListener((status) {
          switch (status) {
            case AnimationStatus.completed:
              anim.reverse();
              break;
            case AnimationStatus.dismissed:
              anim.forward();
              break;
            default:
              break;
          }
      });
    super.initState();
    anim.forward();
  }

  @override
  Widget build(BuildContext context) {
    print(anim.value);
    return Material(
      child: Center(
        child: CustomPaint(
          painter: MyPainter(animation),
        ),
      ),
    );
  }

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

}

class MyPainter extends CustomPainter {

  Animation animation;

  MyPainter (this.animation);

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
        ..color = Colors.grey
        ..style = PaintingStyle.stroke
        ..strokeWidth = 5;
    canvas.drawCircle(Offset.zero, 30, paint);

    paint
        ..color = Colors.blueAccent
        ..strokeWidth = 5
        ..style = PaintingStyle.stroke;
    canvas.drawArc(Rect.fromCenter(center: Offset.zero, width: 60, height: 60), 0, animation.value * pi / 180, false, paint);

  }

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

效果如下：

 

原文地址：https://www.cnblogs.com/FdWzy/p/13804419.html