Flutter中的 FlipCard

flip_card是一个提供翻转卡片动画的组件。它可用于隐藏和显示产品的详细信息。下面给出了一个示例视频，以了解我们将在本文中做什么。

安装

将依赖项添加到pubspec.yaml文件中。

dependencies:
 flip_card: ^0.6.0

使用语法

创建翻转卡。卡片会在触摸时翻转。 Touch 属性默认为 true。

Dart

FlipCard(
  fill: Fill.fillBack, 
  direction: FlipDirection.HORIZONTAL, // default
  front: Container(   // required
        child: Text('Front'),
    ),
    back: Container(   // required 
        child: Text('Back'),
    ),
);

特性

Property	Description
front	This is required property that show the front content.
back	This is required property that show the back content.
speed	Speed of flip of card.
flipOnTouch	Enable the card to flip when touched.
direction	Enable the direction in which card can flip, Horizontal or vertical.
alignment	Set the alignment of the content.
fill	Fill the back side of the card to make in the same size as the front.
void Function()? onFlip,	Function to implement task during fliping.
void Function(bool)? onFlipDone,	Function to implement task after the flip done.

要使用它，请导入包。

import 'package:flip_card/flip_card.dart';

代码示例

Dart

import 'package:flip_card/flip_card.dart';
import 'package:flutter/material.dart';
  
// main function calling
// to the MyFlipCard class.
void main() {
  runApp(MyFlipCard());
}
  
// Class MyFlipCard is stateful class.
class MyFlipCard extends StatefulWidget {
  const MyFlipCard({Key? key}) : super(key: key);
  
  @override
  State createState() => _MyFlipCardState();
}
  
class _MyFlipCardState extends State {
  @override
  Widget build(BuildContext context) {
    // returning MaterialApp 
    return MaterialApp( 
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flip Card"),
        ),
        // body has a center with row child.
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Flipcard with vertical
              // direction when flip
              FlipCard( 
                direction: FlipDirection.VERTICAL,
                // front of the card
                front: Container( 
                  alignment: Alignment.center,
                  width: 200,
                  height: 200,
                  color: Colors.red,
                  child: Text("Front"),
                ),
                // back of the card
                back: Container(  
                  alignment: Alignment.center,
                  width: 200,
                  height: 200,
                  color: Colors.teal,
                  child: Text("Back"),
                ),
              ),
              SizedBox(width: 30,),
              // 2nd card showing Horizontal FlipDirection
              FlipCard(  
                direction: FlipDirection.HORIZONTAL,
                // front of the card
                front: Container( 
                  alignment: Alignment.center,
                  width: 200,
                  height: 200,
                  color: Colors.red,
                  child: Text("Front"),
                ),
                // back of the card
                back: Container( 
                  alignment: Alignment.center,
                  width: 200,
                  height: 200,
                  color: Colors.teal,
                  child: Text("Back"),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

解释

• main 方法是加载程序后调用的主要方法。
• 加载程序后，runApp 将运行并调用我们创建的MyFlipCard类来运行。
• 此类是用于检测 FlipCard 状态的有状态小部件。
• 创建一个允许我们使用 Scaffold 的 MaterialApp。
• Scaffold 允许我们使用 appbar 和 body。
• 应用栏有简单的标题。
• 正文包含居中的行。
• 一行允许我们有多个子节点，这些子节点是 mainAxisAlignment 居中的子节点。
• Row 有三个孩子，两个 FlipCard 和sizedbox。
• FlipCard Direction 分别设置为 Vertically 和 Horizontally。
• 前面显示一个 200×200 红色的容器，前面有文字。
• 背面显示一个 200×200 蓝绿色的容器，背面有文字。

输出