Overlay a page over another page with opacity in flutter

Question

i need help on creating something similar to the image below. i want to be able to make my current view overlay a view with some blur effect on itexample image

Answer 1

You could user OverLay & backdrop filter. Like in the example :

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;
 }
 }