I am using simple coverflow plugin for an app. Each container is scrollable horizontally and has a title with 3 choices as Card.

enter image description here

Issue is when I select any of the card choice, it selects same option on other cards in the list as well, as shown below:

enter image description here

As you can see above, the leftmost and rightmost cards shows the selected card option in green color when I select card # 1 from first container.

What do I need to do so that I should be able to select an option from center card which doesn't highlight / select same option on other cards ?

Code below:

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
            body: new CoverFlow(
              dismissedCallback: disposeDismissed,
              currentItemChangedCallback: (int index) {
                print(index);
              },
              height: 600,
              itemCount: d.length,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  child: Card(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(30)),
                    child: Column(children: <Widget>[
                      Padding(
                        padding: EdgeInsets.symmetric(vertical: 25.0),
                        child: Text(
                          "Test",
                          style: TextStyle(
                              fontSize: 20.0, fontWeight: FontWeight.bold),
                        ),),
                      Container(
                          height: 50.0,
                          child: GestureDetector(
                            child: Card(
                                color: _c
                                    ? Colors.lightGreen
                                    : Colors.white,
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(20.0)),
                                margin: EdgeInsets.symmetric(
                                    horizontal: 10, vertical: 6),
                                child: Center(
                                    child: Text("1",
                                        style: TextStyle(
                                            fontSize: 18.0),
                                        textAlign: TextAlign.center))
                            ),
                            onTap: () {
                              setState(() {
                                _s = true;
                                _c = true;
                                _w = false;
                                _wr = false;
                              });
                            },)),
                      Container(
                          height: 50.0,
                          child: GestureDetector(
                            child: Card(
                                color:
                                    _w ? Colors.redAccent : Colors.white,
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(20.0)),
                                margin: EdgeInsets.symmetric(
                                    horizontal: 10, vertical: 6),
                                child: Center(
                                    child: Text(
                                  "2",
                                  style: TextStyle(
                                      fontSize: 18.0),
                                  textAlign: TextAlign.center,
                                ))),
                            onTap: () {
                              setState(() {
                                _s = false;
                                _c = false;
                                _w = true;
                                _wr = false;
                              });
                            },
                          )),
                      Container(
                          height: 50.0,
                          child: GestureDetector(
                            child: Card(
                                color: _wr
                                    ? Colors.redAccent
                                    : Colors.white,
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(20.0)),
                                margin: EdgeInsets.symmetric(
                                    horizontal: 10, vertical: 6),
                                child: Center(
                                  child: Text(
                                    "3",
                                    textAlign: TextAlign.center,
                                    style: TextStyle(
                                        fontSize: 18.0),
                                  ),)),
                            onTap: () {
                              setState(() {
                                _s = false;
                                _c = false;
                                _w = false;
                                _wr = true;
                              });
                            },
                          )),
                      Padding(
                        padding: EdgeInsets.only(top: 25.0),
                      )
                    ]
                    ),
                  ),
                );
              },
            ));}

  Widget widgetBuilder(int i) {
    if (d.length == 0) {
      return Container();
    } else {
      print([i % d.length]);
      return d[i % d.length];
    }}
  disposeDismissed(int dismissedItem, DismissDirection direction) {
    d.removeAt(dismissedItem % d.length);
  }
}


Solution 1: youssef ali

no its not you are the one who changes the color using _c to color green so it changes in all of them but actually you are choosing only one.as in flutter you don't have to type new to create new gesture detector so if you want to change the color only for the tapped cell do it by the index you get from currentItemChangedCallback: (int index), or by changing the tapped widget color only.


Solution 2: Tristan Pct

I think that you use the same state for your 3 cards, so the _c var is the same for all your 3 cards.

