Flutter玻璃模糊效果插件flutter_glassmorpism的使用
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
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,
),
),
),
),
),
);
}
}