Flutter内发光效果插件inner_glow的使用

Flutter内发光效果插件inner_glow的使用

Inner Glow

这个包允许您轻松地为容器创建内发光效果，提升Flutter应用程序的视觉吸引力。通过InnerGlowContainers，您可以为UI元素添加惊人的、引人注目的内发光效果，解锁设计和美学的新可能性。使用InnerGlowContainers包提升您的Flutter项目，并以前所未有的方式释放您的创造力。

截图

以下是插件的一些示例截图：

使用示例

简单用法

InnerGlow(
    width: width(context, 0.4), // 定义容器宽度
    height: width(context, 0.4), // 定义容器高度
),

带选项的用法

InnerGlow(
    width: width(context, 0.4), // 定义容器宽度
    height: width(context, 0.2), // 定义容器高度
    glowRadius: 20, // 内发光半径
    thickness: 10, // 内发光厚度
    glowBlur: 5, // 内发光模糊程度
    strokeLinearGradient: const LinearGradient( // 内发光渐变颜色
        begin: Alignment.topRight,
        end: Alignment.bottomLeft,
        colors: [Colors.white, Colors.black]
    ),
    baseDecoration: BoxDecoration( // 容器的基本装饰
        borderRadius: BorderRadius.circular(20),
        gradient: const LinearGradient(
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
            colors: [Colors.lightBlueAccent, Colors.teal]
        ),
    ),
    child: Center( // 子组件
        child: Text('Play', style: TextStyle(fontSize: 32, color: Colors.blue))
    ),
)

选项说明

• width：定义容器的宽度。
• height：定义容器的高度。
• glowBlur：控制内发光的模糊程度。
• glowRadius：定义内发光的半径。
• thickness：控制内发光的不透明度。
• blurBackground：这将使背景上的任何东西变得模糊。
• strokeLinearGradient：通过默认白色给发光上色。
• baseDecoration：这将接收一个BoxDecoration并允许您像修改容器一样修改它，默认情况下它是BoxDecoration(color: Colors.transparent)。
• margin：这将为您的容器提供边距，默认情况下它是EdgeInsets.all(0)。
• child：这将允许您在发光容器中添加子组件。

完整示例Demo

下面是一个完整的示例代码，展示如何在Flutter应用中使用InnerGlow插件：

import 'package:flutter/material.dart';
import 'package:inner_glow/inner_glow.dart'; // 引入插件

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Inner Glow Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Inner Glow Example'),
        ),
        body: Center(
          child: InnerGlow(
            width: 200, // 定义容器宽度
            height: 200, // 定义容器高度
            glowRadius: 20, // 内发光半径
            thickness: 10, // 内发光厚度
            glowBlur: 5, // 内发光模糊程度
            strokeLinearGradient: const LinearGradient( // 内发光渐变颜色
                begin: Alignment.topRight,
                end: Alignment.bottomLeft,
                colors: [Colors.white, Colors.black]
            ),
            baseDecoration: BoxDecoration( // 容器的基本装饰
              borderRadius: BorderRadius.circular(20),
              gradient: const LinearGradient(
                  begin: Alignment.topRight,
                  end: Alignment.bottomLeft,
                  colors: [Colors.lightBlueAccent, Colors.teal]
              ),
            ),
            child: Center( // 子组件
              child: Text('Play', style: TextStyle(fontSize: 32, color: Colors.blue)),
            ),
          ),
        ),
      ),
    );
  }
}