20個Flutter實例視頻教程-第07節: 毛玻璃效果製做

視頻地址：

https://www.bilibili.com/video/av39709290/?p=7

博客地址：

https://jspang.com/post/flutterDemo.html#toc-65a

建立demo04

 

flutter從1.0 開始就鼓勵你們使用類的不用再寫前面的 New關鍵字了

例如原來new MyAp();如今直接 MyApp();就能夠了

 

新建 frosted_glass_demo.dart

 

 

 

stack是層疊組件把咱們的圖片毛玻璃都重疊在一塊兒

 

咱們使用的網絡圖片地址：

https://wx3.sinaimg.cn/mw690/006OBeunly1g1cndu1l5dj30zk0nmgnu.jpg

 

 

最終代碼：

 

import 'package:flutter/material.dart';
import 'frosted_glass_demo.dart';

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

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

main.dart

 

 

 

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

class FrostedGlassDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          ConstrainedBox(//約束盒子widget 添加額外的約束條件child上
            constraints: const BoxConstraints.expand(),//條件就是隨着裏面的東西進行擴展
            child: Image.network('https://wx3.sinaimg.cn/mw690/006OBeunly1g1cndu1l5dj30zk0nmgnu.jpg'),
          ),
          Center(
            child: ClipRect(//可裁切的矩形
              child: BackdropFilter(//背景過濾器
                filter: ImageFilter.blur(sigmaX: 5.0,sigmaY: 5.0),//圖片過濾器
                child: Opacity(//透明度
                  opacity: 0.5,
                  child: Container(
                    width: 500.0,
                    height: 700.0,
                    decoration: BoxDecoration(color: Colors.grey.shade200),//盒子修飾器
                    child:Center(
                     child: Text(
                       'WJW HAHA',
                       style: Theme.of(context).textTheme.display3,
                     ),
                    )
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

frosted_glass_demo.dart