Flutter动画效果插件blinking_circle的使用

Flutter动画效果插件blinking_circle的使用

一个 Flutter 包，提供了闪烁圆圈小部件。

使用

import 'package:blinking_circle/blinking_circle.dart';

BlinkingCircle(
  onTap: () {
    // 处理点击事件
  },
  circleColor: Colors.red,
  circleSize: 100.0,
  containerWidth: 150.0,
  containerHeight: 150.0,
  containerDecoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10.0),
  ),
);

完整示例

以下是一个完整的 Flutter 应用程序示例，展示了如何使用 blinking_circle 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Blinking Circle Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Blinking Circle 示例'),
        ),
        body: Center(
          child: BlinkingCircle(
            onTap: () {
              print("闪烁圆圈被点击了！");
            },
            circleColor: Colors.red,
            circleSize: 100.0,
            containerWidth: 150.0,
            containerHeight: 150.0,
            containerDecoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


blinking_circle 是一个简单的 Flutter 插件，用于创建一个闪烁的圆圈动画。这个插件非常适合用于加载指示器、通知提示或其他需要吸引用户注意的场景。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  blinking_circle: ^1.0.0  # 请确保使用最新版本

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

使用 blinking_circle

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Blinking Circle Example'),
        ),
        body: Center(
          child: BlinkingCircle(
            color: Colors.blue, // 圆圈的颜色
            radius: 30.0, // 圆圈的半径
            duration: Duration(milliseconds: 500), // 闪烁的持续时间
          ),
        ),
      ),
    );
  }
}

参数说明

  • color: 圆圈的颜色，类型为 Color。
  • radius: 圆圈的半径，类型为 double。
  • duration: 闪烁动画的持续时间，类型为 Duration。

自定义动画

如果你想要更复杂的动画效果，可以通过组合多个 BlinkingCircle 或者使用 AnimatedBuilder 来实现。

示例：多个闪烁圆圈

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Multiple Blinking Circles Example'),
        ),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              BlinkingCircle(
                color: Colors.red,
                radius: 20.0,
                duration: Duration(milliseconds: 500),
              ),
              SizedBox(width: 10),
              BlinkingCircle(
                color: Colors.green,
                radius: 20.0,
                duration: Duration(milliseconds: 500),
              ),
              SizedBox(width: 10),
              BlinkingCircle(
                color: Colors.blue,
                radius: 20.0,
                duration: Duration(milliseconds: 500),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部