flutter-毛玻璃的效果(很消耗性能)


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

class FrostedClassDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack( //層疊組件
        children: <Widget>[
          ConstrainedBox( //約束性盒子 添加額外的約束條件  約束child
            constraints: const BoxConstraints.expand(),//限制條件,意思就是隨着里面的東西進行擴展
            child: Image.asset('images/1111.jpg'),
          ),
          Center(
            child: ClipRRect( //可裁切的矩形
              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
                    ),
                    child: Center(
                      child: Text('JS123',style: Theme.of(context).textTheme.display3,),
                    ),
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

效果

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM