Flutter笔记72：AnimatedContainer制作图表动画效果

AnimatedContainer和AnimatedSwitcher组件差不多，都是动画容器。使用这种动画容器非常方便，无需定义AnimationController、Tween等

AnimatedContainer和其他的容器类控件一样，设置各种属性，当我们通过setState改变其属性值时就会出现动画效果。

charts.dart：

import 'package:flutter/material.dart';

class ChartsAnimation extends StatefulWidget{
  ChartsAnimation({Key key}) : super(key:key);

  _ChartsAnimationState createState() => _ChartsAnimationState();
}

class _ChartsAnimationState extends State<ChartsAnimation>{
  double height = 100.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedContainer制作图表动画效果'),
      ),
      body: Center(
        child: Container(
          height: 400.0,
          alignment: AlignmentDirectional.bottomStart,
          child: InkWell(
            onTap: (){
              setState(() {
                height = 320.0;
              });
            },
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                AnimatedContainer(
                  duration: Duration(seconds: 1),
                  width: 40.0,
                  height: height - 40,
                  color: Colors.green,
                ),
                AnimatedContainer(
                  margin: EdgeInsets.only(left: 10.0),
                  duration: Duration(seconds: 2),
                  width: 40.0,
                  height: height - 10,
                  color: Colors.orange,
                ),
                AnimatedContainer(
                  margin: EdgeInsets.only(left: 10.0),
                  duration: Duration(seconds: 1),
                  width: 40.0,
                  height: height - 50,
                  color: Colors.black,
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

main.dart:

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        title: 'AnimatedContainer制作图表动画效果',
        theme: ThemeData(
          primarySwatch: Colors.blue
        ),
        debugShowCheckedModeBanner: false,
        home: AnimateDemo(),
      ),
    );
  }
}

class AnimateDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    List<Widget> list = [
      ChartsAnimation()
    ];

    return Scaffold(
      appBar: AppBar(
        title: Text('动画示例'),
      ),
      body: ListView(
        children: list.map((widget){
          return ListTile(
            title: Text(widget.toString()),
            onTap: (){
              Navigator.of(context).push(MaterialPageRoute(builder: (context)=>widget));
            },
          );
        }).toList(),
      ),
    );
  }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！