Flutter折叠卡片动画插件flutter_folding_card的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter折叠卡片动画插件flutter_folding_card的使用

flutter_folding_card 是一个用于创建具有折叠效果的可扩展卡片的 Flutter 插件。这个插件非常适合用于各种应用程序中的交互式设计。以下是关于如何使用 flutter_folding_card 的详细说明和示例代码。

描述

flutter_folding_card 插件允许你创建一个浪漫的可扩展卡片，并带有折叠效果。这个小部件可以独立于任何其他小部件使用，帮助你在复杂的设计中添加动态效果。

这个插件来自 Romantic Project。更多来自 Romantic Developer 的作品。

Demo

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 flutter_folding_card 插件。

示例代码

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

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

const _kImageUrls = [
  "assets/sample_1.jpg",
  "assets/sample_2.jpg",
  "assets/sample_3.jpg",
];

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final itemCount = 3;
  final foldOutList = <bool>[false, false, false];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Example'),
          actions: [
            IconButton(
              onPressed: () {
                setState(() {
                  for (var i = 0; i < foldOutList.length; ++i) {
                    foldOutList[i] = false;
                  }
                });
              },
              icon: Icon(Icons.cleaning_services_sharp),
            ),
          ],
        ),
        backgroundColor: Colors.white,
        body: ListView.builder(
          itemBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.only(left: 22.0, right: 22),
              child: FoldingCard(
                foldOut: foldOutList[index],
                curve: foldOutList[index] == true
                    ? Curves.easeInCubic
                    : Curves.easeOutCubic,
                duration: Duration(milliseconds: 1400),
                coverBackground: ElevatedButton(
                  onPressed: () {
                    setState(() {
                      foldOutList[index] = true;
                    });
                  },
                  child: Text(
                    'This is a sample coverBackground, click on it to fold in.',
                    textAlign: TextAlign.center,
                  ),
                ),
                expandedCard: index == 1
                    ? Stack(
                        children: [
                          Image.asset(
                            _kImageUrls[0],
                            fit: BoxFit.fitWidth,
                            width: MediaQuery.of(context).size.width,
                            alignment: Alignment.topCenter,
                          ),
                          Center(
                            child: ElevatedButton(
                              onPressed: () {},
                              child: Text(
                                'This is a other sample for expandedCard.',
                              ),
                            ),
                          )
                        ],
                      )
                    : Image.asset(
                        _kImageUrls[1],
                        fit: BoxFit.cover,
                        width: MediaQuery.of(context).size.width,
                        alignment: Alignment.topCenter,
                      ),
                cover: ElevatedButton(
                  style: ButtonStyle(
                    padding: MaterialStateProperty.all(EdgeInsets.zero),
                  ),
                  onPressed: () {
                    setState(() {
                      foldOutList[index] = false;
                    });
                  },
                  child: Image.asset(
                    _kImageUrls[2],
                    fit: BoxFit.fitWidth,
                    width: MediaQuery.of(context).size.width,
                    alignment: Alignment.topCenter,
                  ),
                ),
                foldingHeight: 100,
                expandedHeight: 300,
              ),
            );
          },
          itemCount: itemCount,
        ),
      ),
    );
  }
}

说明

  1. 导入依赖：

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

  2. 定义图片资源：

    const _kImageUrls = [
  "assets/sample_1.jpg",
  "assets/sample_2.jpg",
  "assets/sample_3.jpg",
];

  3. 创建状态管理：

    final itemCount = 3;
