I have a ReorderdableList with 5 Widgets and each of them is Draggable.
The Draggable Widget works great, but it seems that this makes the onReorder function not work.
This is my ReorderableListView:
return Scaffold(
body: ReorderableListView(
onReorder: ((oldIndex, newIndex) {
print('onReorder');
}),
onReorderStart: (index) => print('reorder start'),
scrollDirection: Axis.horizontal,
children: [
for (final card in handCards)
HandCard(key: ValueKey(card), card, player, handOwner),
],
),
);
Each Handcard returns a Draggable Widget. Is there a way to make sure both still work?
Handcard Widget:
class HandCard extends ConsumerStatefulWidget {
HandCard(this.card, this.player, this.handOwner, {Key? key})
: super(key: key);
String handOwner;
dynamic card;
Player player;
@override
_HandCardState createState() => _HandCardState();
}
class _HandCardState extends ConsumerState<HandCard> {
@override
void initState() {
isVisibled = true;
// TODO: implement initState
super.initState();
print(isVisibled);
}
void setVisible() {
setState(() {
isVisibled = true;
});
}
late bool isVisibled;
@override
Widget build(BuildContext context) {
var handCardPickProvider =
ref.watch(handCardHighlightProvider(widget.card).notifier);
var handCardPick = ref.watch(handCardHighlightProvider(widget.card));
var gameStateProvider = ref.watch(GameStateProvider);
var handSize = ref.watch(handSizeProvider(widget.handOwner).state);
return Draggable<HandCard>(
onDragStarted: () {
// change state of current cards in hand
handSize.state = handSize.state - 1;
},
onDragEnd: (details) {
handSize.state = handSize.state + 1;
},
onDragCompleted: () {
setState(() {
isVisibled = true;
});
},
data: widget,
childWhenDragging: SizedBox.shrink(),
feedback: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(widget.card.imageLink),
fit: BoxFit.fill,
),
),
width: 100,
height: 150,
child: Stack(children: [
(widget.card is CharacterCard)
? Positioned(
right: 0,
left: 60,
child: Container(
color: Colors.white,
width: 40,
height: 13,
child: Center(
child: Text(
widget.card.power.toString(),
style: TextStyle(
color: Colors.black,
fontSize: 10,
fontWeight: FontWeight.bold),
),
),
),
)
: const SizedBox.shrink(),
Positioned(
left: 2,
child: Container(
width: 20,
height: 20,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
child: Center(
child: Text(
widget.card.cost.toString(),
style: TextStyle(color: Colors.white, fontSize: 12),
)),
))
]),
),
child: (isVisibled)
? InkWell(
onTap: () {
print('click');
// If it is the counter move and the card has a counter effect we can use it
if (gameStateProvider.gameSession!.moves.length != 0) {
Move currentMove = gameStateProvider.gameSession!
.moves[gameStateProvider.gameSession!.atMove - 1];
print(currentMove.moveType);
// Handle on counter effect
if (currentMove.moveType == 'on counter effect' &&
currentMove.toPlayer.id == widget.player.id) {
handCardPickProvider.highlightCard(widget.card);
}
}
},
child: Container(
margin: EdgeInsets.all(1),
decoration: BoxDecoration(
boxShadow: [
(handCardPick)
? BoxShadow(
color: Colors.white,
spreadRadius: 1,
blurRadius: 10)
: BoxShadow(
color: Colors.white,
spreadRadius: 0,
blurRadius: 0),
],
image: DecorationImage(
image: AssetImage(widget.card.imageLink),
fit: BoxFit.fill,
),
),
width: 100,
height: 150,
child: Stack(children: [
(widget.card is CharacterCard)
? Positioned(
right: 0,
left: 60,
child: Container(
color: Colors.white,
width: 40,
height: 13,
child: Center(
child: Text(
widget.card.power.toString(),
style: TextStyle(
color: Colors.black,
fontSize: 10,
fontWeight: FontWeight.bold),
),
),
),
)
: const SizedBox.shrink(),
Positioned(
left: 2,
child: Container(
width: 20,
height: 20,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
child: Center(
child: Text(
widget.card.cost.toString(),
style: TextStyle(color: Colors.white, fontSize: 12),
)),
))
]),
),
)
: SizedBox.shrink(),
);
}
}