flippy 0.1.0

A flutter widget which can be flipped by button press or drag interaction and is highly customizable.

example/lib/main.dart

import 'package:flippy/flippy.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flippy Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  late FlipperController controller;

  @override
  void initState() {
    controller= FlipperController(
      dragAxis: DragAxis.both,
    );
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flippy Example"),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            DragFlipper(
                front: const FrontWidget(),
                back: const BackWidget(),
              controller: controller,
              borderRadius: const BorderRadius.all(Radius.circular(10.0)),
              gradient: const LinearGradient(
                colors: [
                  Color(0xff9b96ee),
                  Color(0xff5f5eda),
                ]
              ),
              padding: const EdgeInsets.symmetric(
                vertical: 8,
              ),
              height: 210,
            ),
            const SizedBox(
              height: 40,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                FloatingActionButton(
                  onPressed: (){
                  controller.flipLeft();
                },
                child: const Icon(
                  Icons.arrow_back,
                  color: Colors.white,
                  size: 33,
                ),),
                FloatingActionButton(
                  onPressed: (){
                    controller.flipRight();
                  },
                  child: const Icon(
                    Icons.arrow_forward,
                    color: Colors.white,
                    size: 33,
                  ),),
                FloatingActionButton(
                  onPressed: (){
                    controller.flipDown();
                  },
                  child: const Icon(
                    Icons.arrow_downward_outlined,
                    color: Colors.white,
                    size: 33,
                  ),),
                FloatingActionButton(
                  onPressed: (){
                    controller.flipUp();
                  },
                  child: const Icon(
                    Icons.arrow_upward_outlined,
                    color: Colors.white,
                    size: 33,
                  ),),
              ],
            ),

          ],
        ),
      ),
    );
  }
}


class FrontWidget extends StatelessWidget {
  const FrontWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: const [
              Text(
                "PLATINUM",
                style: TextStyle(
                  fontSize: 15,
                  color: Colors.white
                ),
              ),
              Text(
                "MOCKUP BANK",
                style: TextStyle(
                    fontSize: 15,
                    color: Colors.white
                ),
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Container(
                width: 70,
                height: 43,
                decoration: BoxDecoration(
                  color: const Color(0xffe0b056),
                  borderRadius: BorderRadius.circular(8)
                ),
              ),
              const Text(
                "CREDIT CARD",
                style: TextStyle(
                    fontSize: 15,
                    color: Colors.white
                ),
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: const [
              Text(
                "0603",
                style: TextStyle(
                    fontSize: 27,
                    color: Colors.white,
                  fontWeight: FontWeight.bold
                ),
              ),
              Text(
                "9020",
                style: TextStyle(
                    fontSize: 27,
                    color: Colors.white,
                    fontWeight: FontWeight.bold
                ),
              ),Text(
                "0714",
                style: TextStyle(
                    fontSize: 27,
                    color: Colors.white,
                    fontWeight: FontWeight.bold
                ),
              ),Text(
                "1234",
                style: TextStyle(
                    fontSize: 27,
                    color: Colors.white,
                    fontWeight: FontWeight.bold
                ),
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text(
                    "JANE DOE",
                    style: TextStyle(
                        fontSize: 17,
                        color: Colors.white,
                        fontWeight: FontWeight.bold
                    ),
                  ),
                  const SizedBox(
                    height: 3,
                  ),
                  const Text(
                    "VALID THRU 05/28",
                    style: TextStyle(
                        fontSize: 10,
                        color: Colors.white,
                    ),
                  ),
                ],
              ),

              const RotatedBox(
                quarterTurns: 1,
                child: Icon(
                  Icons.wifi,
                  color: Colors.white,
                  size: 30,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class BackWidget extends StatelessWidget {
  const BackWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Container(
          width: double.infinity,
          height: 43,
          decoration: const BoxDecoration(
              color: Color(0xff1f1e1e),
          ),
        ),
        Container(
          width: 180,
          height: 37,
          alignment: Alignment.centerRight,
          decoration: const BoxDecoration(
            color: Colors.white70,
          ),
          child: const Text(
            "0210  ",
            style: TextStyle(
              fontSize: 18
            ),
          )
        ),
        const Padding(
          padding: EdgeInsets.symmetric(horizontal: 12),
          child: Text(
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ",
            style: TextStyle(
                fontSize: 13,
                color: Colors.white,
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 12),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: const [

              Text(
                "MOCKUP BANK",
                style: TextStyle(
                    fontSize: 15,
                    color: Colors.white,
                    fontWeight: FontWeight.bold

                ),
              ),
              Text(
                "CREDIT CARD",
                style: TextStyle(
                    fontSize: 15,
                    color: Colors.white,
                  fontWeight: FontWeight.bold
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}