flutter_intro_3

main.dart

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  OverlayEntry overlayEntry;
  final globalKey = GlobalKey();
  Size size;
  Offset offset;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          RaisedButton(
            key: globalKey,
            onPressed: () {
              RenderBox renderBox = globalKey.currentContext.findRenderObject();
              size = renderBox.size;
              offset = renderBox.localToGlobal(Offset.zero);

              /// 1. 创建一个 overlayEntry 实例，builder 方法返回一个 Widget
              /// 该 Widget 会被渲染到页面顶层
              overlayEntry = OverlayEntry(
                builder: (context) => Stack(
                  children: [
                    ColorFiltered(
                      colorFilter: ColorFilter.mode(
                        /// 遮罩层颜色
                        Colors.red.withOpacity(.6),
                        BlendMode.srcOut,
                      ),
                      child: Stack(
                        children: [
                          Container(
                            decoration: BoxDecoration(
                              /// 任何颜色均可
                              color: Colors.white,
                              backgroundBlendMode: BlendMode.dstOut,
                            ),
                          ),
                          Positioned(
                            child: Container(
                              /// 任何颜色均可
                              color: Colors.white,
                              width: size.width,
                              height: size.height,
                            ),
                            left: offset.dx,
                            top: offset.dy,
                          ),
                        ],
                      ),
                    ),
                    Positioned(
                      child: RaisedButton(
                        onPressed: () {
                          /// 3. 执行 remove 方法销毁 overlayEntry 实例
                          overlayEntry.remove();
                        },
                        child: Text('点我关闭 OverlayEntry'),
                      ),
                      left: 100,
                      top: 100,
                    )
                  ],
                ),
              );

              /// 2. 使用 OverlayState.insert 方法来显示 overlayEntry
              Overlay.of(context).insert(overlayEntry);
            },
            child: Text(
              '点我康康，我不会被遮住',
            ),
          ),
        ],
      ),
    );
  }
}