Flutter Apply Blur Effect on Background Image using BackdropFilter Example Tutorial

Flutter BackdropFilter widget is used to make amazing blurring effects on Images, Container and all the widgets. BackdropFilter widget is used with combination of ImageFilter class. It applies filter on current widget and makes the blur effect on beneath present widget. Supposedly we have a Image widget so we put the Image widget first than put the BackdropFilter widget as its child. So it will make the Blur effect on Image because Image widget presents beneath the it. So in this tutorial we would learn about Flutter Apply Blur Effect on Background Image using BackdropFilter Android iOS Example Tutorial.

Flutter Apply Blur Effect on Background Image using BackdropFilter Android iOS Example Tutorial:

1. Import material.dart and UI package of dart in your app’s main.dart file.

2. Create void main runApp() method and here we would call our main MyApp view class.

3. Create a class named as MyApp extends with State less widget. This is our main View class.

4. Create Widget build are in your MyApp class. Now we would make Scaffold widget. Scaffold widget is the base of every flutter application it provides application screen a background color and base for designing further. Now we would first make a Center widget in body section of Scaffold widget.

5. Create Container widget as child of Center widget. Now using the Decoration Image property of Container we would set Image from URL. This is our background image for full screen. Now we would make a ClipRRect widget and put the BackdropFilter widget as its child. BackdropFilter widget will apply blur effect beneath its child widget. So using this it will make the Image background blurry.

6. Complete source code for main.dart file:

Screenshot:

Flutter Apply Blur Effect on Background Image using BackdropFilter Example Tutorial

Leave a Reply

Your email address will not be published.