Flutter动画卡片效果插件animated_card的使用

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

Flutter动画卡片效果插件animated_card的使用

animated_card

animated_card是一个用于初始化任何小部件时添加动画效果的Flutter插件，它还支持自定义可滑动删除功能。

示例1 示例2

如何使用

1. 添加依赖

在项目的pubspec.yaml文件中添加animated_card依赖：

  • 对于Flutter版本<=1.22.6：

    dependencies:
  animated_card: 1.0.0+8<lastest version>

  • 对于Flutter版本>=2.0.0：

    dependencies:
  animated_card: <lastest version>

2. 导入包

在Dart文件顶部添加以下导入语句：

import 'package:animated_card/animated_card.dart';

3. 使用方法

简单实现

可以将任意小部件包裹在AnimatedCard中来为其添加动画效果。

AnimatedCard(
    child: <Widget>,
),

可滑动删除实现

为AnimatedCard设置初始动画方向、延迟时间、动画持续时间和移除回调等属性。

AnimatedCard(
    direction: AnimatedCardDirection.left, // 初始动画方向 
    initDelay: Duration(milliseconds: 0), // 初始动画延迟
    duration: Duration(seconds: 1), // 初始动画持续时间
    onRemove: () => lista.removeAt(index), // 实现此操作以激活滑动删除
),

示例代码

下面是一个完整的示例demo，演示了如何在一个列表视图中使用AnimatedCard创建带有滑动删除功能的动画卡片效果。

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

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

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

class ListagemScreen extends StatelessWidget {
  final lista = List.generate(50, (index) => index);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("List Animation Example")),
      body: ListView.builder(
        itemCount: lista.length,
        itemBuilder: (context, index) {
          return AnimatedCard(
            direction: AnimatedCardDirection.left, // 初始动画方向
            initDelay: Duration(milliseconds: 0), // 初始动画延迟
            duration: Duration(seconds: 1), // 初始动画持续时间
            onRemove: () => lista.removeAt(index), // 实现此操作以激活滑动删除
            curve: Curves.bounceOut, // 动画曲线
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 10),
              child: Card(
                elevation: 5,
                child: ListTile(
                  title: Container(
                    height: 150,
                    child: Center(child: Text("$index")),
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

通过上述步骤，您可以在自己的Flutter项目中轻松集成animated_card插件，并为您的应用增添更加生动有趣的动画卡片效果。如果您有任何问题或需要进一步的帮助，请随时提问！


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter项目中使用animated_card插件来实现动画卡片效果的代码案例。animated_card是一个流行的Flutter插件，用于创建具有动画效果的卡片视图。

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

dependencies:
  flutter:
    sdk: flutter
  animated_card: ^x.y.z  # 请替换为最新的版本号

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

接下来，你可以在Flutter应用中创建一个带有动画卡片效果的页面。以下是一个完整的示例代码：

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

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

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

class AnimatedCardDemo extends StatefulWidget {
  @override
  _AnimatedCardDemoState createState() => _AnimatedCardDemoState();
}

class _AnimatedCardDemoState extends State<AnimatedCardDemo> with SingleTickerProviderStateMixin {
  bool _isCardVisible = false;

  void _toggleCardVisibility() {
    setState(() {
      _isCardVisible = !_isCardVisible;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Card Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _toggleCardVisibility,
              child: Text(_isCardVisible ? 'Hide Card' : 'Show Card'),
            ),
            SizedBox(height: 20),
            if (_isCardVisible)
              AnimatedCard(
                direction: AnimatedCardDirection.left,
                curve: Curves.easeInOut,
                duration: Duration(seconds: 1),
                child: Card(
                  elevation: 8.0,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(16.0),
                  ),
                  child: Container(
                    width: 300,
                    height: 200,
                    child: Center(
                      child: Text(
                        'Hello, I am an animated card!',
                        style: TextStyle(fontSize: 24),
                      ),
                    ),
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个按钮和一个条件渲染的动画卡片。点击按钮会切换卡片的可见性。

  • AnimatedCard组件有几个关键属性：
    • direction：动画的方向（如左、右、上、下）。
    • curve：动画的曲线（如Curves.easeInOut）。
    • duration：动画的持续时间。

当卡片从不可见变为可见时，它会按照指定的方向和持续时间进行动画展示。同样，当卡片从可见变为不可见时，它也会进行相反的动画。

这个示例展示了如何使用animated_card插件来实现基本的动画卡片效果。你可以根据需要进一步自定义和扩展这个效果。

回到顶部