Flutter边框发光效果插件glowy_borders的使用

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

Flutter边框发光效果插件 glowy_borders 的使用

glowy_borders 是一个用于在Flutter应用中为组件添加动画边框效果的插件。它允许你通过设置渐变和发光效果来装饰你的组件，支持手动控制动画进度或让其无限循环播放。

特性

AnimatedGradientBorder 组件

  • 用渐变和发光效果包裹组件并为其添加动画边框。
  • 可以手动设置动画进度或者让动画无限循环。
  • 控制发光大小、边框宽度及颜色，创造炫酷效果。

开始使用

创建你的Flutter应用，导入该插件，并使用 AnimatedGradientBorder 来包裹你想要添加效果的元素。

使用示例

下面是一个完整的示例代码，展示了如何使用 AnimatedGradientBorder 包裹一个组件，并展示动画效果。注意这里的 currentProgress 变量用于设置动画状态，如果将其移除或设为 null，则动画将无限循环播放。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    double currentProgress = 0.5; // 示例中的进度值
    return MaterialApp(
      home: Scaffold(
        extendBody: true,
        body: SafeArea(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                const Text('Hallo Welt'),
                AnimatedGradientBorder(
                  borderSize: 2,
                  glowSize: 10,
                  gradientColors: [
                    Colors.transparent,
                    Colors.transparent,
                    Colors.transparent,
                    Colors.purple.shade50
                  ],
                  animationProgress: currentProgress, // 设置为 null 则无限循环
                  borderRadius: BorderRadius.all(Radius.circular(999)),
                  child: SizedBox(
                    width: 300,
                    height: 300,
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(999)),
                        color: Theme.of(context).colorScheme.secondaryContainer,
                      ),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text("Current Value: $currentProgress",
                              style: TextStyle(color: Colors.white, fontSize: 30.0)),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用glowy_borders插件来实现边框发光效果的代码示例。

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

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

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

接下来，你可以在你的Flutter项目中使用GlowyBorder来实现边框发光效果。以下是一个简单的示例：

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

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

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

class GlowyBorderDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Glowy Borders Demo'),
      ),
      body: Center(
        child: GlowyBorder(
          // GlowyBorder的参数配置
          color: Colors.blue,  // 边框颜色
          width: 5.0,          // 边框宽度
          spread: 5.0,         // 发光扩散范围
          blurRadius: 10.0,    // 发光模糊半径
          child: Container(
            width: 200,
            height: 200,
            color: Colors.white,
            alignment: Alignment.center,
            child: Text(
              'Glowy Border',
              style: TextStyle(fontSize: 24, color: Colors.black),
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，并在其中使用GlowyBorder来包裹一个Container。GlowyBorder接受多个参数来配置发光效果，包括：

  • color: 边框的颜色。
  • width: 边框的宽度。
  • spread: 发光效果的扩散范围。
  • blurRadius: 发光效果的模糊半径。

这些参数允许你灵活地定制边框的发光效果。你可以根据需要调整这些参数来达到你想要的视觉效果。

希望这个示例能帮你更好地理解如何在Flutter项目中使用glowy_borders插件来实现边框发光效果。

回到顶部