I need to animate the container from top to bottom. I try this animation with Listview. builder. ListView.builder renders only the top 4 indexes. I need to animate the full list. I have a bool type list. if the list returns true container will animate, if the list returns false container color is transparent.
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
class Class extends StatefulWidget {
@override
_ClassState createState() => _ClassState();
}
class _ClassState extends State<Class> with SingleTickerProviderStateMixin {
late Animation<double> animation;
late AnimationController animationController;
late double height = 0;
List lst = [
[true, true, true, true],
[false, false, false, false],
[true, false, false, false],
[false, false, false, false],
[true, false, false, false],
[false, false, false, false],
[true, false, false, false],
[false, false, false, false],
[true, false, false, false],
[false, false, false, false],
[true, false, false, false],
[false, false, false, false],
[true, false, false, false],
[false, false, false, false],
[true, false, false, false],
];
void initState() {
super.initState();
animationController =
AnimationController(vsync: this, duration: Duration(seconds: 3));
animation = Tween<double>(begin: 0, end: 400).animate(animationController)
..addListener(() {
setState(() {});
})
..addStatusListener((status) {});
animationController.forward();
}
Widget container(data) {
return Container(
child: Row(
children: [
GestureDetector(
onTap: () {
setState(() {
animationController.forward();
});
},
child: Transform.translate(
offset: Offset(0, animation.value),
child: Container(
color: data ? Colors.black : Colors.transparent,
height: MediaQuery.of(context).size.height / 4,
width: MediaQuery.of(context).size.width / 4,
),
),
),
],
),
);
}
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
Expanded(
child: ListView.builder(
physics: NeverScrollableScrollPhysics(),
reverse: true,
itemCount: lst.length,
shrinkWrap: true,
//itemExtent: 40,
itemBuilder: (BuildContext context, int position) {
return container(lst[position][0]);
}),
),
],
),
);
}
void dispose() {
super.dispose();
animationController.dispose();
}
}