Flutter界面美化插件glossy的使用

概述

glossy 是一个Flutter插件，允许你轻松地在你的Flutter应用中创建玻璃形态（glass morphism）效果。玻璃形态是一种设计趋势，涉及使用模糊、半透明的元素来创造类似磨砂玻璃的效果。

安装

要使用这个包，请在 pubspec.yaml 文件中添加 glossy 作为依赖项：

dependencies:
  flutter:
    sdk: flutter
  glossy: ^0.0.5

或者，在项目级别的终端中运行以下命令：

flutter pub add glossy

使用示例

你可以使用此包提供的 GlossyContainer 小部件来创建玻璃形态效果。下面是一个基本的例子：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          title: const Text('Glass Morphism Example'),
        ),
        body: Center(
          child: SizedBox(
            width: 300,
            height: 300,
            child: Stack(
              children: [
                Container(
                  height: 140,
                  width: 140,
                  decoration: BoxDecoration(
                      color: Colors.purple,
                      borderRadius: BorderRadius.circular(70)),
                ),
                Align(
                  alignment: Alignment.bottomRight,
                  child: Container(
                    height: 140,
                    width: 140,
                    decoration: BoxDecoration(
                        color: Colors.purple,
                        borderRadius: BorderRadius.circular(70)),
                  ),
                ),
                Align(
                  alignment: Alignment.center,
                  child: GlossyContainer(
                    width: 200,
                    height: 200,
                    borderRadius: BorderRadius.circular(12),
                    child: const Center(
                      child: Text(
                        'Glass Morphism',
                        style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

参数说明

• width: 容器的宽度，必需。
• height: 容器的高度，必需。
• borderRadius: 容器的圆角半径。
• blur: 应用于容器的模糊量。
• child: 放置在玻璃容器内的小部件。
• color: 容器的背景颜色。
• opacity: 容器的不透明度。
• strengthX: 水平方向上的模糊强度。
• strengthY: 垂直方向上的模糊强度。
• border: 容器的边框。
• blendMode: 应用滤镜时的混合模式。
• gradient: 容器的渐变色。
• boxShadow: 容器的阴影。
• image: 容器的背景图像。
• imageOpacity: 背景图像的不透明度。

支持与反馈

如果你觉得这个项目有帮助，并希望支持其开发，可以通过社交媒体与我联系：

• Twitter
• Instagram
• LinkedIn
• GitHub

你的支持和反馈将大大有助于进一步改进这个项目。