Flutter制作弹出框背景是磨砂特效Blur Effects的例子

开篇寄语

这次是制作一个Blur Effects，在App设计过程中常见的一种特效方式，flutter中也恰好有此特效，伯衡君今天🈶️刚刚学到，弹窗后面是那种磨砂效果，感觉非常棒。

前情提要

• 《Flutter有关ColorFiltered一些有趣实例，图片变色大不同》
• 《Flutter制作自己的第一个全平台APP学习之多媒体篇》
• 《Flutter制作自己的第一个全平台APP学习之Animation篇》
• 《Flutter制作自己的第一个全平台APP学习之Navigation篇》
• 《Flutter制作自己的第一个全平台APP学习之Networking篇》

内容详情

以下内容大多是更改lib下的main.dart文件内容，删掉里面的内容，复制粘贴代码，开启调试就可以出现了。

涉及到一个名为BackdropFilter的类，这个可以在官方文档中查看详情介绍，试举例如下：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  void _show() {
    showDialog(
        context: context,
        barrierColor: Colors.transparent,
        builder: (BuildContext ctx) {
          return BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
            child: AlertDialog(
              elevation: 10,
              title: Text('Title'),
              content: Text('Some content here'),
              actions: [
                TextButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text('Close'))
              ],
            ),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(15),
            child: Column(
              // These things help make the blu effect become clearer. You can remove them to keep the code concise.
              children: [
                Container(
                  width: double.infinity,
                  height: 200,
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          image: NetworkImage(
                              'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
                          fit: BoxFit.fill)),
                ),
                SizedBox(
                  height: 20,
                ),
              ],
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _show,
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

生成效果如下图所示：