flutter 中實現磨砂玻璃效果

前言

磨砂玻璃效果是一個很酷的用戶界面概念，使我們的用戶界面看起來更有吸引力。它基本上是一個模糊的覆蓋與減少不透明度，以區分或減少某一觀點。這個功能看起來確實不錯，但是它會影響應用程序的性能。

正文

那么，讓我們看看如何在 Flutter 中實現磨砂玻璃效果。

編寫代碼

通過使用 BackdroFilter () widget 和 ImageFilter 類，可以非常容易地在 Flutter 中實現它。用于模糊圖像、 container 或許多其他 widget 。它可以在 iOS 和 android 上運行。它用于突出需要更多焦點的內容，模糊需要較少焦點的內容。

創建一個 container 并使用 BackdroFilter 和 ClipRect 將其包裝起來。現在添加背景濾鏡的屬性: ImageFilter.素，然后添加 sigmaX，sigmaY。SigmaX 和 sigmaY 越高，模糊度越高。

import?'dart:ui';
import?'package:flutter/material.dart';

class?FrostedGlassLookDemo?extends?StatefulWidget?{
??const?FrostedGlassLookDemo({super.key});
??@override
??@override_FrostedGlassLookDemoState
??createState()?=>?_FrostedGlassLookDemoState();
}

class?_FrostedGlassLookDemoState?extends?State<FrostedGlassLookDemo>?{
??@override
??@overrideWidget
??build(BuildContext?context)?{
????return?Scaffold(
??????backgroundColor:?Colors.white,
??????appBar:?AppBar(
????????elevation:?1,
????????centerTitle:?true,
????????title:?const?Text("Frosted?Glass?Look?Demo"),
????????backgroundColor:?Colors.blueGrey,
??????),
??????body:?Stack(
????????children:?[
??????????Center(
??????????????child:?Container(
????????????height:?MediaQuery.of(context).size.height?/?3,
????????????width:?MediaQuery.of(context).size.width?/?1,
????????????decoration:?BoxDecoration(
??????????????borderRadius:?BorderRadius.circular(20.0),
????????????),
????????????child:?const?FlutterLogo(),
??????????)),
??????????Center(
????????????child:?ClipRect(
??????????????child:?BackdropFilter(
????????????????filter:?ImageFilter.blur(sigmaX:?10.0,?sigmaY:?10.0),
????????????????child:?Container(
??????????????????height:?MediaQuery.of(context).size.height?/?3,
??????????????????width:?MediaQuery.of(context).size.width?/?1.5,
??????????????????decoration:?BoxDecoration(
??????????????????????borderRadius:?BorderRadius.circular(20.0),
??????????????????????color:?Colors.grey.shade200.withOpacity(0.5)),
??????????????????child:?const?Center(
??????????????????????child:?Text(
????????????????????"Glass?Effect?Container",
????????????????????style:?TextStyle(fontSize:?15),
??????????????????)),
????????????????),
??????????????),
????????????),
??????????),
????????],
??????),
????);
??}
}

輸出效果

注意: 我將這個 widget 塊堆疊在一個 Image 上方，以查看工作效果。我用 Flutter 的標志作為一個圖像。現在，我們可以看到我們的圖像模糊效果。

結束語

如果本文對你有幫助，請轉發讓更多的朋友閱讀。

也許這個操作只要你 3 秒鐘，對我來說是一個激勵，感謝。

祝你有一個美好的一天~

---

? 貓哥

• 微信 ducafecat

• https://wiki.ducafecat.tech

• https://video.ducafecat.tech

本文由 mdnice 多平臺發布

總結

以上是生活随笔為你收集整理的flutter 中实现磨砂玻璃效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。