Flutter玻璃效果（Glassmorphism）实现插件glassmorphism_kit的使用
Flutter玻璃效果（Glassmorphism）实现插件glassmorphism_kit的使用
glassmorphism_kit 是一个用于在Flutter中轻松创建玻璃效果（Glassmorphism）UI设计的插件。它支持iOS、Android和Web平台。通过该插件，你可以快速实现带有模糊背景和半透明效果的组件，如容器、圆形、胶囊形、抽屉等。
插件功能展示
| GlassWidget | GlassCard Demo |
|---|---|
 |
 |
| GlassBar | GlassDrawer |
|---|---|
 |
 |
主要组件介绍
1. GlassContainer
GlassContainer 是一个带有模糊背景和半透明效果的容器。你可以通过设置 blurStrengthX 和 blurStrengthY 来控制模糊强度，通过 colorOpacity 控制透明度。
import 'package:glassmorphism_kit/glassmorphism_kit.dart';
GlassContainer(
alignment: Alignment.center,
child: Text(
'Container',
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
color: Colors.white,
colorOpacity: 0.1, // 透明度
blurStrengthX: 10, // 水平模糊强度
blurStrengthY: 10, // 垂直模糊强度
borderRadius: BorderRadius.all(Radius.circular(15)), // 圆角
width: 290,
height: 180,
)
2. GlassCircle
GlassCircle 是一个圆形的玻璃效果组件，适用于需要圆形背景的场景。
import 'package:glassmorphism_kit/glassmorphism_kit.dart';
GlassCircle(
child: Center(
child: Text(
'Circle',
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
),
)
3. GlassCapsule
GlassCapsule 是一个胶囊形状的玻璃效果组件，适用于按钮或卡片等场景。
import 'package:glassmorphism_kit/glassmorphism_kit.dart';
GlassCapsule(
width: 300,
child: Center(
child: Text(
'Capsule',
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
),
)
4. GlassDrawer
GlassDrawer 是一个带有玻璃效果的抽屉组件，适用于侧边栏菜单等场景。
import 'package:glassmorphism_kit/glassmorphism_kit.dart';
GlassDrawer(
color: Colors.white,
colorOpacity: 0.1,
child: Padding(
padding: const EdgeInsets.all(13.0),
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'GlassDrawer',
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
],
),
),
),
)
完整示例Demo
以下是一个完整的示例代码，展示了如何在Flutter项目中使用 glassmorphism_kit 插件来创建带有玻璃效果的UI组件。
import 'package:flutter/material.dart';
import 'package:glassmorphism_kit/glassmorphism_kit.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Glassmorphism Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: WidgetDemo(),
);
}
}
class WidgetDemo extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Container(
constraints: BoxConstraints.expand(),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/4.jpg"), // 请确保你有这张图片
fit: BoxFit.cover,
),
),
child: SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(height: 10),
// GlassContainer 示例
GlassContainer(
alignment: Alignment.center,
child: Text(
'Container',
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
color: Colors.white,
colorOpacity: 0.1,
blurStrengthX: 10,
blurStrengthY: 10,
borderRadius: BorderRadius.all(Radius.circular(15)),
width: 290,
height: 180,
),
SizedBox(height: 10),
// GlassCircle 示例
GlassCircle(
child: Center(
child: Text(
'Circle',
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
),
),
SizedBox(height: 10),
// GlassCapsule 示例
GlassCapsule(
width: 300,
child: Center(
child: Text(
'Capsule',
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
),
),
SizedBox(height: 10),
// GlassBotton 示例
GlassButton(
alignment: Alignment.center,
height: 80,
child: Text(
'Tap Me',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
width: 200,
onTap: () {},
borderRadius: BorderRadius.circular(15),
border: Border.all(
color: Colors.white.withOpacity(0.6),
),
),
],
),
),
),
),
),
);
}
}
class DrawerDemo extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
GlobalKey<ScaffoldState> _drawerKey = GlobalKey();
return SafeArea(
child: Scaffold(
key: _drawerKey,
drawer: GlassDrawer(
color: Colors.white,
colorOpacity: 0.1,
child: Padding(
padding: const EdgeInsets.all(13.0),
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'Hi',
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
Text(
'GlassDrawer',
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
],
),
),
),
),
body: Container(
constraints: BoxConstraints.expand(),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/1.jpg"), // 请确保你有这张图片
fit: BoxFit.cover,
),
),
child: Stack(
children: [
GlassBar(
actions: [
Icon(
Icons.settings,
color: Colors.white,
),
SizedBox(width: 10),
],
title: Text(
'Home',
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
colorOpacity: 0.2,
color: Colors.white,
leading: IconButton(
icon: Icon(
Icons.menu,
color: Colors.white,
),
onPressed: () {
_drawerKey.currentState.openDrawer();
},
),
height: 55,
blurStrengthY: 10,
blurStrengthX: 10,
),
],
),
),
),
);
}
}
class DemoCard extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Container(
child: Stack(
children: [
Positioned(
top: 50,
left: 10,
child: GlassCircle(
child: Text("Hi"),
color: Colors.amber,
colorOpacity: 1,
radius: 100,
),
),
Positioned(
top: 250,
right: 5,
child: GlassCircle(
child: Text("HI"),
color: Colors.blue[900],
colorOpacity: 1,
radius: 90,
),
),
Positioned(
top: 110,
left: 30,
child: GlassContainer(
child: Stack(
children: [
Positioned(
top: 55,
left: 20,
child: Text(
'2525 1212 1111 0000',
style: TextStyle(
color: Colors.white.withOpacity(0.9),
fontSize: 25,
),
),
),
Positioned(
top: 90,
left: 20,
child: Text(
'12/24',
style: TextStyle(
color: Colors.white.withOpacity(0.9),
fontSize: 25,
),
),
),
Positioned(
bottom: 30,
right: 20,
child: Text(
'VISA',
style: TextStyle(
color: Colors.white.withOpacity(0.9),
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
),
],
),
border: Border.all(
color: Colors.white.withOpacity(0.6),
),
height: 180,
width: 300,
color: Colors.white,
blurStrengthY: 10,
blurStrengthX: 10,
colorOpacity: 0.2,
borderRadius: BorderRadius.circular(15),
),
)
],
),
constraints: BoxConstraints.expand(),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/1.jpg"), // 请确保你有这张图片
fit: BoxFit.cover,
),
),
),
),
);
}
}
更多关于Flutter玻璃效果（Glassmorphism）实现插件glassmorphism_kit的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter玻璃效果（Glassmorphism）实现插件glassmorphism_kit的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter中使用glassmorphism_kit插件来实现玻璃效果的代码示例。glassmorphism_kit 是一个流行的 Flutter 插件，它提供了简便的方法来创建玻璃效果的用户界面组件。
首先，确保你已经在 pubspec.yaml 文件中添加了 glassmorphism_kit 依赖：
dependencies:
flutter:
sdk: flutter
glassmorphism_kit: ^x.y.z # 请将 `x.y.z` 替换为最新版本号
然后运行 flutter pub get 来安装依赖。
接下来，在你的 Flutter 应用中使用 glassmorphism_kit 来创建玻璃效果。以下是一个简单的示例，展示了如何使用 GlassContainer 来创建一个带有玻璃效果的容器：
import 'package:flutter/material.dart';
import 'package:glassmorphism_kit/glassmorphism_kit.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 Demo'),
),
body: Center(
child: GlassContainer(
blur: 10.0,
opacity: 0.6,
borderRadius: BorderRadius.circular(20.0),
elevation: 4.0,
child: Container(
width: 300,
height: 200,
color: Colors.white.withOpacity(0.2), // 半透明背景，以突出玻璃效果
child: Center(
child: Text(
'Glassmorphism Effect',
style: TextStyle(color: Colors.black, fontSize: 24),
),
),
),
),
),
);
}
}
代码说明：
-
依赖导入：
- 导入
glassmorphism_kit包。
- 导入
-
GlassmorphismDemo类：- 使用
GlassContainer组件来创建一个玻璃效果的容器。 blur属性设置模糊半径。opacity属性设置透明度。borderRadius属性设置容器的圆角。elevation属性设置阴影高度。- 内部包含一个带有半透明背景的
Container，以及一个居中的文本。
- 使用
运行这个示例代码，你会看到一个带有玻璃效果的容器，其中包含文本 “Glassmorphism Effect”。
你可以根据需要调整 blur、opacity、borderRadius 和 elevation 等属性，以实现不同的玻璃效果。希望这个示例对你有所帮助！
