【Flutter】裏表の表示可能なCard Widgetを実装する(Flip Card)

タップすると裏表反転するようなCard Widget を探して使えそうなものがあったのでまとめる。

完成したもの

先に完成したwidget をご覧ください！！

pub.devでflip_card とflutter_flip_card が見つかったが今回はLike数を踏まえて、前者を活用。

後者では、スライドで反転させる機能などを実装してあり魅力的だったが、今回はwidgetをタッチした際に、反転できれば良いのでスルー。

1	flutter pub add flip_card

又は、
pubsec.yamlに

1 2	dependencies: flip_card: ^0.6.0

を追加
flip_card.dart

import 'package:client/components/dir_listtile.dart';

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

import 'package:flip_card/flip_card.dart';

class CustomCard extends StatefulWidget {

const CustomCard({Key? key}) : super(key: key);

@override

State<CustomCard> createState() => _CustomCardState();

}

class _CustomCardState extends State<CustomCard> {

@override

Widget build(BuildContext context) {

return FlipCard(

fill: Fill.fillBack, // Fill the back side of the card to make in the same size as the front.

direction: FlipDirection.VERTICAL, // default

front: Container(

child: const DirListTile(title: '表',),

back: Container(

child: const DirListTile(title: '裏',),

);

}

トランプゲームとか頑張ったら作れそう

Follow me!