flutter_flip_card 0.0.3

A component that provides a flip card animation. It could be used for hiding and showing details of a product.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_flip_card/flutter_flip_card.dart';

void main() {
  runApp(const MaterialApp(
    home: MyApp(),
  ));
}

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

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

class _MyAppState extends State<MyApp> {
  final con = FlipCardController();
  final con1 = FlipCardController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("FlipCards"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListView(
          children: [
            GestureFlipCard(
              axis: FlipAxis.vertical,
              animationDuration: const Duration(milliseconds: 900),
              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,
                ),
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            GestureFlipCard(
              animationDuration: const Duration(milliseconds: 300),
              axis: FlipAxis.horizontal,
              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,
                ),
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            FlipCard(
              rotateSide: RotateSide.bottom,
              // onTapFlipping: false,
              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,
                ),
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(
              child: const Text('Flip Bottom'),
              onPressed: () {
                // Flip the card programmatically
                con1.flipcard();
              },
            ),
            const SizedBox(
              height: 20,
            ),
            const SizedBox(
              height: 20,
            ),
            FlipCard(
              rotateSide: RotateSide.right,
              onTapFlipping: true,
              axis: FlipAxis.vertical,
              controller: con,
              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,
                  )),
            ),
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(
              child: const Text('Flip Right'),
              onPressed: () {
                // Flip the card programmatically
                con.flipcard();
              },
            ),
          ],
        ),
      ),
    );
  }
}