Flutter - How to flip a coin with FlipCardController when a condition is true?

GunnarPolte
December 30, 2023
166 views
0 votes
2 Answers

I have made a simple example from the flip-card-animation where the coin should be toggled with, fpc.toggleCard(), when it has been toggled 3 times, but it does not work.

import 'package:flip_card/flip_card.dart';
import 'package:flip_card/flip_card_controller.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() => runApp(
      ChangeNotifierProvider(
        create: (context) => Counter(),
        child: const AppWidget(),
      ),
    );

class Counter with ChangeNotifier {
  int value = 0;
  var fpc = FlipCardController();

  void increment() {
    value += 1;
    print('Value is now: $value');

    if (value == 3) {
      print('Value is 3 - toogle card');
      fpc.toggleCard();
    }

    notifyListeners();
  }
}

class AppWidget extends StatefulWidget {
  const AppWidget({Key? key}) : super(key: key);

  @override
  State<AppWidget> createState() => _AppWidgetState();
}

class _AppWidgetState extends State<AppWidget> {
  late FlipCardController _controller;

  @override
  void initState() {
    super.initState();
    _controller = FlipCardController();
  }

  @override
  Widget build(BuildContext context) {
     var counter = context.read<Counter>();
     
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      home: Scaffold(
        backgroundColor: const Color.fromARGB(172, 81, 187, 177),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FlipCard(
                // controller: _controller,
                back: const Image(
                  image: AssetImage('assets/images/coin-back.png'),
                  width: 200,
                ),
                front: const Image(
                  image: AssetImage('assets/images/coin-front.png'),
                  width: 200,
                ),
                onFlip: () {
                  print('Flipped');
                  counter.increment();
                  _controller.toggleCard();
                },
              ),
              const SizedBox(
                height: 20,
              ),
              const Text('You have clicked...'),
              Consumer<Counter>(
                  builder: (context, counter, child) =>
                      Text('Clicked: ${counter.value}'),),
              IconButton(
                onPressed: () {
                  if (!_controller.state!.isFront) {
                    _controller.toggleCard();
                  }
                },
                icon: const Icon(Icons.threesixty_rounded),
                iconSize: 70,
                color: const Color.fromARGB(255, 255, 255, 255),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Github: github.com/Genjito/flutter-flip-coin-test and give some advice on it.

How to let it toggle? Later I want to add some more coins and a provider for state management.

Tags: flutter

Answers

Chosen as BEST ANSWER

@HandLeg To avoid the infinite loop I have put the toogleCard() method in " onFlipDone". It is theoretical working. The counter is increased, but the card is not flipped. Does the app not noticed that it should change the state?

import 'package:flip_card/flip_card.dart';
import 'package:flip_card/flip_card_controller.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() => runApp(
      ChangeNotifierProvider(
        create: (context) => Counter(),
        child: const AppWidget(),
      ),
    );

class Counter with ChangeNotifier {
  int value = 0;
  var fpc = FlipCardController(); // Create a FlipCardController instance

  // Add a getter to expose the FlipCardController instance
  FlipCardController get flipCardController => fpc;

  void increment() {
    value += 1;
    print('Value is now: $value');

    notifyListeners();
  }

  void checkToogledAmount() {
    if (value == 3) {
      print('Value is 3 - toogle card');
      fpc.toggleCard(); // Use the FlipCardController instance to toggle the card
    }
  }
}

class AppWidget extends StatefulWidget {
  const AppWidget({Key? key}) : super(key: key);

  @override
  State<AppWidget> createState() => _AppWidgetState();
}

class _AppWidgetState extends State<AppWidget> {
  @override
  Widget build(BuildContext context) {
    var counter = context.read<Counter>(); // Read the Counter instance

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      home: Scaffold(
        backgroundColor: const Color.fromARGB(172, 81, 187, 177),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FlipCard(
                // Use the FlipCardController instance from the Counter instance
                controller: counter.flipCardController,
                back: const Image(
                  image: AssetImage('assets/images/coin-back.png'),
                  width: 200,
                ),
                front: const Image(
                  image: AssetImage('assets/images/coin-front.png'),
                  width: 200,
                ),
                onFlip: () {
                  print('Flipped');
                  counter.increment(); // Increment the counter
                  counter.flipCardController.toggleCard(); // Toggle the card
                },
                onFlipDone: (status) {
                  print('status: ${status}');
                  counter.checkToogledAmount();
                },
              ),
              const SizedBox(
                height: 20,
              ),
              const Text('You have clicked...'),
              Consumer<Counter>(
                builder: (context, counter, child) =>
                    Text('Clicked: ${counter.value}'),
              ),
              IconButton(
                onPressed: () {
                  // Toggle the card if it's not front
                  if (!counter.flipCardController.state!.isFront) {
                    counter.flipCardController.toggleCard();
                  }
                },
                icon: const Icon(Icons.threesixty_rounded),
                iconSize: 70,
                color: const Color.fromARGB(255, 255, 255, 255),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

(Edit)

looks like you are creating new controller in _appWidgetState

try passing controller from Counter class

import 'package:flip_card/flip_card.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() => runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: const AppWidget(),
    ),
  );

class Counter with ChangeNotifier {
 int value = 0;
 var fpc = FlipCardController(); // Create a FlipCardController instance

 // Add a getter to expose the FlipCardController instance
 FlipCardController get flipCardController => fpc;

 void increment() {
  value += 1;
  print('Value is now: $value');

  if (value == 3) {
    print('Value is 3 - toogle card');
    fpc.toggleCard(); // Use the FlipCardController instance to toggle the card
  }

  notifyListeners();
 }
}

class AppWidget extends StatefulWidget {
 const AppWidget({Key? key}) : super(key: key);

 @override
 State<AppWidget> createState() => _AppWidgetState();
}

class _AppWidgetState extends State<AppWidget> {
 @override
 Widget build(BuildContext context) {
   var counter = context.read<Counter>(); // Read the Counter instance
   
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Material App',
    home: Scaffold(
      backgroundColor: const Color.fromARGB(172, 81, 187, 177),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FlipCard(
              // Use the FlipCardController instance from the Counter instance
              controller: counter.flipCardController,
              back: const Image(
               image: AssetImage('assets/images/coin-back.png'),
               width: 200,
              ),
              front: const Image(
               image: AssetImage('assets/images/coin-front.png'),
               width: 200,
              ),
              onFlip: () {
               print('Flipped');
               counter.increment(); // Increment the counter
               counter.flipCardController.toggleCard(); // Toggle the card
              },
            ),
            const SizedBox(
              height: 20,
            ),
            const Text('You have clicked...'),
            Consumer<Counter>(
               builder: (context, counter, child) =>
                  Text('Clicked: ${counter.value}'),),
            IconButton(
              onPressed: () {
               // Toggle the card if it's not front
               if (!counter.flipCardController.state!.isFront) {
                counter.flipCardController.toggleCard();
               }
              },
              icon: const Icon(Icons.threesixty_rounded),
              iconSize: 70,
              color: const Color.fromARGB(255, 255, 255, 255),
            ),
          ],
        ),
      ),
    ),
  );
 }
}

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – How to flip a coin with FlipCardController when a condition is true?

Answers