flutter动画组件

05-AnimatedPadding

Catalogue

AnimatedPadding是一个隐式的动画组件，提供动态改变内边距的动画组件，用法如下：

1
2
3
4
5
6
var _padding = 0.0;
AnimatedPadding(
  padding: EdgeInsets.symmetric(horizontal: _padding),
  duration: Duration(seconds: 2),
  child: Container(color: Colors.red),
)

duration参数是动画执行的时间。如果仅仅是构建这样一个组件是不会有动画效果，需要让padding参数发生变化，点击按钮设置新的_padding值：

1
2
3
4
5
6
7
RaisedButton(
  onPressed: () {
    setState(() {
      _padding = 50;
    });
  },
)

效果：

整体代码:

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
46
47
48
49
50
51
52
53
54
55
class GMExampleAnimatedPaddingTest extends StatefulWidget {
  GMExampleAnimatedPaddingTest({Key key}) : super(key: key);

  @override
  _GMExampleAnimatedPaddingTestState createState() =>
      _GMExampleAnimatedPaddingTestState();
}

class _GMExampleAnimatedPaddingTestState
    extends State<GMExampleAnimatedPaddingTest> {
  var _padding = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedPadding(
          padding: EdgeInsets.symmetric(horizontal: _padding),
          duration: Duration(seconds: 2),
          child: Container(
            height: 50,
            color: Colors.red,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Text("test"),
        onPressed: () {
          setState(() {
            _padding = 50;
          });
        },
      ),
    );
    return Column(
      children: <Widget>[
        Container(
          width: 300,
          height: 30,
          color: Colors.blue,
        ),
        SizedBox(
          height: 50,
        ),
        SizedBox(
          height: 100,
        ),
        RaisedButton(
          color: Colors.orange,
          onPressed: () {},
        ),
      ],
    );
  }
}