Flutter UI美化插件glassy_ui的使用

Flutter UI美化插件glassy_ui的使用

glassy_ui 是一个基于 iOS 风格玻璃拟态设计的 Flutter 小部件集合。通过使用这个库，你可以轻松地为你的 Flutter 应用添加美观的界面效果。

示例代码

以下是一个简单的示例，展示如何在 Flutter 中使用 GlassyContainer 小部件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Glassy UI 示例'),
        ),
        body: Center(
          child: GlassyContainer(
            width: 200,
            height: 200,
            borderRadius: BorderRadius.circular(20), // 设置圆角
            gradient: LinearGradient(
              colors: [Colors.blue.shade200, Colors.blue.shade400],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
            blurStrength: 10.0, // 设置模糊强度
            child: Center(
              child: Text(
                'Hello this is glassy',
                style: TextStyle(color: Colors.white, fontSize: 18),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter UI美化插件glassy_ui的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter UI美化插件glassy_ui的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


glassy_ui 是一个用于 Flutter 的 UI 美化插件，它可以帮助你轻松地创建具有玻璃模糊效果的 UI 组件。这种效果类似于 macOS 的毛玻璃效果，可以为你的应用增添现代感和美观性。

1. 安装 glassy_ui

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

dependencies:
  flutter:
    sdk: flutter
  glassy_ui: ^0.1.0 # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 使用 GlassyContainer

glassy_ui 提供了 GlassyContainer 组件，它可以让你轻松地创建具有玻璃模糊效果的容器。

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

class GlassyExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Glassy UI Example'),
      ),
      body: Center(
        child: GlassyContainer(
          width: 300,
          height: 200,
          child: Center(
            child: Text(
              'Hello, Glassy UI!',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

3. 自定义 GlassyContainer

你可以通过设置 GlassyContainer 的一些属性来自定义它的外观：

  • blur: 模糊强度，默认值为 10.0。
  • opacity: 不透明度，默认值为 0.5。
  • color: 背景颜色，默认值为 Colors.white.withOpacity(0.1)。
  • borderRadius: 圆角半径，默认值为 BorderRadius.circular(20)。
  • border: 边框，默认值为 Border.all(color: Colors.white.withOpacity(0.2))。
GlassyContainer(
  width: 300,
  height: 200,
  blur: 15.0,
  opacity: 0.7,
  color: Colors.blue.withOpacity(0.2),
  borderRadius: BorderRadius.circular(30),
  border: Border.all(color: Colors.white.withOpacity(0.3), width: 2),
  child: Center(
    child: Text(
      'Custom Glassy Container',
      style: TextStyle(
        color: Colors.white,
        fontSize: 24,
      ),
    ),
  ),
)

4. 使用 GlassyAppBar

glassy_ui 还提供了 GlassyAppBar，它可以让你创建一个具有玻璃模糊效果的 AppBar。

class GlassyAppBarExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: GlassyAppBar(
        title: Text('Glassy AppBar'),
        blur: 10.0,
        opacity: 0.5,
        color: Colors.blue.withOpacity(0.2),
      ),
      body: Center(
        child: Text('Content goes here'),
      ),
    );
  }
}

5. 使用 GlassyBackground

你可以使用 GlassyBackground 来创建一个具有玻璃模糊效果的背景。

class GlassyBackgroundExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: GlassyBackground(
        blur: 15.0,
        opacity: 0.7,
        color: Colors.blue.withOpacity(0.2),
        child: Center(
          child: Text(
            'Glassy Background',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
            ),
          ),
        ),
      ),
    );
  }
}
回到顶部