flippable_box 1.0.6
flippable_box: ^1.0.6

Flutter Android iOS web

A double-sided Container, that flips over, revealing content on both sides.

flippable_box #

FlippableBox is a double-sided Container, that holds two pieces of content and automatically re-sizes to match its content, whenever its flipped over.

Usage #

First import the package into your class:

import 'package:flippable_box/flippable_box.dart';

Create a FlippableBox with two child Containers. Change the isFlipped property to trigger the internal flip animation.

GestureDetector(
    onTap: () => setState(() => _isFlipped = !_isFlipped),
    child: FlippableBox(
        front: Container(width: 200, height: 200, color: Colors.white),
        back: Container(width: 300, height: 300, color: Colors.white),
        isFlipped: _isFlipped,
    ),
)

NOTE: It is required that the children are Containers, and have their size or constraints set manually, as shown in the example above. This is so the Box knows what its target size is when animating.

To control the flip animation, you can set duration, curve and flipVt which will cause the flip to be in the vertical axis rather than horizontal.

You can also specify a bg which takes a BoxDecoration, and a borderRadius in case you'd like to clip the child contents.

FlippableBox(
    front: child1,
    back: child2,
    isFlipped: _isFlipped,
    borderRadius: 32, //Uses a ClipRRect to clip contents of child containers
    bg: BoxDecoration(color: Colors.white), //Paints the box itself with a shared background
    duration: 0.5, //half second duration
    flipVt: true, //Flip vertically instead of horizontal
    curve: Curves.easeOut,
)

Example #

See the example directory for a simple example.

13
likes
90
pub points
71%
popularity

A double-sided Container, that flips over, revealing content on both sides.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

shawn@gskinner.com

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on flippable_box