flipping_card 0.0.3

  • Readme
  • Changelog
  • Example
  • Installing
  • 65

flipping_card #

A Flutter package that provides a two-sided animated FlippingCard widget.

The FlippingCard widget provides a way to show content on a card with two sides, CardSide.FrontSide and CardSide.BackSide. When changing from one side to another, the card shows a 'flip' animation.

    frontChild: Image.asset("front.jpg"),
    backChild: Image.asset("back.jpg"),
    side: CardSide.FrontSide,
    onTap => (side) { print("Card tapped!); })

[0.0.1] - 03/05/2020. #

  • Initial release of the FlippingCard package

[0.0.2] - 03/06/2020. #

  • Add a simple example showing two FlippingCard widget
  • Fix animation, size and callback issue

[0.0.3] - 03/06/2020. #

  • Fix surprise code jumping in just before publishing :)
  • Fix leak of AnimationController


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

void main() => runApp(Main());

class Main extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flipping Card example',
      home: Cards('Flipping Card example'),

class Cards extends StatefulWidget {

  final String title;

  _CardsState createState() => _CardsState();

class _CardsState extends State<Cards> {
  CardSide _card1Side = CardSide.FrontSide;
  CardSide _card2Side = CardSide.BackSide;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      body: Center(
          child: Wrap(
              runAlignment: WrapAlignment.center,
              crossAxisAlignment: WrapCrossAlignment.center,
              spacing: 20,
              runSpacing: 20,
              children: <Widget>[
            /// First card, with two sides and size set by containers,
            /// flips when tapped.
              frontChild: Container(
                  width: 200,
                  height: 150,
                  color: Colors.white,
                  child: Center(child: Text("Front"))),
              backChild: Container(
                  width: 200,
                  height: 150,
                  color: Colors.blueGrey,
                  child: Center(child: Text("Back"))),
              side: _card1Side,
              onTap: (side) {
                setState(() {
                  _card1Side = (side == CardSide.FrontSide)
                      ? CardSide.BackSide
                      : CardSide.FrontSide;

            /// Second card, shows 2 pictures and back side by default.
            /// Flips when tapped.
              side: _card2Side,
              onTap: (side) {
                setState(() {
                  _card2Side = (side == CardSide.FrontSide)
                      ? CardSide.BackSide
                      : CardSide.FrontSide;

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  flipping_card: ^0.0.3

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:flipping_card/flipping_card.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Apr 7, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health suggestions

Format lib/flipping_card.dart.

Run flutter format to format lib/flipping_card.dart.

Maintenance suggestions

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies