Flutter磨砂玻璃效果插件frosted_glass_effect的使用
Flutter磨砂玻璃效果插件frosted_glass_effect的使用
插件描述
此插件提供磨砂玻璃效果给到Widget、图片和简单的容器。
特性
- 简单的磨砂玻璃效果。
- 带有背景图片的磨砂玻璃效果。
- 可以使用任何子Widget，类似于Container（使用无背景色）。
- 带有背景颜色的磨砂玻璃效果。
示例演示
import 'package:flutter/material.dart';
import 'package:frosted_glass_effect/frosted_glass_effect.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// 这个Widget是应用的根。
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({required this.title});
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
backgroundColor: Colors.white,
title: Text(widget.title),
),
body: Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 示例1：带有背景颜色的磨砂玻璃效果
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Expanded(
child: GlassContainer(
radius: 20,
backgroundColor: Colors.red,
widget: Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
child: const Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text("\$1/mo", style: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold)),
Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Spacer(),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text("PRO", style: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.normal)),
Text("On Sale Now!", style: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold))
],
)
],
)
],
),
),
),
),
),
],
),
),
// 示例2：限制GlassContainer宽度
SizedBox(
width: 300,
child: GlassContainer(
// backgroundImage: "assets/bg.jpg",
backgroundColor: Colors.red,
widget: Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
height: 200,
// width: 200,
child: const Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text("\$1/mo", style: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold)),
Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Spacer(),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text("PRO", style: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.normal)),
Text("On Sale Now!", style: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold))
],
)
],
)
],
),
),
),
radius: 20,
),
),
const SizedBox(
height: 20,
),
// 示例3：带有背景图片的磨砂玻璃效果
const GlassContainer(
backgroundImage: "assets/bg.jpg",
widget: Text("Image"),
),
],
),
),
),
),
);
}
}
使用说明
-
在
pubspec.yaml文件中添加依赖：dependencies: frosted_glass_effect: ^0.0.1 -
导入插件：
import 'package:frosted_glass_effect/frosted_glass_effect.dart'; -
使用
GlassContainer类创建磨砂玻璃效果。该类接受以下参数：widget: 要显示的子Widget。radius: 磨砂玻璃的半径。height,width: 容器的高度和宽度。backgroundImage: 背景图片路径。backgroundColor: 背景颜色。
-
示例1：带有背景颜色的磨砂玻璃效果
Padding( padding: const EdgeInsets.all(8.0), child: Row( children: [ Expanded( child: GlassContainer( radius: 20, backgroundColor: Colors.red, widget: Padding( padding: const EdgeInsets.all(20.0), child: Container( child: const Column( mainAxisAlignment: MainAxisAlignment.start, children: [ Text("\$16/mo", style: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold)), Spacer(), Row( mainAxisAlignment: MainAxisAlignment.end, children: [ Spacer(), Column( crossAxisAlignment: CrossAxisAlignment.end, children: [ Text("PRO", style: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.normal)), Text("On Sale Now!", style: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold)) ], ) ], ) ], ), ), ), ), ), ], ), ), -
示例2：限制GlassContainer宽度
SizedBox( width: 300, child: GlassContainer( // backgroundImage: "assets/bg.jpg", backgroundColor: Colors.red, widget: Padding( padding: const EdgeInsets.all(20.0), child: Container( height: 200, // width: 200, child: const Column( mainAxisAlignment: MainAxisAlignment.start, children: [ Text("\$16/mo", style: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold)), Spacer(), Row( mainAxisAlignment: MainAxisAlignment.end, children: [ Spacer(), Column( crossAxisAlignment: CrossAxisAlignment.end, children: [ Text("PRO", style: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.normal)), Text("On Sale Now!", style: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold)) ], ) ], ) ], ), ), ), radius: 20, ), ), -
示例3：带有背景图片的磨砂玻璃效果
const GlassContainer( backgroundImage: "assets/bg.jpg", widget: Text("Image"), )
更多关于Flutter磨砂玻璃效果插件frosted_glass_effect的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter磨砂玻璃效果插件frosted_glass_effect的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何在Flutter中使用frosted_glass_effect插件来实现磨砂玻璃效果的代码案例。这个插件可以帮助你轻松地在Flutter应用中创建模糊背景效果。
首先，确保你已经在pubspec.yaml文件中添加了frosted_glass_effect依赖：
dependencies:
flutter:
sdk: flutter
frosted_glass_effect: ^x.y.z # 请将x.y.z替换为当前最新版本号
然后运行flutter pub get来安装依赖。
接下来是一个简单的示例，展示如何使用FrostedGlass小部件来创建一个磨砂玻璃效果：
import 'package:flutter/material.dart';
import 'package:frosted_glass_effect/frosted_glass_effect.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Frosted Glass Effect Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: FrostedGlassDemo(),
);
}
}
class FrostedGlassDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[900],
appBar: AppBar(
title: Text('Frosted Glass Effect Demo'),
centerTitle: true,
backgroundColor: Colors.transparent,
elevation: 0,
),
body: Stack(
children: [
// 背景图片或颜色
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/background.jpg'), // 替换为你的背景图片
fit: BoxFit.cover,
),
),
),
// Frosted Glass Effect
Positioned.fill(
child: FrostedGlass(
blur: 20, // 模糊级别
sigmaX: 10, // 水平模糊程度
sigmaY: 10, // 垂直模糊程度
child: Container(
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.5), // 半透明覆盖层
),
child: Center(
child: Text(
'Hello, Frosted Glass!',
style: TextStyle(
color: Colors.black,
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
),
),
),
],
),
);
}
}
在这个示例中，我们创建了一个包含背景图片和磨砂玻璃效果的页面。背景图片通过Container的BoxDecoration设置，磨砂玻璃效果则通过FrostedGlass小部件实现。FrostedGlass小部件接受几个参数来控制模糊效果，例如blur、sigmaX和sigmaY。在这个例子中，我们还添加了一个半透明的白色覆盖层，并在其上放置了一些文本。
请注意，你需要确保在assets文件夹中有一个名为background.jpg的图片文件，或者替换为你自己的背景图片资源。
这个示例展示了如何使用frosted_glass_effect插件来创建一个基本的磨砂玻璃效果。你可以根据需要进一步调整参数和布局来适应你的应用设计。
