我如何做“磨砂玻璃”？颤振效果？ [英] How do I do the "frosted glass" effect in Flutter?

问题描述

我正在编写Flutter应用，我想使用/实现iOS上常见的毛玻璃效果。我该怎么做？

解决方案

您可以使用

  import'dart：ui'; 
导入的 package：flutter / material.dart； 
 
 void main（）{
 runApp（new MaterialApp（home：new FrostedDemo（）））; 
} 
 
类FrostedDemo扩展了StatelessWidget {
 @override 
 Widget build（BuildContext context）{
 return new Scaffold（
 body：new Stack（
子项：< Widget> [
新的ConstrainedBox（
约束：const BoxConstraints.expand（），
子项：new FlutterLogo（）
），
 new Center（
子项：new ClipRect（
子项：new BackdropFilter（
过滤器：new ImageFilter.blur（sigmaX：10.0，sigmaY：10.0），
子项： new Container（
宽度：200.0，
高度：200.0，
装饰：new BoxDecoration（
颜色：Colors.grey.shade200.withOpacity（0.5）
）， 
孩子：new Center（
孩子：new Text（
'Frosted'，
 style：Theme.of（c ontext）.textTheme.display3 
），
），
），
），
），
），
]，
），
）； 
} 
} 
  

I'm writing a Flutter app, and I'd like to use/implement the "frosted glass" effect that's common on iOS. How do I do this?

解决方案

You can use the BackdropFilter widget to achieve this effect.

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

这篇关于我如何做“磨砂玻璃”？颤振效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！