final foldOutList = <bool>[false, false, false];

  4. 构建应用：

    [@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Example',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: Scaffold(
      appBar: AppBar(
        title: Text('Example'),
        actions: [
          IconButton(
            onPressed: () {
              setState(() {
                for (var i = 0; i < foldOutList.length; ++i) {
                  foldOutList[i] = false;
                }
              });
            },
            icon: Icon(Icons.cleaning_services_sharp),
          ),
        ],
      ),
      backgroundColor: Colors.white,
      body: ListView.builder(
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.only(left: 22.0, right: 22),
            child: FoldingCard(
              foldOut: foldOutList[index],
              curve: foldOutList[index] == true
                  ? Curves.easeInCubic
                  : Curves.easeOutCubic,
              duration: Duration(milliseconds: 1400),
              coverBackground: ElevatedButton(
                onPressed: () {
                  setState(() {
                    foldOutList[index] = true;
                  });
                },
                child: Text(
                  'This is a sample coverBackground, click on it to fold in.',
                  textAlign: TextAlign.center,
                ),
              ),
              expandedCard: index == 1
                  ? Stack(
                      children: [
                        Image.asset(
                          _kImageUrls[0],
                          fit: BoxFit.fitWidth,
                          width: MediaQuery.of(context).size.width,
                          alignment: Alignment.topCenter,
                        ),
                        Center(
                          child: ElevatedButton(
                            onPressed: () {},
                            child: Text(
                              'This is a other sample for expandedCard.',
                            ),
                          ),
                        )
                      ],
                    )
                  : Image.asset(
                      _kImageUrls[1],
                      fit: BoxFit.cover,
                      width: MediaQuery.of(context).size.width,
                      alignment: Alignment.topCenter,
                    ),
              cover: ElevatedButton(
                style: ButtonStyle(
                  padding: MaterialStateProperty.all(EdgeInsets.zero),
                ),
                onPressed: () {
                  setState(() {
                    foldOutList[index] = false;
                  });
                },
                child: Image.asset(
                  _kImageUrls[2],
                  fit: BoxFit.fitWidth,
                  width: MediaQuery.of(context).size.width,
                  alignment: Alignment.topCenter,
                ),
              ),
              foldingHeight: 100,
              expandedHeight: 300,
            ),
          );
        },
        itemCount: itemCount,
      ),
    ),
  );
}

开发环境

以下是开发此示例所使用的开发环境：

[✓] Flutter (Channel stable, 3.0.1, on macOS 12.3.1 21E258 darwin-x64, locale en-VN)
    • Flutter version 3.0.1 at ~/fvm/versions/stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision fb57da5f94 (5 days ago), 2022-05-19 15:50:29 -0700
    • Engine revision caaafc5604
    • Dart version 2.17.1
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at ~/Library/Android/sdk
    • Platform android-31, build-tools 30.0.3
    • ANDROID_HOME = ~/Library/Android/sdk
    • ANDROID_SDK_ROOT = ~/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] VS Code (version 1.67.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.40.0

希望这个示例能帮助你更好地理解和使用 flutter_folding_card 插件。如果你有任何问题或需要进一步的帮助，请随时提问！


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter中使用flutter_folding_card插件来实现折叠卡片动画的示例代码。这个插件允许你创建可折叠的卡片动画效果，非常适合用在展示信息或者菜单项上。

首先，你需要在pubspec.yaml文件中添加flutter_folding_card依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_folding_card: ^最新版本号  # 请替换为当前最新版本号

然后运行flutter pub get来安装依赖。

接下来，是一个完整的Flutter应用示例，展示了如何使用flutter_folding_card：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Folding Card Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    )..repeat(reverse: true);

    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Folding Card Example'),
      ),
      body: Center(
        child: FoldingCard(
          width: 300,
          height: 400,
          frontWidget: Container(
            color: Colors.blue,
            child: Center(
              child: Text(
                'Front',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ),
          backWidget: Container(
            color: Colors.green,
            child: Center(
              child: Text(
                'Back',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ),
          animation: _animation,
          flipDirection: FlipDirection.VERTICAL,  // 你可以使用VERTICAL或HORIZONTAL
          borderRadius: 20,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 你可以在这里触发动画的某些特定行为，例如重置动画
          _controller.reset();
          _controller.forward();
        },
        tooltip: 'Trigger Animation',
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个可折叠的卡片。卡片的正面是蓝色的，显示“Front”文字，背面是绿色的，显示“Back”文字。我们使用AnimationController来控制折叠动画，并通过FoldingCard小部件来实现折叠效果。

你可以根据需要调整动画的持续时间、方向和其他参数。FoldingCard的参数允许你高度定制卡片的外观和行为。

希望这个示例能帮助你理解如何在Flutter中使用flutter_folding_card插件！

回到顶部