Flip Card

이번엔 전 포스트에서 말했던 라이브러리 중 하나를 사용해보려고 합니다.
이번에는 Filp_Card라는 라이브러리를 사용해보았는데 사용하기도 정말 간단하고 좋은것같아서 만족스러웠습니다.

https://pub.dev/packages/flip_card
먼저 여기서 install 해주시고 코드는

import 'package:flip_card/flip_card_controller.dart';
import 'package:flutter/material.dart';
import 'package:flip_card/flip_card.dart';

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

  @override
  State<FlipCardPage> createState() => _FlipCardPageState();
}

class _FlipCardPageState extends State<FlipCardPage> {
  final controller = FlipCardController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FlipCard(
              controller: controller,
              direction: FlipDirection.HORIZONTAL,
              side: CardSide.FRONT,
              autoFlipDuration: Duration(milliseconds: 3000),
              speed: 1000,
              flipOnTouch: true,
              onFlip: () {},
              alignment: Alignment.bottomLeft,
              onFlipDone: (status) {
                print('앞면일 때 false 뒤면일 떄 true $status');
              },
              fill: Fill.fillFront,
              front: Container(
                padding: EdgeInsets.all(30),
                decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.all(Radius.circular(8.0)),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      'Front',
                    ),
                    Text(
                      'Click here to flip back',
                    ),
                  ],
                ),
              ),
              back: Container(
                padding: EdgeInsets.all(30),
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.all(Radius.circular(8.0)),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      'Back',
                    ),
                    Text(
                      'Click here to flip front',
                    ),
                  ],
                ),
              ),
            ),
            SizedBox(
              height: 10,
            ),
            ElevatedButton(
              onPressed: controller.toggleCard,
              child: Text('카드 토글하기'),
            ),
            ElevatedButton(
              onPressed: controller.toggleCardWithoutAnimation,
              child: Text('카드 애니매이셥 없이 뒤집기'),
            ),
            ElevatedButton(
              onPressed: () => controller.skew(.4),
              child: Text('카드 기울이기'),
            ),
            ElevatedButton(
              onPressed: () => controller.hint(
                duration: Duration(milliseconds: 700),
                total: Duration(milliseconds: 500),
              ),
              child: Text('뒷면 잠깐 보여주기'),
            ),
          ],
        ),
      ),
    );
  }
}

속성들을 살펴보면

controller

FlipCardController로 선언하여 밑에 버튼의 함수들 처럼 flipcard의 기능을 제어하는 컨트롤러
FlipCardController 내장함수
toggleCard
말 그대로 카드를 뒤집는 함수
toggleCardWithoutAnimation
이것도 말 그대로 카드를 뒤집는데 애니메이션을 제외하고 뒤집는 함수
skew
파라미터로 0에서 1사이의 double타입의 파라미터를 받음 파라미터의 값 만큼 기울어지게 하는 함수
controller.hint
파라미터로 Duration타입의 duration과 total을 받는 함수
duration의 값은 total보다 크거나 같게 두는게 좋습니다. total이 duration보다 크면 카드 뒷면을 채 보여주기도 전에 다시 돌아옵니다.
또 앞면일 때만 작동합니다.

direction: 수평으로 뒤집을지 수직으로 뒤집을지,
side: 처음에 시작되는 면,
autoFlipDuration: 최초실행시 한번 뒤집음
speed: 뒤집는 속도
flipOnTouch: 카드 터치로 토글이 가능하게 할지 말지
onFlip: 카드가 뒤집어지면 콜백되는 함수,
onFlipDone: onFlip과 비슷하지만 카드가 뒤집어지면 bool값이 리턴됨 뒷면일때 true 앞면일떄 false
alignment: 정렬 기준,
fill: front, back, none을 가지는 enum 앞면에 크기에 맞출지 뒷면에 맞출지
front: 앞면 ui
back: 뒷면 ui

flipcard에 거의 모든것을 정리했는데 함수마다 기능이 눈에 확 들어오고 짧고 간단해서 정리하기도 참 사용하기 재밌었던 라이브러리였습니다. ㅎㅎ 프로젝트 때 꼭 써먹어야지..