Flutterで「曇りガラス」効果をどうやって行うのですか？

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