Flutter动画效果插件pulse_widget的使用

Flutter动画效果插件pulse_widget的使用

Pulse 插件可以让你为任何 Flutter 小部件添加脉冲动画效果。

特性

  • 提供一个简单的脉冲动画效果给你的小部件。

使用方法

要使用 Pulse，你需要将它包裹在你想要添加脉冲动画的小部件周围。以下是一个基本的用法示例：

Pulse(
    shouldShowPulse: true,
    child: child,
)

完整示例

下面是一个完整的示例代码，展示了如何使用 Pulse 插件来创建一个带有不同状态的按钮，并根据按钮的状态改变脉冲动画的效果。

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

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

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

  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ButtonState state = ButtonState.pulse;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Pulse(
            shouldShowPulse: (state != ButtonState.hidePulse),
            colour: Colors.blue,
            isSinglePulse: (state == ButtonState.pulseOnce),
            maxDiameter: (state == ButtonState.bigPulse) ? 500 : 250,
            delay: const Duration(milliseconds: 100), // 延迟时间（脉冲之间的延迟）
            child: GestureDetector(
              onTap: () {
                setState(() {
                  switch (state) {
                    // 更新按钮状态
                    case ButtonState.pulse:
                      state = ButtonState.pulseOnce;
                      break;
                    case ButtonState.pulseOnce:
                      state = ButtonState.bigPulse;
                      break;
                    case ButtonState.bigPulse:
                      state = ButtonState.hidePulse;
                      break;
                    case ButtonState.hidePulse:
                      state = ButtonState.pulse;
                  }
                });
              },
              child: Button(
                name: state.toString(),
              ),
            )),
      ),
    );
  }
}

// 枚举定义按钮状态
enum ButtonState {
  pulse,
  pulseOnce,
  bigPulse,
  hidePulse,
}

// 显示当前状态的widget
class Button extends StatelessWidget {
  final String name;
  const Button({Key? key, required this.name}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Card(
        color: Colors.blueGrey,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            name,
            style: const TextStyle(color: Colors.white, fontSize: 25),
          ),
        ));
  }
}

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

1 回复

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


当然，以下是如何在Flutter中使用pulse_widget插件来实现动画效果的代码示例。

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

dependencies:
  flutter:
    sdk: flutter
  pulse_widget: ^latest_version  # 请替换为最新的版本号

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

接下来，在你的Dart文件中使用PulseWidget。以下是一个完整的示例，展示了如何在一个简单的Flutter应用中应用PulseWidget：

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

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

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

class PulseDemoScreen extends StatefulWidget {
  @override
  _PulseDemoScreenState createState() => _PulseDemoScreenState();
}

class _PulseDemoScreenState extends State<PulseDemoScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pulse Widget Demo'),
      ),
      body: Center(
        child: PulseWidget(
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
            child: Center(
              child: Text(
                'Pulse',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
          ),
          pulseAnimation: _controller,
          type: PulseType.onlyScale, // 你可以选择其他类型，例如 PulseType.scaleAndOpacity
          scaleStart: 1.0,
          scaleEnd: 1.2,
          opacityStart: 1.0,
          opacityEnd: 0.5,
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个PulseDemoScreen类，它扩展了StatefulWidget，因为我们需要在状态变化时控制动画。
  2. 在_PulseDemoScreenState类中，我们使用AnimationController来控制动画的时长和循环。
  3. 在build方法中，我们使用PulseWidget来包裹一个带有文本的容器。
  4. PulseWidget的参数包括：
    • child：你想要应用脉冲动画效果的子控件。
    • pulseAnimation：控制动画的AnimationController。
    • type：动画的类型，可以是PulseType.onlyScale（仅缩放）或PulseType.scaleAndOpacity（缩放和透明度变化）。
    • scaleStart和scaleEnd：动画开始和结束时的缩放比例。
    • opacityStart和opacityEnd：动画开始和结束时的透明度。

运行这个示例，你将看到一个带有脉冲动画效果的蓝色方块，它会根据AnimationController的设置进行缩放和/或透明度变化。你可以根据需要调整这些参数来实现不同的动画效果。

回到顶部