Flutter: Translucent Screen Layout
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.
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
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.
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),
),
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!