Flutter玻璃态效果插件glassmorphism_ui的使用

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

Flutter玻璃态效果插件glassmorphism_ui的使用

glassmorphism_ui

glassmorphism_ui 插件用于创建具有磨砂玻璃效果的设计。通过 GlassContainer 组件，您可以完全自定义容器的透明度、模糊度、边框和圆角等属性。

示例图片

入门指南

GlassContainer

GlassContainer 是一个可以创建磨砂玻璃效果的容器组件，以下是它的基本用法：

GlassContainer(
  height: 200,
  width: 200,
  blur: 4,
  color: Colors.white.withOpacity(0.1),
  gradient: LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [
      Colors.white.withOpacity(0.2),
      Colors.blue.withOpacity(0.3),
    ],
  ),
  border: Border.fromBorderSide(BorderSide.none),
  shadowStrength: 5,
  shape: BoxShape.circle,
  borderRadius: BorderRadius.circular(16),
  shadowColor: Colors.white.withOpacity(0.24),
)

GlassImage

GlassImage 是一个带有磨砂玻璃覆盖层的图像组件，下面是它的用法：

GlassImage(
  height: 200,
  width: 200,
  blur: 4,
  image: Image.network(
    "link",
    fit: BoxFit.cover,
  ),
  overlayColor: Colors.white.withOpacity(0.1),
  gradient: LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [
      Colors.white.withOpacity(0.2),
      Colors.blue.withOpacity(0.3),
    ],
  ),
  border: Border.fromBorderSide(BorderSide.none),
  shadowStrength: 5,
  borderRadius: BorderRadius.circular(16),
  shadowColor: Colors.white.withOpacity(0.24),
)

如果您只想模糊图像，可以使用 BlurredImage 组件：

ClipRect(
  child: BlurredImage(
    image: Image.network(
      "link",
      fit: BoxFit.cover,
    ),
  ),
)

或者使用扩展方法来模糊图像：

Image.network(
  "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",
  fit: BoxFit.cover,
).blur(blur: 4),

// Clip blur area
Image.network(
  "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",
  fit: BoxFit.cover,
).blurClipped(blur: 4),

Blur

Blur 组件用于仅模糊其子组件：

Blur(blur: 4, child: Text("Glassmorphism")),

//extension method
Text("Glassmorphism").blur(blur: 4),

示例代码

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

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              Colors.blue,
              Colors.pink,
            ],
          ),
        ),
        child: Center(
          child: Stack(
            children: [
              Container(
                child: Center(
                  child: Text(
                    "Glassmorphism",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 40,
                    ),
                  ),
                ),
              ),
              GlassImage(
                height: 200,
                width: 200,
                blur: 4,
                image: Image.network(
                  "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",
                  fit: BoxFit.cover,
                ),
                overlayColor: Colors.white.withOpacity(0.1),
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    Colors.white.withOpacity(0.2),
                    Colors.blue.withOpacity(0.3),
                  ],
                ),
                border: Border.fromBorderSide(BorderSide.none),
                shadowStrength: 5,
                borderRadius: BorderRadius.circular(16),
                shadowColor: Colors.white.withOpacity(0.24),
              ),
              Image.network(
                "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",
                fit: BoxFit.cover,
              ).blur(blur: 4),
              Blur(blur: 4, child: Text("Glassmorphism")),
              Image.network(
                "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",
                fit: BoxFit.cover,
              ).blurClipped(blur: 4),
              Center(
                child: ClipRect(
                  child: BlurredImage(
                    image: Image.network(
                      "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以上代码展示了如何在Flutter应用中使用 glassmorphism_ui 插件的各种组件来创建具有磨砂玻璃效果的界面。希望这些信息对您有所帮助！


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用glassmorphism_ui插件来实现玻璃态效果的示例代码。glassmorphism_ui是一个Flutter插件，用于创建具有玻璃效果的UI组件。

首先，你需要在你的pubspec.yaml文件中添加glassmorphism_ui依赖：

dependencies:
  flutter:
    sdk: flutter
  glassmorphism_ui: ^latest_version  # 请替换为实际的最新版本号

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

接下来，你可以在你的Flutter项目中使用Glassmorphism组件。以下是一个简单的示例，展示了如何创建一个带有玻璃效果的卡片：

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

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

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

class GlassmorphismDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Glassmorphism UI Demo'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: GlassCard(
            blur: 10,
            opacity: 0.6,
            color: Colors.white.withOpacity(0.7),
            borderRadius: 20,
            elevation: 10,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'Glassmorphism Card',
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                ),
                SizedBox(height: 16),
                Text(
                  'This is a demo of glassmorphism effect using glassmorphism_ui plugin.',
                  style: TextStyle(fontSize: 16),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class GlassCard extends StatelessWidget {
  final double blur;
  final double opacity;
  final Color color;
  final double borderRadius;
  final double elevation;
  final Widget child;

  GlassCard({
    required this.blur,
    required this.opacity,
    required this.color,
    required this.borderRadius,
    required this.elevation,
    required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(borderRadius),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 5,
            blurRadius: blur,
            offset: Offset(0, elevation),
          ),
        ],
      ),
      foregroundDecoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.transparent, Colors.transparent],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
      ),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
        child: Opacity(
          opacity: opacity,
          child: child,
        ),
      ),
    );
  }
}

注意：上面的GlassCard组件并不是glassmorphism_ui插件的一部分，而是手动实现的一个玻璃效果卡片，用于展示如何结合Flutter的基本组件和效果来实现玻璃态。实际上，glassmorphism_ui插件可能提供了一些更方便的封装和组件，你可以参考其文档直接使用。

如果你发现glassmorphism_ui插件提供了特定的组件或函数来简化这个过程，你应该直接使用它们，而不是像我上面那样手动实现。不过，上面的代码示例可以帮助你理解玻璃效果是如何在Flutter中实现的。

确保查阅glassmorphism_ui的官方文档以获取最新的使用方法和组件。

回到顶部