Flutter渐变发光边框插件gradient_glow_border的使用

Flutter渐变发光边框插件gradient_glow_border的使用

一个用于在 Flutter 中创建带有动画渐变边框的插件，支持普通、虚线和点线样式。此插件允许你轻松地为你的小部件添加具有可定制颜色、半径、厚度和动画效果的边框。

特性

• 动画渐变边框：为任何小部件创建平滑的动画渐变边框。
• 可定制的边框样式：
  • 普通渐变：一个实心的动画渐变边框。
  • 虚线渐变：具有自定义虚线间距的虚线动画渐变边框。
  • 点线渐变：具有自定义点间距的点状动画渐变边框。
• 可定制的边框圆角：为边框的每个角应用不同的圆角半径。
• 发光效果：为边框添加发光阴影效果。
• 完全可定制：控制动画持续时间、渐变颜色、厚度等。

安装

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

dependencies:
  gradient_glow_border: ^1.0.3

然后运行 flutter pub get 来安装包。

使用

1. 普通渐变边框

使用 GradientGlowBorder.normalGradient 构造函数来创建一个实心的动画渐变边框：

GradientGlowBorder.normalGradient(
  borderRadius: BorderRadius.circular(15),
  blurRadius: 1,
  spreadRadius: 1,
  colors: [Colors.blue, Colors.red],
  glowOpacity: 1,
  duration: Duration(milliseconds: 800),
  thickness: 3,
  child: YourChildWidget(),
)

2. 虚线渐变边框

使用 GradientGlowBorder.dashedGradient 构造函数来创建一个虚线的动画渐变边框：

GradientGlowBorder.dashedGradient(
  borderRadius: BorderRadius.circular(15),
  blurRadius: 1,
  spreadRadius: 0,
  colors: [Colors.blue, Colors.red],
  glowOpacity: 1,
  duration: Duration(milliseconds: 800),
  thickness: 3,
  dashSpace: 5, // 虚线之间的间距
  child: YourChildWidget(),
)

3. 点线渐变边框

使用 GradientGlowBorder.dottedGradient 构造函数来创建一个点线的动画渐变边框：

GradientGlowBorder.dottedGradient(
  borderRadius: BorderRadius.circular(20),
  blurRadius: 1,
  spreadRadius: 0,
  colors: [Colors.blue, Colors.red],
  glowOpacity: 1,
  duration: Duration(milliseconds: 800),
  thickness: 3,
  dottedSpace: 5, // 点之间的间距
  child: YourChildWidget(),
)

快速参考

由于自定义需要很多属性，这里是一个快速的备忘单：

示例

以下是使用 GradientGlowBorder 包的一个完整示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        body: Center(
          child: SizedBox(
                height: 70,
                width: double.infinity,
                child: GradientGlowBorder.normalGradient(
                  borderRadius: BorderRadius.all(Radius.circular(15)),
                  blurRadius: 1,
                  colors: [
                    Colors.blue,
                    Colors.red,
                  ],
                  duration: Duration(milliseconds: 500),
                  glowOpacity: 1,
                  spreadRadius: 0,
                  thickness: 3,
                  child: Center(
                    child: Text("Mohamed Elbaiomy"),
                  ),
                ),
              ),
        ),
      ),
    );
  }
}