flippable_box 1.0.6

Flutter Android iOS web

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

example/lib/main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FlippableExample(),
    );
  }
}

class FlippableExample extends StatefulWidget {
  @override
  _FlippableExampleState createState() => _FlippableExampleState();
}

class _FlippableExampleState extends State<FlippableExample> with SingleTickerProviderStateMixin {
  bool _isFlipped = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.blue.shade100,
        body: Center(
          child: GestureDetector(
            onTap: () => setState(() => _isFlipped = !_isFlipped),
            child: FlippableBox(
              front: _buildCard("Front!", 250, 200, Colors.green),
              back: _buildCard("Back...", 350, 350, Colors.red),
              flipVt: true,
              isFlipped: _isFlipped,
            ),
          ),
        ));
  }

  Widget _buildCard(String label, double width, double height, Color color) {
    return Container(
      color: color,
      width: width,
      height: height,
      child: Center(
        child: Text(label, style: TextStyle(fontSize: 32)),
      ),
    );
  }
}
10
likes
90
pub points
72%
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