Change the color of the container when clicked on it in my flutter app

Question

I fetched some interest(data) through an API and show them using future builders as containers. I want to change the background color of the container when I clicked on it. Here is what I did and it's changing the background color of all the containers when I clicked on one.

I added an if condition to the color of the container to check whether it is clicked or not

color: isClicked? Colors.white : Color(0xFFFFEBE7),

and set the isClicked state to true when clicked.

bool isClicked = false;

FutureBuilder(
                      future: GetInterests.getInterests(),
                      builder: (context, snapshot) {
                        final datalist = snapshot.data;
                        if (snapshot.connectionState ==
                            ConnectionState.done) {
                          return Expanded(
                            child: SizedBox(
                              height: 35,
                              child: ListView.builder(
                                scrollDirection: Axis.horizontal,
                                itemBuilder: (context, index) {
                                  return Wrap(
                                    direction: Axis.vertical,
                                    children: <Widget>[
                                      GestureDetector(
                                        onTap: (){
                                          final inte_id =  "${datalist[index]['_id']}";
                                          log(inte_id);
                                          
                                          setState(() {
                                            isClicked = true;
                                          });
                                        },
                                        child: new Container(
                                          margin: EdgeInsets.only(right: 7),
                                          height: 30,
                                          width: MediaQuery.of(context)
                                                  .size
                                                  .width /
                                              5.2,
                                          decoration: BoxDecoration(
                                              color: isClicked? Colors.white : Color(0xFFFFEBE7),
                                              border: Border.all(
                                                  color: Color(0xFFE0E0E0)),
                                              borderRadius:
                                                  BorderRadius.only(
                                                      topLeft:
                                                          Radius.circular(
                                                              50.0),
                                                      topRight:
                                                          Radius.circular(
                                                              50.0),
                                                      bottomRight:
                                                          Radius.circular(
                                                              50.0),
                                                      bottomLeft:
                                                          Radius.circular(
                                                              0.0))),
                                          child: Center(
                                            child: Text(
                                              "${datalist[index]['iname']}",
                                              style: TextStyle(
                                                  fontFamily: 'Montserrat',
                                                  color: Color(0xFFFF5E3A),
                                                  fontSize: 13),
                                            ),
                                          ),
                                        ),
                                      ),
                                    ],
                                  );
                                },
                                itemCount: datalist.length,
                              ),
                            ),
                          );
                        }
                        return Padding(
                          padding: const EdgeInsets.only(left: 140.0),
                          child: Center(
                            child: CircularProgressIndicator(),
                          ),
                        );
                      },
                    )

I was able to print the interest id in the console which belongs to the container I clicked on. but don't know how to change its color only

Answer 1

Instead of this you can use a variable to store selectedIndex and check if the currentIndex is selected or not and compare if currentIndex is selected or not and style the selected widget.

   import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}


class MyWidget extends StatefulWidget {

  _MyWidgetState createState()=>_MyWidgetState();

}
class _MyWidgetState extends State<MyWidget>{
  List _selectedIndexs=[];
    @override
  Widget build(BuildContext context) {

    return ListView.builder(
      itemCount: 4,
      itemBuilder: (ctx,i){
        final _isSelected=_selectedIndexs.contains(i);
        return GestureDetector(
          onTap:(){
            setState((){
               if(_isSelected){
                 _selectedIndexs.remove(i);                

               }else{
                 _selectedIndexs.add(i);

               }
            });
          },
          child:Container(
          color:_isSelected?Colors.red:null,
          child:ListTile(title:Text("Khadga")),
        ),
        );
      }
    );

}


}

modify your listview builder as i have done in above case.