1

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();
 }
}

0 Answers0