Motivational Quote App: How to blur a background image or any image in Flutter Ep.9 Pt.2

If you have ont read my part 1 of motivational quote app, you read it from here.



To blur a background image we have to use a child property of our decorated image container. For the child you have to add new BackdropFilter(). This widget has a property called filter. Using that property we can add filters to our app.

In the below code you can see I have added a ImageFilter to the filter property. This ImageFilter has a name constructor called blur() and it allow us to blur the x axis and y axis. In our case I have blured the equal amount for both axis x,y = 3.0. You can have a value between 0.0 and 1.0(0.0 is mad, but that's how Dart identifies double values).

Now you will get an error saying: The constructor returns type 'dynamic' that isn't of expected type 'ImageFilter'. Undefined class 'ImageFilter.blur'.. That because we have to import dart:ui package. Add below line in top of main.dart file.


import 'dart:ui';

Now, if you run this, you cannot see anything because we have to add the child property to BackdropFilter. For this child property add another container with BoxDecoration. And add a color property to BoxDecoration and add your desired color with some opacity. In this case Colors.black.withOpacity(0.2). And the another important thing is, if you did not add this color with some opacity you won't get the blur effect.

We are actualy blurring the child container of BackdropFilter not the image.

	import 'package:flutter/material.dart';
	import 'dart:ui';
	void main() => runApp(new QuoteApp());
	class QuoteApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return new MaterialApp(
	title: 'Motivational Quote App',
	home: new Scaffold(body: new Stack(
	children: <Widget>[
	new Container(
	decoration: new BoxDecoration(
	image: new DecorationImage(
	image: new AssetImage('assets/images/bill-gates.jpg'),
	fit: BoxFit.cover,
	),
	),
	child: new BackdropFilter(
	filter: new ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0,),
	child: new Container(
	decoration: new BoxDecoration(
	color: Colors.black.withOpacity(0.2),
	),
	),
	),
	),
	new Center(
	child: new Text('Never give up'),
	)
	],
	)),
	);
	}
	}

view raw blur_image.dart hosted with ❤ by GitHub