Flutter卡片翻转动画插件card

Flutter卡片翻转动画插件card_flipper的使用

标题

Flutter卡片翻转动画插件card_flipper的使用

内容

Card Flipper Screen 插件可以让您在您的 Flutter 应用中添加一个带有动画的卡片翻转仪表板。

特性
- CardFlipperScreen 界面是为显示任何内容而设计的。
- 使用 cardsToDispaly 属性可以提供要显示的内容。
- 插件会自动处理动画。
示例视频
开始使用
1. 将最新版本的包添加到您的 pubspec.yaml 文件中（并运行 dart pub get):
```
dependencies:
  card_flipper: ^1.0.2
```
2. 导入包并在您的 Flutter App 中使用它。
使用方法 您可以修改以下属性：
- cardsToDispaly (卡片内容)
- topSpace (顶部页面空间)
- backgroundColor
- backWidget
- optionalActionWidget
- onTapBackBtn
- onTapOptionalActionWidget
- onTapFunction
- topSectionTitleStyle
- middleSectionTitleStyle
- middleSectionDescriptionStyle
- mainBtnWidget

完整示例代码

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

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List<CardViewModel> _cardsToDisplay = [
    CardViewModel(
      backdropAssetPath: 'assets/images/china.jpg',
      address: 'China',
      capitol: 'Beijing',
      description:
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lectus molestie faucibus mi. Lorem a ipsum justo, eros in massa justo. '
    ),
    CardViewModel(
      backdropAssetPath: 'assets/images/korea.jpg',
      address: 'Korea',
      capitol: 'Seoul',
      description:
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lectus molestie faucibus mi. Lorem a ipsum justo, eros in massa justo. '
    ),
    CardViewModel(
      backdropAssetPath: 'assets/images/germany.jpg',
      address: 'Germany',
      capitol: 'Berlin',
      description:
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lectus molestie faucibus mi. Lorem a ipsum justo, eros in massa justo. '
    ),
    CardViewModel(
      backdropAssetPath: 'assets/images/italy.jpg',
      address: 'Italy',
      capitol: 'Rome',
      description:
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lectus molestie faucibus mi. Lorem a ipsum justo, eros in massa justo. '
    ),
    CardViewModel(
      backdropAssetPath: 'assets/images/switzerland.jpg',
      address: 'Switzerland',
      capitol: 'Bern',
      description:
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lectus molestie faucibus mi. Lorem a ipsum justo, eros in massa justo. '
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CardFlipperScreen(
        cardsToDispaly: _cardsToDisplay,
        topSpace: 20.0,
        backgroundColor: Colors.black,
        backWidget: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Icon(
              Icons.arrow_back_ios,
              color: Colors.white,
              size: 18.0,
            ),
            SizedBox(
              width: 6.0,
            ),
            Text(
              'back',
              style: TextStyle(
                fontFamily: 'Montserrat',
                fontSize: 14.0,
                fontWeight: FontWeight.bold,
                letterSpacing: 2.0,
                color: Colors.white,
              ),
            ),
          ],
        ),
        optionalActionWidget: const Icon(
          Icons.bookmarks_outlined,
          color: Colors.white,
        ),
        onTapBackBtn: () {},
        onTapOptionalActionWidget: () {},
        onTapFunction: () {},
        topSectionTitleStyle: const TextStyle(
          fontFamily: 'Montserrat',
          fontSize: 20.0,
          fontWeight: FontWeight.bold,
          letterSpacing: 2.0,
          color: Colors.white,
        ),
        middleSectionTitleStyle: const TextStyle(
          fontFamily: 'Montserrat',
          fontSize: 80.0,
          fontWeight: FontWeight.bold,
          letterSpacing: -4.0,
          color: Colors.white,
        ),
        middleSectionDescriptionStyle: const TextStyle(
          fontFamily: 'Montserrat',
          fontSize: 16.0,
          fontWeight: FontWeight.normal,
          letterSpacing: 1.0,
          color: Colors.white,
        ),
        mainBtnWidget: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: const [
            Text(
              'Explore',
              style: TextStyle(
                fontFamily: 'Montserrat',
                fontSize: 16.0,
                fontWeight: FontWeight.bold,
                letterSpacing: 2.0,
                color: Colors.white,
              ),
            ),
            Padding(
              padding: EdgeInsets.only(
                left: 10.0,
              ),
              child: Icon(
                Icons.arrow_forward_ios,
                color: Colors.white,
                size: 16.0,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter卡片翻转动画插件card_flipper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

nodeper 1楼•5 天前

更多关于Flutter卡片翻转动画插件card_flipper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何使用 card_flipper 插件来实现 Flutter 卡片翻转动画的示例代码。这个插件允许你在 Flutter 应用中创建具有翻转效果的卡片。

首先，确保你已经在 pubspec.yaml 文件中添加了 card_flipper 依赖：

dependencies:
  flutter:
    sdk: flutter
  card_flipper: ^0.1.5  # 请检查最新版本号

然后，运行 flutter pub get 来获取依赖。

接下来是一个完整的示例代码，展示如何使用 card_flipper 来实现卡片翻转动画：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Card Flipper Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Card Flipper Demo'),
        ),
        body: Center(
          child: CardFlipperExample(),
        ),
      ),
    );
  }
}

class CardFlipperExample extends StatefulWidget {
  @override
  _CardFlipperExampleState createState() => _CardFlipperExampleState();
}

class _CardFlipperExampleState extends State<CardFlipperExample> with SingleTickerProviderStateMixin {
  bool isFront = true;

  void _flipCard() {
    setState(() {
      isFront = !isFront;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        CardFlipper(
          front: Card(
            elevation: 4.0,
            child: Container(
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Front Side',
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              ),
            ),
          ),
          back: Card(
            elevation: 4.0,
            child: Container(
              color: Colors.green,
              child: Center(
                child: Text(
                  'Back Side',
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              ),
            ),
          ),
          isFront: isFront,
          flipDuration: Duration(milliseconds: 500),
          onFlipCompleted: () {
            print('Card flip completed!');
          },
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: _flipCard,
          child: Text('Flip Card'),
        ),
      ],
    );
  }
}

解释

依赖添加：确保在 pubspec.yaml 中添加了 card_flipper 依赖。
主应用：MyApp 是一个基本的 Flutter 应用，包含一个 Scaffold 和一个 AppBar。
卡片翻转示例：CardFlipperExample 是一个 StatefulWidget，它使用 CardFlipper 来创建翻转效果的卡片。
卡片内容：
- front：定义了卡片正面的内容，这里是一个蓝色的卡片，上面显示 “Front Side”。
- back：定义了卡片背面的内容，这里是一个绿色的卡片，上面显示 “Back Side”。
翻转逻辑：
- isFront：一个布尔值，用于跟踪卡片当前是正面还是背面。
- _flipCard 方法：翻转卡片的方法，通过调用 setState 来更新 isFront 的值，从而触发 CardFlipper 的重新渲染。
按钮：一个 ElevatedButton，点击它会调用 _flipCard 方法来翻转卡片。

这个示例代码展示了如何使用 card_flipper 插件来创建一个简单的卡片翻转动画效果。你可以根据需要自定义卡片的内容和样式。