如何在顫振中做「磨砂玻璃」效果？

Question

我正在寫一個Flutter應用程序，我想使用/實現iOS上常見的「毛玻璃」效果。我該怎麼做呢？

Answer 1

您可以使用BackdropFilter widget來實現此效果。

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

void main() { 
    runApp(new MaterialApp(home: new FrostedDemo())); 
} 

class FrostedDemo extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     body: new Stack(
     children: <Widget>[ 
      new ConstrainedBox(
      constraints: const BoxConstraints.expand(), 
      child: new FlutterLogo() 
     ), 
      new Center(
      child: new ClipRect(
       child: new BackdropFilter(
       filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0), 
       child: new Container(
        width: 200.0, 
        height: 200.0, 
        decoration: new BoxDecoration(
        color: Colors.grey.shade200.withOpacity(0.5) 
       ), 
        child: new Center(
        child: new Text(
         'Frosted', 
         style: Theme.of(context).textTheme.display3 
        ), 
       ), 
       ), 
      ), 
      ), 
     ), 
     ], 
    ), 
    ); 
    } 
}