Darshan
Reputation: 11669
Selecting a card is selecting other cards in horizontal list
I am using simple coverflow plugin for an app. Each container is scrollable horizontally and has a title with 3 choices as Card.
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:
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);
}
}
Upvotes: 0
Views: 1559
Answers (3)
Taym95
Reputation: 2510
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),
)
]),
),
);
}
}
Upvotes: 1
Tristan Pct
Reputation: 614
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;
})
}
// ...
Upvotes: 2
youssef ali
Reputation: 426
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.
Upvotes: 0
Related Questions
- I can't display 4 Card in middle of page with Flutter
- ListView showing only 1 card widget but causes blank space below
- Flutter layout issue with Card
- Flutter: Select Card inside GridView
- Multiple cards inside a listview in flutter
- Select Card() which contains ListTile() in Flutter
- Flutter : Make Selected Card
- How to make 'stacked card list view' in flutter?
- Select Card In Flutter Listview
- Listview inside card widget is not display on the screen using column layout