How to Blur Asset and Network Image in Flutter App

In this example, we are going to show you the easiest way to blur asset or network images in Flutter app. You may need to blur images inside your app in some user interface. See the example below to blur asset or network images in Flutter app.

First, add blur Flutter package in your dependency by adding the following lines in pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  blur: ^3.0.0

Blur Asset Image:

Image.asset("assets/nature/nature.jpg", height:90).blurred( //.blurred from blur package
  blur: 3, //blur intensity value
)

Blur Network Image:

Image.network("https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg").blurred(
  blur: 2
)

Full Dart Code Example:

import 'package:flutter/material.dart';
import 'package:blur/blur.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Blur Asset/Network Image"),
             backgroundColor: Colors.deepOrangeAccent,
          ),
          body: Container(
            padding: EdgeInsets.all(20),
            child: Column( 
              children:[ 
                  Image.asset("assets/nature/nature.jpg", height:90).blurred( //.blurred from blur package
                    blur: 3, //blur intensity value
                  ),

                  Image.network("https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg").blurred(
                    blur: 2
                  )
              ])
          )
       );
  }
}

Output Screenshot:

In this way, you can blur asset or network images in Flutter app.