Flutter视觉增强插件glass_kit的使用

目录

• 关于
• 开始使用
• 用法
• 示例代码

关于

GlassMorphism 是一种新的UI趋势，深受设计师的喜爱。glass_kit 提供了多种小部件和其他元素，以轻松且高效地在Flutter应用程序中实现这种风格。

图库

iOS风格的玻璃形态	卡片中的玻璃形态

源代码可以在这里找到。

开始使用

要在项目中使用 glass_kit，首先需要将其添加到项目的 pubspec.yaml 文件中：

dependencies:
  glass_kit: ^4.0.1

然后运行以下命令来获取包：

flutter packages get

接下来，在Dart文件中导入该包：

import 'package:glass_kit/glass_kit.dart';

用法

glass_kit 提供了两种构造函数来创建玻璃容器：clearGlass 和 frostedGlass。如果需要，可以提供 height 和 width 参数。

创建透明玻璃容器

GlassContainer.clearGlass(child: Child());

创建磨砂玻璃容器

GlassContainer.frostedGlass(width: 300, child: Child());

完全自定义的玻璃容器

你也可以使用 GlassContainer 构造函数来创建完全自定义的玻璃容器。例如，创建一个圆形的玻璃容器：

GlassContainer(
  height: 300,
  width: 400,
  gradient: LinearGradient(
    colors: [Colors.white.withOpacity(0.40), Colors.white.withOpacity(0.10)],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  borderGradient: LinearGradient(
    colors: [
      Colors.white.withOpacity(0.60),
      Colors.white.withOpacity(0.10),
      Colors.lightBlueAccent.withOpacity(0.05),
      Colors.lightBlueAccent.withOpacity(0.6),
    ],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    stops: [0.0, 0.39, 0.40, 1.0],
  ),
  blur: 15.0,
  borderWidth: 1.5,
  elevation: 3.0,
  isFrostedGlass: true,
  shadowColor: Colors.black.withOpacity(0.20),
  alignment: Alignment.center,
  frostedOpacity: 0.12,
  margin: EdgeInsets.all(8.0),
  padding: EdgeInsets.all(8.0),
);

注意：GlassContainer 的属性与常规 Container 类似，但有一些例外和附加属性。更多详情请参阅文档。

示例代码

下面是一个完整的示例代码，展示了如何在应用中使用 glass_kit：

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

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

class GlassKitApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black87,
      body: Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/bg_1.jpg'),
            fit: BoxFit.cover,
          ),
        ),
        child: GlassContainer(
          height: 200,
          width: 350,
          gradient: LinearGradient(
            colors: [
              Colors.white.withOpacity(0.40),
              Colors.white.withOpacity(0.10),
            ],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
          borderGradient: LinearGradient(
            colors: [
              Colors.white.withOpacity(0.60),
              Colors.white.withOpacity(0.10),
              Colors.purpleAccent.withOpacity(0.05),
              Colors.purpleAccent.withOpacity(0.60),
            ],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            stops: [0.0, 0.39, 0.40, 1.0],
          ),
          blur: 20,
          borderRadius: BorderRadius.circular(24.0),
          borderWidth: 1.0,
          elevation: 3.0,
          isFrostedGlass: true,
          shadowColor: Colors.purple.withOpacity(0.20),
        ),
      ),
    );
  }
}

这个示例代码创建了一个带有背景图像的页面，并在其上放置了一个磨砂玻璃效果的容器。你可以根据自己的需求调整容器的属性，以实现不同的视觉效果。