微信交流群

老孟公众号

# AnimatedIcon

我们都知道Flutter系统中提供了大量的图标,但你是否知道Flutter还提供了很多动画图标,想要使用这些动画图标需要使用AnimatedIcon控件,首先需要设置图标,代码如下:

AnimatedIcon(
  icon: AnimatedIcons.view_list,
  ...
)
1
2
3
4

还需要设置progressprogress用于图标的动画,设置如下:

import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  
  State<StatefulWidget> createState() => _TestState();
}

class _TestState extends State<Test> with TickerProviderStateMixin {
  AnimationController animationController;

  
  void initState() {
    super.initState();
    animationController =
        AnimationController(duration: Duration(seconds: 1), vsync: this)
          ..addStatusListener((AnimationStatus status) {
            if (status == AnimationStatus.completed) {
              animationController.reverse();
            } else if (status == AnimationStatus.dismissed) {
              animationController.forward();
            }
          });
    animationController.forward();
  }

  
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      width: 100,
      alignment: Alignment.center,
      child: AnimatedIcon(
        icon: AnimatedIcons.view_list,
        progress: animationController,
      ),
    );
  }

  
  dispose() {
    super.dispose();
    animationController.dispose();
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

上面的代码同时对动画的状态进行了监听使动画往复运动,动画效果:

系统提供的图标样式如下: