Question 77282 in Flutter Question posted in
The official Flutter documentation can be found here.

i want to create some thing like this flip container flutter

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

Tags:

2

Answers


  1. 0

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

    enter image description here

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

    
    );
  }
}
    Login or Signup to reply.
  2. 0

    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 : –

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search