Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to find out where the click was in a dynamic list?

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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,
              ),
            ],
          );
        }),

>Solution :

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]",
                        ),
                      )),
                ),
              ],
            );
          }),
    );
  }
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading