initState() {
...
controller = AnimationController(
duration: const Duration(milliseconds: 300), vsync: this);
animation =
Tween(begin: 1.0, end: 20.0 ).animate(controller);
animation.addListener(() {
setState(() {});
});
controller.forward();
...
}
build(context) {
...
child: ScaleTransition(
child: Text('Hello'),
scale: animation,
),
...
}
它可以正常工作并缩放任何小部件。我尝试过文字和图像。
以颤动为例:
Widget _buildImageColumn() => Container(
decoration: BoxDecoration(
color: Colors.black26,
),
child: Column(
children: [
_buildImageRow(1),
_buildImageRow(3),
],
),
);
Widget _buildDecoratedImage(int imageIndex) => Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(width: 10, color: Colors.black38),
borderRadius: const BorderRadius.all(const Radius.circular(8)),
),
margin: const EdgeInsets.all(4),
child: Image.asset('images/pic$imageIndex.jpg'),
),
);
Widget _buildImageRow(int imageIndex) => Row(
children: [
_buildDecoratedImage(imageIndex),
_buildDecoratedImage(imageIndex + 1),
],
);
在此示例中,创建了四个图像。我可以在图像中添加InkWell
并获取图像索引。但是,如何使一个图像从其位置缩放到屏幕尺寸?