I have a list and I need to set the container's background when clicking on it. However, what I have now does not work. When clicked, the color of the entire list changes, not the selected one. It seems to me that I need to add an index somewhere. I can't put it in a separate widget, because I'm attached to the list. Tell me how to do it?

setState -

Color? _textColor;
  Color? _bgColor;
  void initState() {
    _bgColor = configColors.orange;
    _textColor = Colors.white;
    super.initState();

  }

List

ListView.builder(
        scrollDirection: Axis.horizontal,
        shrinkWrap: true,
        itemCount: HomeStore.storage.length,
        itemBuilder: (BuildContext ctx, index) {
          return Row (
            // mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget> [
              InkWell(
                onTap: () {
                  setState(() {
                    if (_bgColor ==
                        configColors
                            .orange) {
                      _bgColor =
                          Colors.white;
                      _textColor =
                          configColors
                              .textStorage;
                    } else {
                      _bgColor =
                          configColors.orange;
                      _textColor =
                          Colors.white;
                    }
                  }
                  );
                },
                child:  Container(
                    width: 71.4,
                    height: 30.3,
                    decoration: BoxDecoration(
                        color: _bgColor,
                        borderRadius: BorderRadius.circular(10)
                    ),
                    child: Align(
                      alignment: Alignment.center,
                      child: Text(HomeStore.storage[index], style: TextStyle(color: _textColor,),),
                    )
                ),
              ),
              SizedBox(
                width: 18,
              ),
            ],
          );
        }),

CodePudding user response：

For single item selection, you can use a int variable, this snippet will help you to understand the concept.

  int? selectedIndex;

onTap: () {
setState(() {
  selectedIndex = index;
});
},

And to select color

color:selectedIndex == index ? Colors.red : Colors.blue

Test snippet

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

  @override
  State<Sg> createState() => _SgState();
}

class _SgState extends State<Sg> {
  int? selectedIndex;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
          scrollDirection: Axis.horizontal,
          shrinkWrap: true,
          itemCount: 4,
          itemBuilder: (BuildContext ctx, index) {
            return Row(
              // mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                InkWell(
                  onTap: () {
                    setState(() {
                      selectedIndex = index;
                    });
                  },
                  child: Container(
                      width: 71.4,
                      height: 30.3,
                      decoration: BoxDecoration(
                          color:
                              selectedIndex == index ? Colors.red : Colors.blue,
                          borderRadius: BorderRadius.circular(10)),
                      child: Align(
                        alignment: Alignment.center,
                        child: Text(
                          "HomeStore.storage[index]",
                        ),
                      )),
                ),
              ],
            );
          }),
    );
  }
}

CodePudding user response：

sharing one of my code demo

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  MyWidgetState createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  late int tappedIndex;

  @override
  void initState() {
    super.initState();
    tappedIndex = 0;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
          ListView.builder(
              shrinkWrap: true,
              itemCount: 4,
              itemBuilder: (context, index) {
                return Container(
                    color: tappedIndex == index ? Colors.blue : Colors.grey,
                    child: ListTile(
                        title: Center(
                      child: Text('${index   1}'),
                    ),onTap:(){
                          setState((){
                            tappedIndex=index;
                          });
                        }));
              })
        ]));
  }
}

taped index will solve problem