CODEWITHSUNDEEP
flutterflutter-animation
Quentin S
Quentin S

Reputation: 13

Flutter - How to flip the previous card back using FlipCard

After days of search I'm getting help. I work on a flutter application.

Context:

A grid view feeded with Json

-childs : GridTile with Flipcard in (https://pub.dev/packages/flip_card)

-On tap on GridTile there is a callback to get the selected Item and an animation because of the flipcard onTap

What I would:

  1. When an item is aleready selected (flipcard flipped so we show the back of the card),
  2. And I selected another item of the grid te(so flipcard of this itme also flipped)
  3. I would like to flip back the old selected item Flipcard without rebuild the tree because I would lost the state of the new selected item.

I tried many thing. For example I tried to use GlobalKey on GridTiles to interract with after build but currentState is always null when I want to interact with.

I wonder what is the good practice in this case ?

I hope I was clear :) (I'm french)

Thank you the community!

.

Something to know...

It is possible to interract with the flipcard (child of gridtile) like this 

(GlobalKey)

GlobalKey<FlipCardState> cardKey = GlobalKey<FlipCardState>();

@override
Widget build(BuildContext context) {
  return FlipCard(
    key: cardKey,
    flipOnTouch: false,
    front: Container(
      child: RaisedButton(
        onPressed: () => cardKey.currentState.toggleCard(),
        child: Text('Toggle'),
      ),
    ),
    back: Container(
      child: Text('Back'),
    ),
  );
}

Upvotes: 1

Views: 4162

Answers (1)

Pablo Barrera
Pablo Barrera

Reputation: 10983

I'm not sure if I understood your question, but here is an example of how you could use a GridView with FlipCards:

var cardKeys = Map<int, GlobalKey<FlipCardState>>();
GlobalKey<FlipCardState> lastFlipped;

Widget _buildFlipCard(String text, Color color, int index) {
  return SizedBox(
    height: 120.0,
    child: Card(
      color: color,
      child: Center(
        child:
            Text(text, style: TextStyle(color: Colors.white, fontSize: 20.0)),
      ),
    ),
  );
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("FlipCards")),
    body: GridView.builder(
      itemCount: 20,
      itemBuilder: (context, index) {
        cardKeys.putIfAbsent(index, () => GlobalKey<FlipCardState>());
        GlobalKey<FlipCardState> thisCard = cardKeys[index];
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            FlipCardWithKeepAlive(
              child: FlipCard(
                flipOnTouch: false,
                key: thisCard,
                front: _buildFlipCard("$index", Colors.blue, index),
                back: _buildFlipCard("$index", Colors.green, index),
                onFlip: () {
                  if (lastFlipped != thisCard) {
                    lastFlipped?.currentState?.toggleCard();
                    lastFlipped = thisCard;
                  }
                },
              ),
            ),
            RaisedButton(
              child: Text("Flip Card"),
              onPressed: () => cardKeys[index].currentState.toggleCard(),
            )
          ],
        );
      },
      gridDelegate:
          SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
    ),
  );
}

class FlipCardWithKeepAlive extends StatefulWidget {
  final FlipCard child;

  FlipCardWithKeepAlive({Key key, this.child}) : super(key: key);

  @override
  State<StatefulWidget> createState() => FlipCardWithKeepAliveState();
}

class FlipCardWithKeepAliveState extends State<FlipCardWithKeepAlive>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return widget.child;
  }

  @override
  bool get wantKeepAlive => true;
}

You need to use a different key for each element of the list, I used a Map in this case.

I also wrapped the FlipCard with a custom FlipCardWithKeepAlive stateful widget that uses AutomaticKeepAliveClientMixin to keep alive the FlipCard while scrolling.

Edit: I updated the code so when you flip one card, the previous card flipped gets flipped back. Basically you need to save the last flipped card and when a new one is flipped, flip the last one and put the new one as last flipped.

The code will make both cards flip at the same time, if you want one card to wait the other use onFlipDone() instead of onFlip(), like this:

onFlipDone: (isFront) {
  bool isFlipped = !isFront;
  if (isFlipped && lastFlipped != thisCard) {
    lastFlipped?.currentState?.toggleCard();
    lastFlipped = thisCard;
  }
}

Upvotes: 4

Related Questions