Flutter – ImageFiltered Widget

In Flutter it’s straightforward to blur the background image using Image Filtered Widget. A filter operation is used to scan the image. ImageFiltered is a widget that applies ImageFilter to its children to blur the image.

ImageFilter Constructor

const ImageFiltered({
    Key? key,
    required this.imageFilter,
    Widget? child,
  })

ImageFilter

This is a required property to give ImageFilter.blur to blur the background image with Sigma X & Sigma Y axis. Now let’s see how to blur the background image as you can see below picture.

Implementation

Step 1: Add Appbar

Dart

import 'dart:ui';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // AppBar Widget
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        centerTitle: true,
      ),
    );
  }
}

Output:

Step 2: Use Network Image to get images from the internet

Dart

import 'dart:ui';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // AppBar Widget
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        centerTitle: true,
      ),
       body: Stack(
        alignment: Alignment.center,
        children: [

          Image.network(
              'https://pbs.twimg.com/media/FSgl1OfUcAEsiQV.jpg:large'),
        ],
      ),
    );
  }
}

Output:

Step 3: Copy the same Network image and use the fit property and sized box property to expand the image in the background.

Dart

import 'dart:ui';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // AppBar Widget
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        centerTitle: true,
      ),
      body: Stack(
        alignment: Alignment.center,
        children: [
          SizedBox.expand(
            child: Image.network(
              'https://pbs.twimg.com/media/FSgl1OfUcAEsiQV.jpg:large',
              fit: BoxFit.fitHeight,
            ),
          ),
          Image.network(
              'https://pbs.twimg.com/media/FSgl1OfUcAEsiQV.jpg:large'),
        ],
      ),
    );
  }
}

Output:

Step 4: Using the ImageFiltered widget

To blur the background image we use imagefilter with blur property which has 2 required properties SigmaX and SigmaY. By giving the value of SigmaX and SigmaY we decide how much blur we want.

ImageFilter.Blur Constructor:

ImageFilter.blur(
    double sigmaX = 0.0,
    double sigmaY = 0.0
    TileMode tileMode = TileMode.clamp
})

Dart

import 'dart:ui';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // AppBar Widget
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        centerTitle: true,
      ),
      body: Stack(
        alignment: Alignment.center,
        children: [
          SizedBox.expand(
            //using ImageFilter Widget
              child: ImageFiltered(
            imageFilter: ImageFilter.blur(
              // Giving values to SigmaX and SigmaY
              sigmaX: 10,
              sigmaY: 10,
            ),
            child: Image.network(
              'https://pbs.twimg.com/media/FSgl1OfUcAEsiQV.jpg:large',
              fit: BoxFit.fitHeight,
            ),
          )),
          Image.network(
              'https://pbs.twimg.com/media/FSgl1OfUcAEsiQV.jpg:large'),
        ],
      ),
    );
  }
}

Output: