Flutter玻璃模糊效果插件flutter

Flutter玻璃模糊效果插件`flutter_glassmorpism`的使用

特性

该插件旨在在您的Flutter应用中实现玻璃模糊效果。这是一种新的现代设计UI/UX实现方式。此插件包含多个可使用的组件（如容器、按钮、卡片、开关、下拉菜单、选项卡栏、抽屉等）。您可以在Flutter应用中的任何位置使用它。

安装

将插件的最新版本添加到pubspec.yaml文件中（并运行dart pub get）：

dependencies:
  flutter_glassmorpism: ^0.0.1

导入插件并在您的Flutter应用中使用：

import 'package:flutter_glassmorpism/flutter_glassmorpism.dart';

示例

您可以修改多个属性，例如：

height
width
padding
margin
radius
border
backgroundColor

示例代码

class GlassmorphicContainer extends StatelessWidget {
  final double? width; // 宽度
  final double? height; // 高度
  final double? padding; // 内边距
  final double? margin; // 外边距
  final double? radius; // 圆角半径
  final double? border; // 边框宽度
  final Color? backgroundColor; // 背景颜色
  final Widget child; // 子部件

  const GlassmorphicContainer({
    Key? key,
    this.width = 200, // 默认宽度为200
    this.height = 200, // 默认高度为200
    this.padding = 10, // 默认内边距为10
    this.margin = 10, // 默认外边距为10
    required this.child, // 子部件是必需的
    this.radius = 10, // 默认圆角半径为10
    this.border = 1, // 默认边框宽度为1
    this.backgroundColor = Colors.white, // 默认背景颜色为白色
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3), // 应用模糊效果
      child: Container(
        padding: EdgeInsets.all(padding!), // 设置内边距
        margin: EdgeInsets.all(margin!), // 设置外边距
        width: width!, // 设置宽度
        height: height!, // 设置高度
        decoration: BoxDecoration(
          border: Border.all(
              width: border!, color: backgroundColor!.withOpacity(0.3)), // 设置边框
          color: backgroundColor!.withOpacity(0.4), // 设置背景颜色
          borderRadius: BorderRadius.circular(radius!), // 设置圆角半径
        ),
        child: child, // 子部件
      ),
    );
  }
}

更多关于Flutter玻璃模糊效果插件flutter_glassmorpism的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

wuwangju 1楼•1 个月前

更多关于Flutter玻璃模糊效果插件flutter_glassmorpism的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

flutter_glassmorphism 是一个用于在 Flutter 中实现玻璃模糊效果的插件。它可以帮助你轻松地创建类似于 macOS 或 iOS 的毛玻璃效果。以下是如何使用 flutter_glassmorphism 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_glassmorphism 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  flutter_glassmorphism: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 flutter_glassmorphism 包。

import 'package:flutter_glassmorphism/flutter_glassmorphism.dart';

3. 使用 `GlassmorphicContainer`

GlassmorphicContainer 是 flutter_glassmorphism 提供的一个小部件，用于创建带有玻璃模糊效果的容器。

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Glassmorphism Example'),
      ),
      body: Center(
        child: GlassmorphicContainer(
          width: 300,
          height: 200,
          borderRadius: 20,
          blur: 20,
          alignment: Alignment.center,
          border: 2,
          linearGradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Color(0xFFffffff).withOpacity(0.1),
                Color(0xFFFFFFFF).withOpacity(0.05),
              ],
              stops: [
                0.1,
                1,
              ]),
          borderGradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              Color(0xFFffffff).withOpacity(0.5),
              Color((0xFFFFFFFF)).withOpacity(0.5),
            ],
          ),
          child: Center(
            child: Text(
              'Hello, Glassmorphism!',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Flutter玻璃模糊效果插件flutter_glassmorpism的使用