how can I have an isolated behavior per element in a list?

Question

I want only the item I click on to change color, but all items inherit the new color,
how can I have an isolated behavior per element in a list?

import 'package:flutter/material.dart';


class myClass extends StatefulWidget {
  @override
  State<myClass> createState() => _myClassState();
}

class _myClassState extends State<myClass> {

  Color color =Colors.green  ;
  List ListOfProfils = ["a","b","c"] ;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ListView.builder(
        itemBuilder: (context, index) => Container(
          key: Key(ListOfProfils[index]),
          height: 100,
          width: 100,
          color : color,
          margin: EdgeInsets.all(10),
          child: TextButton(
              onPressed: () => setState(() {
                print(color);
                color =Colors.red  ;
                print(color);
              }), child: Text("CLICK")),
        ),
        itemCount: 3,
      ),
    );


     ;
  }
}

Answer 1

change your code to this.

class _myClassState extends State<myClass> {
  Color color = Colors.green;
  List ListOfProfils = ["a", "b", "c"];
  int selectedIndex = -1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ListView.builder(
        itemBuilder: (context, index) => Container(
          key: Key(ListOfProfils[index]),
          height: 100,
          width: 100,
          color: selectedIndex == index ? Colors.red : color,
          margin: EdgeInsets.all(10),
          child: TextButton(
              onPressed: () => setState(() {
                    selectedIndex = index;
                  }),
              child: Text("CLICK")),
        ),
        itemCount: 3,
      ),
    );
  }
}