How can I stop flip cards that have already been flipped from flipping back when user scrolls down and then scrolls back up again?

Issue

My issue is what the title says - I have a gridview of flip cards. When I flip a few over, scroll past them and then scroll back up the cards have flipped back. I don't really want that to happen because it's supposed to be that every time the user flips a card a point is added to a total, and then when they flip it back a point is taken away from the total. I've tried "AutomaticKeepAliveClientMixin", which works to preserve the state when I have another tab, but it doesn't seem to help keep the cards flipped when I scroll.

Apologies in advance if an obvious solution exists here and I've missed it. I did try to find a solution online. Here is the code from the dart file I'm working with:

import 'package:flutter/material.dart';
import 'package:flip_card/flip_card.dart';
import 'statenames.dart';
import 'globalVariables.dart';


StateNames stateObject = new StateNames();

class GridOne extends StatefulWidget {


  final Function updateCounter;
  final Function decreaseCount;
  GridOne(this.updateCounter, this.decreaseCount);

  @override
  _GridOneState createState() => _GridOneState();
}

class _GridOneState extends State<GridOne>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  int points = 0;
  @override
  Widget build(BuildContext context) {
    
    return new Scaffold(
     body: GridView.count(
         crossAxisCount: 4,

         children: List.generate(52, (index){
           
           return Card(

             elevation: 0.0,
             margin: EdgeInsets.only(left: 3.0, right: 3.0, top: 9.0, bottom: 0.0),
             color: Color(0x00000000),
             child: FlipCard(
               direction: FlipDirection.HORIZONTAL,
               speed: 1000,

               onFlipDone: (status) {


                 setState(() {
                   (status)

                   ? widget.decreaseCount()
                   : widget.updateCounter();
                 });


                 print(counter);




               },
               front: Container(
                 decoration: BoxDecoration(
                   color: Color(0xFF006666),
                   borderRadius: BorderRadius.all(Radius.circular(8.0)),
                 ),
                 child: Column(
                   mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                   children: <Widget>[
                     FittedBox(fit:BoxFit.fitWidth,
                     child: Text(stateObject.stateNames[index], style: TextStyle(fontFamily: 'Architects Daughter', color: Colors.white), )
                        
                 ),
                     Text('',
                         style: Theme.of(context).textTheme.body1),
                   ],
                 ),
               ),
               back: Container(
                 decoration: BoxDecoration(
                   color: Color(0xFF006666),
                   borderRadius: BorderRadius.all(Radius.circular(8.0)),

                 ),
                 child: Column(
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: <Widget>[

                     Image(image: AssetImage(stateObject.licensePlatePaths[index])),
                     
                   ],

                 ),
               ),
             ),
           );
         })
     ),
    );
  }
}
 

Thank you so much for reading.

Solution

I did hit trial to achieve what you wanted and i think it's only possible if you use column. I even tried using simple ListView but still the the card will return to front face

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Test(),
    );
  }
}

class Test extends StatefulWidget{
  @override
  _Test createState() => _Test();
}

class _Test extends State<Test>{
  List<Widget> list = [];
  _Test(){
    list = new List.filled(30, flipCards());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
          child: Column(
            children: list,
          ),
        )
    );
  }

  Widget flipCards(){
    return Container(
      height: 70,
        child: FlipCard(
          flipOnTouch: true,
          front: Card(
            child: Container(
              alignment: Alignment.center,
              child: Text('Toggle'),
            ),
          ),
          back: Card(
            child: Container(
              alignment: Alignment.center,
              child: Text('Back'),
            ),
          ),
        )
    );
  }
}

Answered By - Arpit Awasthi