How to Create a Blurred Transparent Background in Your Flutter Desktop/Windows Project

Implementing a blur effect in Flutter for Windows applications can be challenging. Various libraries exist for this purpose, but they often conflict with the requirements of larger projects. Therefore, I’ll demonstrate how to implement this effect using native C++ code within your Flutter application.

First, go to the following file in your project:

windows => runner => main.cpp

Next, you will need to include these headers:

#include <flutter/dart_project.h>
#include <flutter/flutter_view_controller.h>
#include <windows.h>
#include <dwmapi.h>
#include "flutter_window.h"
#include "utils.h"

Then, you need to define the following code:

// Definitions for ACCENT_POLICY and others
enum ACCENT_STATE {
  // ... other states ...
  ACCENT_ENABLE_BLURBEHIND = 3,
  // ... other states ...
};

struct ACCENT_POLICY {
  ACCENT_STATE AccentState;
  DWORD AccentFlags;
  DWORD GradientColor;
  DWORD AnimationId;
};

struct WINDOWCOMPOSITIONATTRIBDATA {
  int Attrib;
  PVOID pvData;
  SIZE_T cbData;
};

typedef BOOL(WINAPI *pfnSetWindowCompositionAttribute)(HWND, WINDOWCOMPOSITIONATTRIBDATA *);

void EnableBlur(HWND hwnd) {
  HMODULE hUser = GetModuleHandle(L"user32.dll");
  if (hUser) {
    pfnSetWindowCompositionAttribute SetWindowCompositionAttribute =
        (pfnSetWindowCompositionAttribute)GetProcAddress(hUser, "SetWindowCompositionAttribute");

    if (SetWindowCompositionAttribute) {
      ACCENT_POLICY accent = {ACCENT_ENABLE_BLURBEHIND, 0, 0, 0};
      WINDOWCOMPOSITIONATTRIBDATA data = {19, &accent, sizeof(accent)};
      SetWindowCompositionAttribute(hwnd, &data);
    }
  }
}

Afterward, you need to add the following code to the wWinMain function:

// Enable Windows blur effect
HWND hwnd = window.GetHandle(); // Obtain the handle from FlutterWindow
EnableBlur(hwnd);

Finally, your code will look like this:

Result:

Before effect: