i want to create some thing like this flip container flutter - flutter

Question

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

Answer 1

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 StatefulWidget {
const FlipPage({super.key});
#override
State<FlipPage> createState() => _FlipPageState();
}
class _FlipPageState extends State<FlipPage> {
#override
Widget build(BuildContext context) {
var spinController = StreamController<int>.broadcast();
bool containerClicked = false;
int nextSpinValue = 0;
int? widgetIndex = 0;
void spin() => spinController.add(++nextSpinValue);
return Scaffold(
body: Center(
child: FlipWidget(
initialValue: nextSpinValue,
itemStream: spinController.stream,
flipType: FlipType.spinFlip,
itemBuilder: (_, index) {
return GestureDetector(
onTap: (() async {
if (!containerClicked) {
containerClicked = true;
widgetIndex = index as int?;
if (widgetIndex! < 2) {
spin();
} else {
nextSpinValue = 0;
spinController.add(nextSpinValue);
}
await Future.delayed(const Duration(milliseconds: 500));
containerClicked = false;
}
}),
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 : -

Answer 2

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,
),
),
],
),
);
}
}