一个使用Flow和自定义FlowDelegate绘制，带动画功能
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
List<int> data = List<int>.generate(18, (index) => index);
late AnimationController controller;
@override
void initState() {
controller =
AnimationController(vsync: this, duration: const Duration(seconds: 2));
super.initState();
controller.addListener(() {
setState(() {});
});
controller.repeat(reverse: true);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Align(
alignment: Alignment.topLeft,
child: Container(
color: Colors.lightBlueAccent.withOpacity(0.2),
width: 400,
height: 400,
child: Flow(
delegate: MyFlowDele(controller),
children: data
.map(
(i) => Container(
constraints: BoxConstraints.tight(const Size(10, 10)),
color: Colors.primaries[i % Colors.primaries.length]),
)
.toList()),
),
),
);
}
}
class MyFlowDele extends FlowDelegate {
final Animation repaint;
MyFlowDele(this.repaint) : super(repaint: repaint);
@override
BoxConstraints getConstraintsForChild(int i, BoxConstraints constraints) {
// 设置所有控件的大小
return BoxConstraints.tight(const Size(10, 10));
}
@override
void paintChildren(FlowPaintingContext context) {
final childCount = context.childCount;
late double dx;
late double dy;
// 绘制所有的控件
for (var i = 0; i < childCount; i++) {
dx = i * 20;
dy = i * 20.0 * repaint.value;
context.paintChild(i, transform: Matrix4.translationValues(dx, dy, 0));
}
return;
}
@override
bool shouldRepaint(covariant FlowDelegate oldDelegate) {
return false;
}
}
