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

已收录   阅读次数: 1,097
2021-07-1017:08:25 发表评论
摘要

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

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

开篇寄语

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

前情提要

内容详情

以下内容大多是更改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),
        ),
      ),
    );
  }
}

生成效果如下图所示:

Flutter制作弹出框背景是磨砂特效Blur Effects的例子
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: