flutter實現(xiàn)磨砂玻璃效果實例詳解

更新時間：2022年11月08日 11:08:40 作者：會煮咖啡的貓

這篇文章主要為大家介紹了flutter實現(xiàn)磨砂玻璃效果實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

flutter 中實現(xiàn)磨砂玻璃效果

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

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

編寫代碼

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

創(chuàng)建一個 container 并使用 BackdroFilter 和 ClipRect 將其包裝起來?，F(xiàn)在添加背景濾鏡的屬性: 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),
                  )),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}