it has three container when i tap on it it change to next flip I tried with flip_card package and it has only front and back but I need extra one

CodePudding user response：

As my opinion you should use animationOpacity like this : i made one demo for you please check it.

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

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

class _MyHomePageState extends State<MyHomePage> {
  bool _showFirstSide = false;
  bool _showSecondSide = false;
  bool _showThirdSide = false;

  @override
  void initState() {
    super.initState();
    _showFirstSide = true;
    _showSecondSide = false;
    _showThirdSide = false;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(""),
        centerTitle: true,
      ),
      body: Center(
        child: SizedBox(
          height: 100,
          width: 100,
          // constraints: BoxConstraints.tight(size),
          child: _buildFlipAnimation(),
        ),
      ),
    );
  }

  void _switchCard() {
    setState(() {
      if (_showFirstSide) {
        _showFirstSide = !_showFirstSide;
        _showSecondSide = true;
        _showFirstSide = false;
      } else if (_showSecondSide) {
        _showSecondSide = !_showSecondSide;
        _showThirdSide = true;
        _showFirstSide = false;
      } else if (_showThirdSide) {
        _showThirdSide = !_showThirdSide;
        _showFirstSide = true;
        _showSecondSide = false;
      }
    });
  }

  Widget _buildFlipAnimation() {
    return GestureDetector(
      onTap: _switchCard,
      child: Stack(
        children: [
          AnimatedOpacity(
            curve: Curves.easeInBack,
            duration: const Duration(milliseconds: 700),
            opacity: _showFirstSide ? 1 : 0,
            child: Container(
              color: Colors.black,
              height: MediaQuery.of(context).size.height / 2,
              width: MediaQuery.of(context).size.width / 2,
            ),
          ),
          AnimatedOpacity(
            curve: Curves.easeIn.flipped,
            duration: const Duration(milliseconds: 700),
            opacity: _showSecondSide ? 1 : 0,
            child: Container(
              color: Colors.blue,
              height: MediaQuery.of(context).size.height / 2,
              width: MediaQuery.of(context).size.width / 2,
            ),
          ),
          AnimatedOpacity(
            curve: Curves.easeOut,
            duration: const Duration(milliseconds: 400),
            opacity: _showThirdSide ? 1 : 0,
            child: Container(
              color: Colors.pink,
              height: MediaQuery.of(context).size.height / 2,
              width: MediaQuery.of(context).size.width / 2,
            ),
          ),
        ],
      ),

    
    );
  }
}

CodePudding user response：

flip_board (https://pub.dev/packages/flip_board#middle-flip) package does exactly what you want.

Sample Code : -

FlipWidget({
  flipType: FlipType.spinFlip, // Change flip effect
  itemStream: _stream, // it is basically the length of Stacked Widgets.
  itemBuilder: _itemBuilder, // Body of your Widget
  flipDirection: AxisDirection.right, // flip up, down, left, right.
});

This package has many more methods and Widget types, to learn more about it vist the official page : - https://pub.dev/packages/flip_board#middle-flip

Complete Code : -

import 'dart:async';
import 'package:flip_board/flip_widget.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: FlipPage()));

class FlipPage extends StatelessWidget {
  const FlipPage({super.key});

  @override
  Widget build(BuildContext context) {
    final spinController = StreamController<int>.broadcast();

    int nextSpinValue = 0;
    int? widgetIndex = 0;

    void spin() => spinController.add(  nextSpinValue % 10);
    return Scaffold(
      appBar: AppBar(title: const Text('Day of Month')),
      body: Center(
        child: FlipWidget(
          initialValue: 0,
          itemStream: spinController.stream,
          flipType: FlipType.spinFlip,
          itemBuilder: (_, index) {
            return GestureDetector(
                onTap: (() {
                  widgetIndex = index as int?;

                  if (widgetIndex! < 2) {
                    spin();
                  }
                }),
                child: Container(
                    color: index == 0
                        ? Colors.red[100]
                        : index == 1
                            ? Colors.amber[100]
                            : Colors.blue[100],
                    height: 200,
                    width: 200,
                    alignment: Alignment.center,
                    child: Text(
                      'Widget $index',
                      style: const TextStyle(fontSize: 18),
                    )));
          },
          flipDirection: AxisDirection.up,
        ),
      ),
    );
  }
}

Output : -