Flutter磨砂玻璃效果制作

Flutter的Fliter Widget 也是非常強大的，它可以制作出你想要的神奇濾鏡效果。下面制作一個毛玻璃效果。

這個和以前的寫法都一樣，所以就直接貼代碼了。

import 'package:flutter/material.dart';
import 'dart:ui';   //引入ui庫，因為ImageFilter Widget在這個里邊。

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'Flutter Demo',
      theme:ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:Scaffold(
        body:FrostedGlassDemo(),
      )
    );
  }
}

class FrostedGlassDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Stack(   //重疊的Stack Widget，實現重貼
        children: <Widget>[
          ConstrainedBox( //約束盒子組件，添加額外的限制條件到 child上。
            constraints: const BoxConstraints.expand(), //限制條件，可擴展的。
            child:Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545738629147&di=22e12a65bbc6c4123ae5596e24dbc5d3&imgtype=0&src=http%3A%2F%2Fpic30.photophoto.cn%2F20140309%2F0034034413812339_b.jpg')
          ),
          Center(
            child: ClipRect(  //裁切長方形
              child: BackdropFilter(   //背景濾鏡器
                filter: ImageFilter.blur(sigmaX: 5.0,sigmaY: 5.0), //圖片模糊過濾，橫向豎向都設置5.0
                child: Opacity( //透明控件
                  opacity: 0.5,
                  child: Container(// 容器組件
                    width: 500.0,
                    height: 500.0,
                    decoration: BoxDecoration(color:Colors.grey.shade200), //盒子裝飾器，進行裝飾，設置顏色為灰色
                    child: Center(
                      child: Text(
                        'JSPang',
                        style: Theme.of(context).textTheme.display3, //設置比較酷炫的字體
                      ),
                    ),
                  ),
                ),
              ),
            ),
          )
        ],
      )
    );
  }
}

這個代碼嵌套很多，所以一定要注意你的代碼層次，容易出錯的地方就是嵌套錯誤。這個效果盡量少用，因為測試了一下，它對系統的消耗還是比較大的。