TL;DR

First Screen Navigate to Second Screen using

import 'package:flutter/cupertino.dart';
import 'second_screen.dart';
showCupertinoModalPopup(context: context, builder:
    (context) => SecondScreen()
);

Second Screen

import 'dart:ui';Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.transparent,
  ),
  backgroundColor: Colors.transparent,
  body: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
      child: Center(
        child: Container(
          width: MediaQuery.of(context).size.width - 20,
          height: 200,
          color: Colors.orange,
          child: Center(child: Text("Second Screen", )),
        ),
      )),
);

Nowadays flutter has gained a lot of importance and many developers are shifting towards flutter, so why should they not? Flutter is an awesome framework which helps us to develop native apps for Android and Ios.

In Flutter we can create cool UI elements and interesting designs as per our need. Just like that, I needed to create a layout screen which will have a blur effect on the background kind of a popup. I tried many methods using BackDropFilter Widget, but to use BackDropFilter the widgets had to be in Stack and not on a new or second screen.

I also tried using Scaffold with background colour as transparent and ended up with a Black colour screen as shown below.

showCupertinoModalPopup

After many trial and error methods and not much documentation on to create a translucent screen, I finally came across Cupertino Modal Popup and thought of giving this a try.

import 'package:flutter/cupertino.dart';showCupertinoModalPopup(context: context, builder:
    (context) => SecondScreen()
);

The Transparent Background Screen

Using showCupertinoModalPopup, I was able to navigate to the second screen with completely transparent background, and it was like a dream come true after a lot of struggle.

Blur The Background

The only thing remaining my way was to blur the background of the second screen adding and I would achieve the desired layout output.

Using BackDropFilter To Blur The Background

Coming back to the widget which I cursed before for not giving me the output I required was a direct hit on me for judging too soon.

Wrapped the Entire Second Screen Body inside BackDropFilter to create a blur filter below.

Creating a Blur Effect

BackDropFilter has a property called a filter which takes different kinds filters as their arguments. ImageFilter is one of the filters which can be used here which has a property blur. Giving the blur value. We need to import the dart:ui package to use the ImageFilter property

import 'dart:ui';BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
      
),

Complete Code

Screen_1

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_translucent/second_screen.dart';

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            width: double.infinity,
            height: 200,
            color: Colors.red,
          ),
          Container(
            width: double.infinity,
            height: 200,
            color: Colors.blue,
          ),
          Container(
            width: double.infinity,
            height: 200,
            color: Colors.green,
          ),
          GestureDetector(
            child: Container(
              width: double.infinity,
              height: 67,
              color: Colors.orange,
              child: Center(child: Text("Show Translucent Screen", style: TextStyle(fontSize: 20, color: Colors.white),)),

            ),
            onTap: (){
              print("Button Pressed");
              showCupertinoModalPopup(context: context, builder:
                  (context) => SecondScreen()
              );

            },
          )
        ],
      ),
    );
  }
}

Screen_2

import 'dart:ui';

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
      ),
      backgroundColor: Colors.transparent,
      body:
      BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
          child:
          Center(
            child: Container(
              width: MediaQuery.of(context).size.width - 20,
              height: 200,
              color: Colors.orange,
              child: Center(child: Text("Second Screen", )),
            ),
          )
    ),
    );
  }
}

And that’s pretty much it for the basics when it comes to blurring the screen. A cool blur effect to show cart items, or preview photos. with its own class.

Got any questions? Feel free to get in touch! Flutter on!