AnimationController? controller;
       Animation<double>? animation;
      @override
      void initState() {
super.initState();
controller =
    AnimationController(duration: const Duration(seconds: 3), vsync: this)
      ..addListener(() => setState(() {}));
animation = Tween(begin: -500.0, end: 500.0).animate(controller!);
controller!.forward();
     }


     List tile = [
     [true, true, true, true],
     [true, true, true, true],
      [true, true, true, true],
       [true, true, true, true],
     ];
     String? gettw;

   Container(
      color: Colors.white,
      child: ListView.builder(
        reverse: false,
        itemCount: tile[0].length,
        itemBuilder: (BuildContext context, int index) {
          String? gettw;

          if (tile[index][0]) {
            if (gettw != 'transparent') {
              gettw = 'black';
            }
          } else if (tile[index][0] == false) {
            gettw = 'transparent';
          }
          print('gettw $gettw');
          return GestureDetector(
            behavior: HitTestBehavior.translucent,
            onTap: () {
              setState(() {
                if (tile[index][0] == true) {
                  print('working');
                  gettw = 'transparent';
                  print('gettw $gettw');
                } else if (tile[index][0] == false) {
                  gettw = 'red';
                }
              });
            },
            child: Transform.translate(
              offset: Offset(0.0, animation!.value),
              child: Container(
                height: MediaQuery.of(context).size.height / 4,
                color: (gettw == 'black')
                    ? Colors.black
                    : (gettw == 'transparent')
                        ? Colors.transparent
                        : (gettw == 'red')
                            ? Colors.red
                            : Colors.green,
                child: Text('${tile[index][0]}',
                    style: const TextStyle(color: Colors.purple)),
              ),
            ),
          );
        },
      )),

I animate 4 container top to bottom. If the user clicks container. The container color needs to change black to white. but color was changed in all 4 containers. gettw variable contains which color need to display in the container. Please, someone, help me to resolve this problem.

CodePudding user response：

Try this

import 'package:flutter/material.dart';

class ColorChanger extends StatefulWidget {
const ColorChanger({ Key? key }) : super(key: key);

@override
_ColorChangerState createState() => _ColorChangerState();
}

class _ColorChangerState extends State<ColorChanger> {
   List<bool> widgetActive = List.generate(4, (index){
   return false;
});
@override
Widget build(BuildContext context) {
return Scaffold(
  body: ListView.builder(
    itemCount: 4,
    itemBuilder: (context, index){
    
    return InkWell(
      onTap: (){
        setState(() {
          widgetActive[index] = !widgetActive[index];
        });
      },
      child: Container(
        margin: EdgeInsets.all(30),
        width: 40,
        height:50,
        color: widgetActive[index] ? Colors.black:Colors.red,
      ),
    );
  }),
  );
 }
}