1. 安装

loading_animation_widget

flutter pub add loading_animation_widget

2. 现实效果

loading_animation_widget_usage.gif

3. 实现

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final Color color = Colors.green;
  final double size = 50;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        children: [
          const Text('beat'),
          LoadingAnimationWidget.beat(color: color, size: size),
          const Divider(),
          const Text('bouncingBall'),
          LoadingAnimationWidget.bouncingBall(color: color, size: size),
          const Divider(),
          const Text('discreteCircle'),
          Center(
            child: LoadingAnimationWidget.discreteCircle(
              color: color,
              size: size,
            ),
          ),
          const Divider(),
          const Text('dotsTriangle'),
          LoadingAnimationWidget.dotsTriangle(color: color, size: size),
          const Divider(),
          const Text('fallingDot'),
          LoadingAnimationWidget.fallingDot(color: color, size: size),
          const Divider(),
          const Text('flickr'),
          LoadingAnimationWidget.flickr(
              leftDotColor: color, rightDotColor: Colors.red, size: size),
          const Divider(),
          const Text('fourRotatingDots'),
          LoadingAnimationWidget.fourRotatingDots(color: color, size: size),
          const Divider(),
          const Text('halfTriangleDot'),
          LoadingAnimationWidget.halfTriangleDot(color: color, size: size),
          const Divider(),
          const Text('hexagonDots'),
          LoadingAnimationWidget.hexagonDots(color: color, size: size),
          const Divider(),
          const Text('horizontalRotatingDots'),
          Center(
            child: LoadingAnimationWidget.horizontalRotatingDots(
              color: color,
              size: size,
            ),
          ),
          const Divider(),
          const Text('inkDrop'),
          LoadingAnimationWidget.inkDrop(color: color, size: size),
          const Divider(),
          const Text('newtonCradle'),
          LoadingAnimationWidget.newtonCradle(color: color, size: size),
          const Divider(),
          const Text('prograssiveDots'),
          Center(
            child: LoadingAnimationWidget.prograssiveDots(
                color: color, size: size),
          ),
          const Divider(),
          const Text('staggeredDotsWave'),
          Center(
            child: LoadingAnimationWidget.staggeredDotsWave(
              color: color,
              size: size,
            ),
          ),
          const Divider(),
          const Text('stretchedDots'),
          Center(
            child: LoadingAnimationWidget.stretchedDots(
              color: color,
              size: size,
            ),
          ),
          const Divider(),
          const Text('threeArchedCircle'),
          LoadingAnimationWidget.threeArchedCircle(color: color, size: size),
          const Divider(),
          const Text('threeRotatingDots'),
          LoadingAnimationWidget.threeRotatingDots(color: color, size: size),
          const Divider(),
          const Text('twistingDots'),
          Center(
            child: LoadingAnimationWidget.twistingDots(
                leftDotColor: color, rightDotColor: Colors.red, size: size),
          ),
          const Divider(),
          const Text('twoRotatingArc'),
          Center(
            child: LoadingAnimationWidget.twoRotatingArc(
              color: color,
              size: size,
            ),
          ),
          const Divider(),
          const Text('waveDots'),
          Center(
            child: LoadingAnimationWidget.waveDots(color: color, size: size),
          )
        ],
      ),
    );
  }
}