You can create a new StatefulWidget that build a card (and have it's own _c var inside of it) or you can use an array (List or Map) indexed by the index from CoverFlow in your actual widget.

Option 1:

class CustomCard extends StatefulWidget {
  @override
  _CustomCardState createState() => _CustomCardState();
}

class _CustomCardState extends State<CustomCard> {
  // Initialise here or in `initState()` method.
  bool _s = false;
  bool _c = false;
  bool _w = false;
  bool _wr = false;

  @override
  Widget build(BuildContext context) {
    return Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
        child: Column(children: <Widget>[
          Padding(
            padding: EdgeInsets.symmetric(vertical: 25.0),
            child: Text(
              "Test",
              style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
            ),
          ),
          Container(
              height: 50.0,
              child: GestureDetector(
                child: Card(
                    color: _c ? Colors.lightGreen : Colors.white,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.0)),
                    margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
                    child: Center(
                        child: Text("1",
                            style: TextStyle(fontSize: 18.0),
                            textAlign: TextAlign.center))),
                onTap: () {
                  setState(() {
                    _s = true;
                    _c = true;
                    _w = false;
                    _wr = false;
                  });
                },
              )),
          Container(
              height: 50.0,
              child: GestureDetector(
                child: Card(
                    color: _w ? Colors.redAccent : Colors.white,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.0)),
                    margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
                    child: Center(
                        child: Text(
                      "2",
                      style: TextStyle(fontSize: 18.0),
                      textAlign: TextAlign.center,
                    ))),
                onTap: () {
                  setState(() {
                    _s = false;
                    _c = false;
                    _w = true;
                    _wr = false;
                  });
                },
              )),
          Container(
              height: 50.0,
              child: GestureDetector(
                child: Card(
                    color: _wr ? Colors.redAccent : Colors.white,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.0)),
                    margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
                    child: Center(
                      child: Text(
                        "3",
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 18.0),
                      ),
                    )),
                onTap: () {
                  setState(() {
                    _s = false;
                    _c = false;
                    _w = false;
                    _wr = true;
                  });
                },
              )),
          Padding(
            padding: EdgeInsets.only(top: 25.0),
          )
        ]));
  }
}
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new CoverFlow(
        dismissedCallback: disposeDismissed,
        currentItemChangedCallback: (int index) {
          print(index);
        },
        height: 600,
        itemCount: d.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            child: CustomCard()
          );
        },
      ));}

  Widget widgetBuilder(int i) {
    if (d.length == 0) {
      return Container();
    } else {
      print([i % d.length]);
      return d[i % d.length];
    }}
  disposeDismissed(int dismissedItem, DismissDirection direction) {
    d.removeAt(dismissedItem % d.length);
  }

You can add options in your CustomCard widget.

Option 2:

Create a class for your data :

class MyData {
  bool s = false;
  bool c = false;
  bool w = false;
  bool wr = false;
}

Create a list to store your data (in your State):

  List<MyData> _cardsData;

  @override
  initState() {
    super.initState();
    _cardsData = List.generate(d.length, (index) => MyData());
  }

Use the list:

// ...
onTap: () {
  setState(() {
    _cardsData[index].c = true;
  })
}
// ...


Solution 3: Taym95

You just need to specify the index and the currentIndex, this code works:

import 'package:flutter/material.dart';
import 'package:simple_coverflow/simple_coverflow.dart';

void main() => runApp(MaterialApp(
      home: MyApp(),
    ));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int curerntIndex = 0;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new CoverFlow(
      dismissedCallback: disposeDismissed,
      currentItemChangedCallback: (int index) {
        print(index);
        setState(() {
          curerntIndex = index;
        });
      },
      height: 600,
      itemCount: d.length,
      itemBuilder: (BuildContext context, int index) {
        return Item(index, curerntIndex);
      },
    ));
  }
}

class Item extends StatefulWidget {
  final int index;
  final int curerntIndex;
  Item(this.index, this.curerntIndex);

  @override
  _ItemState createState() => _ItemState(index, curerntIndex);
}

class _ItemState extends State<Item> {
  final int index;
  final int curerntIndex;

  bool _s = true;
  bool _c = true;
  bool _w = false;
  bool _wr = false;

  _ItemState(this.index, this.curerntIndex);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
        child: Column(children: <Widget>[
          Padding(
            padding: EdgeInsets.symmetric(vertical: 25.0),
            child: Text(
              "Test",
              style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
            ),
          ),
          Container(
              height: 50.0,
              child: GestureDetector(
                child: Card(
                    color: _c ? Colors.lightGreen : Colors.white,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.0)),
                    margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
                    child: Center(
                        child: Text("1",
                            style: TextStyle(fontSize: 18.0),
                            textAlign: TextAlign.center))),
                onTap: () {
                  if (index == curerntIndex) {
                    setState(() {
                      _s = true;
                      _c = true;
                      _w = false;
                      _wr = false;
                    });
                  }
                },
              )),
          Container(
              height: 50.0,
              child: GestureDetector(
                child: Card(
                    color: _w ? Colors.redAccent : Colors.white,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.0)),
                    margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
                    child: Center(
                        child: Text(
                      "2",
                      style: TextStyle(fontSize: 18.0),
                      textAlign: TextAlign.center,
                    ))),
                onTap: () {
                  if (index == curerntIndex) {
                    setState(() {
                      _s = false;
                      _c = false;
                      _w = true;
                      _wr = false;
                    });
                  }
                },
              )),
          Container(
              height: 50.0,
              child: GestureDetector(
                child: Card(
                    color: _wr ? Colors.redAccent : Colors.white,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.0)),
                    margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
                    child: Center(
                      child: Text(
                        "3",
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 18.0),
                      ),
                    )),
                onTap: () {
                  if (index == curerntIndex) {
                    setState(() {
                      _s = false;
                      _c = false;
                      _w = false;
                      _wr = true;
                    });
                  }
                },
              )),
          Padding(
            padding: EdgeInsets.only(top: 25.0),
          )
        ]),
      ),
    );
  }
}