Làm cách nào để thực hiện hiệu ứng "kính mờ" trong Rung?

Question

Tôi đang viết ứng dụng Rung và tôi muốn sử dụng/triển khai hiệu ứng "kính mờ" phổ biến trên iOS. Làm thế nào để tôi làm điều này?

Answer 1

Bạn có thể sử dụng BackdropFilter widget để đạt được hiệu ứng này.

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 
        ), 
       ), 
       ), 
      ), 
      ), 
     ), 
     ], 
    ), 
    ); 
    } 
}