Wie mache ich den "Mattglas" -Effekt in Flutter?

Question

Ich schreibe eine Flattern-App, und ich möchte den "Milchglas" -Effekt, der auf iOS üblich ist, verwenden/implementieren. Wie mache ich das?

Answer 1

Sie können den BackdropFilter widget verwenden, um diesen Effekt zu erzielen.

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