AnimatedContainer 动画示例,只要是AnimatedContainer中的属性,包括width,height, decoration的各个属性,都可以动起来。
import 'dart:math';
import 'package:flutter/material.dart';
void main(List<String> args) {
runApp(const AnimatedContainerApp());
}
class AnimatedContainerApp extends StatefulWidget {
const AnimatedContainerApp({super.key});
@override
State<AnimatedContainerApp> createState() => _AnimatedContainerAppState();
}
class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
double width = 50;
double height = 50;
Color color = Colors.green;
BorderRadiusGeometry borderRadius = BorderRadius.circular(8);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: AnimatedContainer(
width: width,
height: height,
decoration: BoxDecoration(
color: color,
borderRadius: borderRadius,
),
duration: const Duration(seconds: 1),
curve: Curves.fastOutSlowIn,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
final random = Random();
width = random.nextInt(300).toDouble();
height = random.nextInt(300).toDouble();
color = Color.fromRGBO(random.nextInt(255), random.nextInt(255),
random.nextInt(255), 1);
borderRadius =
BorderRadius.circular(random.nextInt(100).toDouble());
setState(() {});
},
child: const Icon(Icons.refresh),
),
),
);
}
}