imtheguna/flutter_flip_card

flutter_flip_card

A widget that does transition between two children in a flipping manner.

FlipCard	GestureFlipCard
FlipCard	GestureFlipCard

How to Use

To use flutter_flip_card, first start by importing the package.

import 'package:flutter_flip_card/flutter_flip_card.dart';

Currently Available Methods

• FlipCard A component that provides a flip card animation
  

• GestureFlipCard A component that provides a gsture(Swipe) flip card animation
  

FlipCard

    FlipCard(
        rotateSide: RotateSide.bottom,
        onTapFlipping: false, //When enabled, the card will flip automatically when touched.
        axis: FlipAxis.horizontal,
        controller: con1,
        frontWidget: Center(
        child: Container(
            height: 200,
            width: 140,
            child: Image.asset(
                    'image/01.png',
                    fit: BoxFit.fitHeight)
                )
            ),
        backWidget: Container(
            height: 200,
            width: 140,
            child: Image.asset(
                    `'image/02.jpg',
                    fit: BoxFit.fitHeight)
            )
        )
        
    final controller = FlipCardController();
    // Flip the card programmatically
    controller.flipcard();

GestureFlipCard

    GestureFlipCard(
            animationDuration: const Duration(milliseconds: 300),
            axis: FlipAxis.horizontal,
            controller:cong // used to ccontrol the Gesture flip programmatically
            enableController : false // if [True] if you need flip the card using programmatically
            frontWidget: Center(
                child: Container(
                  width: 300,
                  height: 200,
                  child: Image.asset(
                    'image/011.jpg',
                    fit: BoxFit.contain,
                  ),
                ),
              ),
            backWidget: Container(
                width: 300,
                height: 200,
                child: Image.asset(
                  'image/11.jpg',
                  fit: BoxFit.contain,
                ),
            ),
        ),

Project Created & Maintained By

Gunanithi

Passionate #Flutter, #Android Developer. #UI Designer.

linkedin medium

Notes

Please open an issue if you find any bugs.

Donate

You like the package ? Buy me a coffee :)

Buy Me A Coffee