Flutter动画边框插件animated_glow_border的使用

Flutter 动画边框插件 animated_glow_border 的使用

AnimatedGlowBorder 是一个可自定义的小部件，它提供了带有发光效果的动画渐变边框。

特性

  • borderWidth：动画渐变边框的宽度。
  • borderRadius：边框的半径，允许圆角。
  • blurRadius：边框周围发光效果的模糊半径。
  • glowOpacity：发光效果的不透明度。
  • spreadRadius：发光效果在边框周围的扩散半径。
  • animationDuration：渐变动画的持续时间。
  • startColor：渐变的起始颜色。
  • endColor：渐变的结束颜色。

示例用法

import 'package:animated_glow_border/animated_glow_border.dart';

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return AnimatedGlowBorder(
      // 边框宽度
      borderWidth: 4.0,
      // 圆角半径
      borderRadius: 12.0,
      // 发光模糊半径
      blurRadius: 10.0,
      // 发光不透明度
      glowOpacity: 0.8,
      // 发光扩散半径
      spreadRadius: 5.0,
      // 渐变动画持续时间
      animationDuration: Duration(seconds: 2),
      // 渐变起始颜色
      startColor: Colors.blue,
      // 渐变结束颜色
      endColor: Colors.purple,
      // 包含的子部件
      child: Container(
        width: 200,
        height: 200,
        alignment: Alignment.center,
        child: Text(
          'Glow Border!',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用animated_glow_border插件的示例代码。animated_glow_border是一个可以为Widget添加动画边框光效的Flutter插件。首先，你需要确保你的pubspec.yaml文件中已经添加了该依赖：

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

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

接下来，是一个简单的使用示例，展示如何在Flutter应用中应用AnimatedGlowBorder：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animated Glow Border Example'),
        ),
        body: Center(
          child: AnimatedGlowBorder(
            // 目标Widget
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Glow!',
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              ),
            ),
            // 动画配置
            glowColor: Colors.yellow,  // 发光颜色
            borderWidth: 4.0,          // 边框宽度
            glowDuration: Duration(seconds: 2), // 完整发光周期时长
            repeat: true,              // 是否重复动画
          ),
        ),
      ),
    );
  }
}

在这个示例中：

  • AnimatedGlowBorder是主要的动画边框组件。
  • child属性是你想要应用动画边框效果的Widget，这里我们使用了一个简单的Container，里面有一个文本。
  • glowColor属性设置了发光的颜色。
  • borderWidth属性设置了边框的宽度。
  • glowDuration属性设置了完整发光周期的时间长度。
  • repeat属性设置了动画是否应该重复。

运行这个应用，你将看到一个带有动画发光边框的蓝色方块，发光颜色为黄色，动画会不断重复。

这个插件非常灵活，你可以根据需要调整这些参数来实现不同的动画效果。

回到顶部