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(), ), ); } }