The Effect cannot be seen when the window is inactive

[Sushma-Shrestha]

I am also facing this issue, when i click in the application, only then the effect is seen, but when i click in another window, the effect is not seen. So, only when the window is active the effect is seen. But i want the effect to remain always.

When active:

When not active:

[alexmercerind]

Tell Microsoft.

[Sushma-Shrestha]

I figured out how to do this,

import 'dart:io';

import 'package:bitsdojo_window/bitsdojo_window.dart';
import 'package:flutter/material.dart';
import 'package:flutter_acrylic/flutter_acrylic.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:window_manager/window_manager.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Window.initialize();
  await windowManager.ensureInitialized();

  await Window.setEffect(effect: WindowEffect.acrylic);

  var initialSize = const Size(375, 750);
  WindowOptions windowOptions = WindowOptions(
    size: initialSize,
    center: false,
  );

  await windowManager.waitUntilReadyToShow(
    windowOptions,
    () async {
      await windowManager.setAsFrameless();
      await windowManager.show();
    },
  );

  runApp(
    const MyApp(),
  );

  if (Platform.isWindows) {
    doWhenWindowReady(() {
      const initialSize = Size(375, 750);
      appWindow.minSize = initialSize;
      appWindow.size = initialSize;
      appWindow.alignment = Alignment.bottomRight;
      appWindow.show();
    });
  }
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WindowListener {
  @override
  void initState() {
    super.initState();
    Window.setEffect(effect: WindowEffect.acrylic);
    setState(() {});
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
        designSize: const Size(375, 750),
        builder: ((context, child) {
          ScreenUtil.init(context);
          return MaterialApp(
              home: Scaffold(
                  backgroundColor: Colors.transparent,
                  appBar: AppBar(title: const Text('Test')),
                  body: const Center(
                    child: Text('Hello World'),
                  )));
        }));
  }
}

Here, main point is to add: await windowManager.setAsFrameless(); Then: We can add custom controls [minimize, maximize and close]

Also, is WindowEffect.aero applicable for Window versions below Window 11, since i don't have window 10? I tried using acrylic, but it was applicable to only Windows 11 and macos, I will really appreciate your answer.

[Jamminroot]

Suggested workaround didn't really work for me. However, I made a dirty trick to work this through. Locate CreateWindow() call in windows\runner\win32_window.cpp, and adjust styles to WS_POPUP|WS_VISIBLE|WS_SYSMENU:

HWND window = CreateWindow(
      window_class, title.c_str(), WS_POPUP|WS_VISIBLE|WS_SYSMENU,
      Scale(origin.x, scale_factor), Scale(origin.y, scale_factor),
      Scale(size.width, scale_factor), Scale(size.height, scale_factor),
      nullptr, nullptr, GetModuleHandle(nullptr), this);

SO reference