Flutter: Translucent Screen Layout

Flutter Translucent Screen

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", )),
        ),
      )),
);

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

In flutter we can create cool UI element and interesting design 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 Black colour screen as shown below.

Black Colour Background when using scaffold backgroundColor as transparent.

showCupertinoModalPopup

After many trial and error method and no 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

Transparent Background Using showCupertinoModalPopup

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

Making Dreams Come True.

Blur The Background

The only thing remaining on my way to blur the background of the second screen adding and I would achieved 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 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 as filter which takes different kinds filter as their arguments. ImageFilter is one of the filter which can be used here which has a property blur. Giving the blur value. We need to import dart:ui package to use the ImageFilter property

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

Translucent Screen

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!