I am playing around with the flip_card package (This package creates a card and when you tap on, it flips the card and shows front or behind the card). What I am trying to do is, to show different image each time I tap on the card, and the card flips to front side.
To do so I modified the flip_card example to a stateful widget and used GestureDetector to detect the taps:
_renderContent(context) {
return Card(
elevation: 0.0,
margin: EdgeInsets.only(left: 32.0, right: 32.0, top: 10.0, bottom: 0.0),
color: Color(0x00000000),
child: FlipCard(
direction: FlipDirection.HORIZONTAL,
front: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: _tapHandler,
child: Container(
decoration: BoxDecoration(
color: Color(0xFF006666),
borderRadius: BorderRadius.all(Radius.circular(8.0)),
boxShadow: [BoxShadow(blurRadius: 15.0, spreadRadius: 0.8)],
image: DecorationImage(
image: AssetImage(_cards[_cardInd]),
fit: BoxFit.cover,
)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Back', style: Theme.of(context).textTheme.headline),
Text('Click here to flip front',
style: Theme.of(context).textTheme.body1),
],
),
),
),
back: Container(
decoration: BoxDecoration(
color: Color(0xFF006666),
borderRadius: BorderRadius.all(Radius.circular(8.0)),
boxShadow: [BoxShadow(blurRadius: 15.0, spreadRadius: 0.8)],
image: DecorationImage(
image: AssetImage(_cards[0]),
fit: BoxFit.cover,
)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Back', style: Theme.of(context).textTheme.headline),
Text('Click here to flip front',
style: Theme.of(context).textTheme.body1),
],
),
),
),
);
}
and the tapHandler function is:
void _tapHandler() {
setState(() {
_cardInd = x.nextInt(_cards.length);
});
print("_cardInd $_cardInd");
}
_cardInd
is an index to the List of image assets, _cards
. However, the GestureDetector doesn't work. Neither image changes nor the print("_cardInd $_cardInd");
gets printed on the screen.
Could someone help me so that when I tap on the card the image changes?
User contributions licensed under CC BY-SA 3.0