1、数字增加动画、进度条增加动画
import 'package:flutter/material.dart';
class PageFour extends StatefulWidget{
@override
_PageFour createState() => _PageFour();
}
class _PageFour extends State<PageFour> with TickerProviderStateMixin{
AnimationController controller;
Animation animation;
var number = 90;
@override
void initState(){
super.initState();
controller = AnimationController( vsync: this, duration: const Duration(milliseconds: 3000));
final Animation curve = CurvedAnimation(parent: controller,curve: Curves.linear);
animation = IntTween(begin:0,end: 90).animate(curve)..addStatusListener((status){
if(status==AnimationStatus.completed){
// controller.reverse();
}
});
controller.forward();
}
Widget build(BuildContext context) {
return MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('page Four'),
),
body: AnimatedBuilder(
animation: controller,
builder: (context,child){
return Column(
children:[
Padding(
padding: EdgeInsets.all(50),
child: LinearProgressIndicator(
value: animation.value/100,
),
),
Padding(
padding: EdgeInsets.only(bottom: 50),
child: SizedBox(
width: 120,
height: 120,
//CircularProgressIndicator不具备设置高度的选项,可以使用SizedBox来设置高度与宽度
child: CircularProgressIndicator(
value: animation.value/100,
strokeWidth: 8,
backgroundColor: Colors.greenAccent,
valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
)
)
),
Text(
animation.value.toString(),
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w400
),
)
]
);
}
)
),
);
}
}