Solving Artifacts with `ImageFilter.blur` in Flutter on Android, iOS and macOS Link to heading

Introduction Link to heading

When developing mobile and desktop applications with Flutter, it’s common to use blur effects to enhance the user interface. One of the most used methods is ImageFilter.blur. However, some developers have encountered visual artifacts when applying this effect on Android, iOS and macOS, while it works correctly on web. In this article, we’ll explore this issue, understand the reason behind it, and provide an effective solution.

The Problem Link to heading

When applying ImageFilter.blur to a solid color Container (for example, a circular shape), visual artifacts appear, such as horizontal and vertical lines like a cross, on Android, iOS and macOS platforms. This problem doesn’t occur on web, suggesting there are differences in how the blur effect is handled across different platforms.

Code that Reproduces the Problem Link to heading

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

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: BlurredCircle(),
        ),
      ),
    ),
  );
}

class BlurredCircle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ImageFiltered(
      imageFilter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.black.withOpacity(0.4),
        ),
      ),
    );
  }
}

Bug artifacts ImageFilter blur flutter

Observation: When running this code on Android, iOS or macOS, you’ll notice a horizontal and vertical line like a cross through the blurred circle. On web, the circle renders correctly without artifacts.

Understanding the Cause Link to heading

Difference in Rendering Engines Link to heading

The main reason behind this behavior is the difference in rendering engines used by Flutter on different platforms:

Web: Uses Skia as the rendering engine.
Android, iOS and macOS: Use Impeller, a new rendering engine designed to improve performance and consistency on mobile and desktop devices.

This difference in rendering engines means that certain graphic effects, like ImageFilter.blur, may behave differently across platforms.

TileMode Behavior Link to heading

By default, ImageFilter.blur uses TileMode.clamp. This mode extends the edge pixels of the widget infinitely in all directions. When applied to a solid color, this can cause visual artifacts, as the edge pixels (of the same color) extend and generate lines or discontinuities.

In Impeller, this behavior becomes more evident due to how it handles edge effects compared to Skia. This explains why the problem is visible on Android, iOS and macOS, but not on web.

The Solution: Using `TileMode.decal` Link to heading

To solve this problem, we need to change the tileMode parameter of ImageFilter.blur to TileMode.decal. This mode treats pixels outside the widget boundaries as transparent, preventing edge pixels from extending and eliminating visual artifacts.

Updated Code Link to heading

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

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: BlurredCircle(),
        ),
      ),
    ),
  );
}

class BlurredCircle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ImageFiltered(
      imageFilter: ImageFilter.blur(
        sigmaX: 20,
        sigmaY: 20,
        tileMode: TileMode.decal, // Add tileMode.decal here
      ),
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.black.withOpacity(0.4),
        ),
      ),
    );
  }
}

Solution artifacts ImageFilter blur flutter

Result: When running this updated code, the blurred circle renders correctly on all platforms without any visual artifacts.

Detailed Explanation Link to heading

TileMode.clamp (Default): Extends the edge pixels of the widget, which can cause artifacts when applying blur to a solid color.
TileMode.decal: Treats pixels outside the widget as transparent, preventing edge pixel extension and eliminating artifacts.

By specifying tileMode: TileMode.decal, we tell the image filter not to extend edge pixels, resulting in a clean blur without artifacts.

Benefits of the Solution Link to heading

Eliminates Visual Artifacts: The blurred image renders correctly without lines or discontinuities.
Cross-Platform Compatibility: The solution works on Android, iOS, macOS and web.
Simplicity: Only requires adding one additional parameter to ImageFilter.blur.

Additional Considerations Link to heading

Future Flutter Updates Link to heading

The Flutter team has indicated that they plan to change the default value of tileMode to TileMode.decal in future versions. This means that eventually, it won’t be necessary to specify this parameter to avoid artifacts.

Understanding Rendering Engines Link to heading

Skia: Is the rendering engine used in Flutter Web. It handles graphic effects in a way that avoids artifacts when applying ImageFilter.blur with default values.
Impeller: Is the rendering engine used on Android, iOS and macOS. It’s designed to improve performance but handles edge effects differently, which can result in artifacts if tileMode isn’t adjusted.

Understanding these differences is crucial for developing consistent user interfaces across platforms.

Conclusion Link to heading

Using blur effects in Flutter can significantly improve user experience, but it’s important to understand how to configure them correctly to avoid issues. By specifying tileMode: TileMode.decal in ImageFilter.blur, we can eliminate visual artifacts on Android, iOS and macOS, ensuring a consistent and high-quality interface across all platforms.

Thanks for reading! If this article has been helpful, feel free to share it with other developers who might benefit from this information.

Additional Resources Link to heading

This article was written and curated by Andres Garcia, with support from an artificial intelligence using machine learning to produce text.

Solving Artifacts with ImageFilter.blur in Flutter on Android, iOS and macOS Link to heading