Flutter条件动画构建插件animated_conditional_builder的使用

Flutter 条件动画构建插件 animated_conditional_builder 的使用

特性

  • 支持动画
  • 根据条件类型显示 UI 元素
  • 支持空安全

开始使用

在 pubspec.yaml 文件中添加依赖：

dependencies:
  animated_conditional_builder: ^0.0.5

然后运行 flutter pub get。

导入此包

import 'package:animated_conditional_builder/animated_conditional_builder.dart';

使用示例

示例一

在本示例中，我们根据 _condition 的值来决定显示哪个图标。如果 _condition 为 true，则显示加号图标（Icons.add），否则显示缩小图标（Icons.minimize）。

class ExampleOne extends StatelessWidget {
  const ExampleOne({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    bool _condition = true;
    return Scaffold(
      body: Center(
        child: AnimatedConditionalBuilder(
          condition: _condition,
          builder: (BuildContext context) => Icon(Icons.add),
          fallback: (BuildContext context) => Icon(Icons.minimize),
        ),
      ),
    );
  }
}

示例二

在本示例中，我们同样根据 _condition 的值来决定显示哪个图标。如果 _condition 为 false，则显示加号图标（Icons.add），并且 fallback 设置为 null，表示当条件不满足时不会显示任何内容。

class ExampleTwo extends StatelessWidget {
  const ExampleTwo({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    bool _condition = false;
    return Scaffold(
      body: Center(
        child: AnimatedConditionalBuilder(
          condition: _condition,
          builder: (BuildContext context) => Icon(Icons.add),
          fallback: null,
        ),
      ),
    );
  }
}

更多关于Flutter条件动画构建插件animated_conditional_builder的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter条件动画构建插件animated_conditional_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，animated_conditional_builder 是一个用于在 Flutter 中根据条件动态构建动画内容的插件。下面是一个示例代码，展示如何使用 animated_conditional_builder 来根据条件显示和隐藏带有动画效果的组件。

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

dependencies:
  flutter:
    sdk: flutter
  animated_conditional_builder: ^x.y.z  # 请使用最新版本号替换 x.y.z

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

接下来是一个完整的 Flutter 应用示例，演示如何使用 AnimatedConditionalBuilder 来根据条件显示和隐藏带有淡入淡出动画的文本：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animated Conditional Builder Demo'),
        ),
        body: Center(
          child: ConditionalAnimationDemo(),
        ),
      ),
    );
  }
}

class ConditionalAnimationDemo extends StatefulWidget {
  @override
  _ConditionalAnimationDemoState createState() => _ConditionalAnimationDemoState();
}

class _ConditionalAnimationDemoState extends State<ConditionalAnimationDemo> with SingleTickerProviderStateMixin {
  bool _showText = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: () {
            setState(() {
              _showText = !_showText;
            });
          },
          child: Text('Toggle Text'),
        ),
        SizedBox(height: 20),
        AnimatedConditionalBuilder(
          condition: _showText,
          animationDuration: Duration(seconds: 1),
          animationCurve: Curves.easeInOut,
          builder: (context, animation) {
            return AnimatedOpacity(
              opacity: animation.value,
              child: Text(
                'This text appears with animation!',
                style: TextStyle(fontSize: 24),
              ),
            );
          },
        ),
      ],
    );
  }
}

在这个示例中：

  1. 我们创建了一个 ConditionalAnimationDemo 组件，它包含一个按钮和一个使用 AnimatedConditionalBuilder 的文本。
  2. AnimatedConditionalBuilder 的 condition 属性用于控制是否显示文本。
  3. animationDuration 和 animationCurve 定义了动画的时长和曲线。
  4. builder 函数接收一个 animation 参数，它表示动画的状态。我们使用 AnimatedOpacity 来根据 animation.value 动态改变文本的透明度，从而实现淡入淡出的效果。

当你点击按钮时，_showText 的值会切换，从而触发 AnimatedConditionalBuilder 的条件变化，并启动动画。

回到顶部