将页面覆盖在另一页面上，使页面不透明

Question

我需要帮助来创建类似于下图的内容。我希望能够使当前视图覆盖具有模糊效果的视图example image

Answer 1

您可以使用OverLay和backdrop filter.就像例子中一样：

import 'dart:ui' as ui;

import 'package:flutter/material.dart';

class OverLayIssue extends StatelessWidget {
@override
Widget build(BuildContext context) {
 return Scaffold(
   floatingActionButton: FloatingActionButton(
    onPressed: () {
      Overlay.of(context).insert(_getEntry(context));
    },
  ),
  body: Stack(
    fit: StackFit.expand,
    children: <Widget>[
      Text('0' * 10000),
    ],
  ),
);
}

OverlayEntry _getEntry(context) {
OverlayEntry entry;

entry = OverlayEntry(
  opaque: false,
  maintainState: true,
  builder: (_) => Positioned(
    left: 100,
    bottom: 100,
    width: MediaQuery.of(context).size.width,
    height: MediaQuery.of(context).size.height,
    child: BackdropFilter(
      filter: ui.ImageFilter.blur(
        sigmaX: 2,
        sigmaY: 2,
      ),
      child: Material(
        type: MaterialType.transparency,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 200,
              height: 200,
              color: Colors.red,
              child: Text('Hello world'),
            ),
            RaisedButton(onPressed: () => entry.remove())
          ],
        ),
      ),
    ),
  ),
);
return entry;
 }
 }