Last updated
Apr 3, 2025
9 mins read
Share on
Build 10x products in minutes by chatting with AI - beyond just a prototype.
Software Development Executive - II
A Flutter and iOS developer with 3+ years of experience. Looking forward to each new thing in tech. Wandering like Alice.
Software Development Executive - II
Passionate Flutter developer crafting engaging mobile experiences. Turning coffee into beautiful UIs and bad jokes into commit messages. When not coding, he is probably debugging his life decisions.
Flutter has emerged as a frontrunner, enabling developers to build visually appealing and high-performance applications for mobile, web, and desktop from a single codebase. However, regarding desktop platforms, managing Windows effectively is a critical aspect of providing a seamless user experience. This is where WindowManager steps in, enhancing the capabilities of your Flutter apps.
WindowManager is a plugin that allows Flutter desktop apps to resize and reposition windows. It is compatible with Dart 3 and supports Linux, macOS, and Windows platforms. The plugin provides a range of methods for manipulating windows, including resizing, repositioning, maximizing, minimizing, and closing windows. It also offers features to control the visibility of windows.
The WindowManager plugin is crucial in Flutter app development, particularly for desktop platforms. It provides developers with granular control over the window's state and position, which is essential for creating a user-friendly and interactive desktop application.
For instance, you might want to resize the window based on the content, or you might want to control the window's visibility under certain conditions. WindowManager makes these tasks straightforward with its simple and intuitive API.
Incorporating WindowManager into your Flutter app can significantly enhance the user experience by providing more control over the app's windows. This guide will walk you through adding WindowManager to your Flutter project and initializing it in your Flutter app.
To add WindowManager to your Flutter app, import the WindowManager package. This can be done by adding the following line to your code:
1import 'package:window_manager/window_manager.dart'; 2
Once you've added WindowManager to your Flutter app, you must initialize it. This is done in the void main function of your Flutter app.
1void main() { 2 runApp(const MyApp()); 3} 4
In the class MyApp section of your Flutter app, you can define how WindowManager will behave. For instance, you can set whether the window is minimizable, maximizable, closable, or dockable.
1class MyApp extends StatelessWidget { 2 3 Widget build(BuildContext context) { 4 return MaterialApp( 5 home: Scaffold( 6 body: Center( 7 child: ElevatedButton( 8 onPressed: () async { 9 final wm = WindowManager.instance; 10 await wm.isMinimizable(); // isminimizable macos windows returns 11 await wm.isMaximizable(); // ismaximizable macos windows returns 12 await wm.isClosable(); // isclosable windows returns bool 13 await wm.isDockable(); // isdockable windows returns bool 14 }, 15 child: const Text('Check Window Properties'), 16 ), 17 ), 18 ), 19 ); 20 } 21} 22
In this code snippet, the Widget build(BuildContext context) function is used to build the widget tree of the Flutter app.
Once WindowManager is set up in your Flutter app, you can use it to manipulate the app's windows. This includes resizing and repositioning windows, maximizing, minimizing, and closing windows, and controlling window visibility.
WindowManager provides several methods for resizing and repositioning windows in your Flutter app. The window resize function allows you to change the window size based on the parameters you provide.
1await wm.setSize(Size(800, 600)); // window resize 2
In this code snippet, the window resize function is used to set the window's size to 800x600 pixels.
Similarly, WindowManager provides the window drag function, which allows you to move the window to a new position based on the specified mouse-down event.
1await wm.startDragging(); // window drag 2
In this code snippet, the window drag function starts the window drag based on the specified mouse-down event.
WindowManager also provides methods for maximizing, minimizing, and closing windows in your Flutter app. The maximize function maximizes the window, the minimize function minimizes the window, and the close function closes the window.
1await wm.maximize(); // fullscreen window 2await wm.minimize(); // minimized window 3await wm.close(); // window exits 4
In this code snippet, the maximize function is used to make the window fullscreen, the minimize function is used to minimize the window to the dock, and the close function is used to close the window and exit the app.
WindowManager provides methods for controlling the visibility of windows in your Flutter app. The hide function hides the window, and the show function shows the window.
1await wm.hide(); // hide hides 2await wm.show(); // window gains focus 3
In this code snippet, the hide function is used to hide the window, and the show function is used to show the window and bring it into focus.
Understanding and managing window focus is crucial in building interactive and user-friendly Flutter apps. WindowManager provides several methods for handling window focus, including the onWindowFocus and onWindowBlur events.
In a Flutter app, a window is said to be in focus when it is the active window, i.e., the window currently being used. Conversely, a window is blurred when it loses focus, i.e., when it is no longer an active window.
WindowManager provides the isFocused MacOS Windows returns function, which returns a boolean value indicating whether the window is currently focused.
1await wm.isFocused(); // isfocused macos windows returns 2
In this code snippet, the isFocused MacOS Windows returns function is used to check if the window is currently in focus.
Similarly, WindowManager provides the blur MacOS Windows function, which blurs the window, causing it to lose focus.
1await wm.blur(); // blur macos windows 2
In this code snippet, the blur MacOS Windows function is used to blur the window, causing it to lose focus.
WindowManager emits the onWindowFocus event when the window gains focus and the onWindowBlur event when the window loses focus. You can listen to these events and perform specific actions when they occur.
1wm.onWindowFocus.listen((_) { 2 print('Window gained focus'); // window gains focus 3}); 4 5wm.onWindowBlur.listen((_) { 6 print('Window lost focus'); // window loses focus 7}); 8
In this code snippet, the WindowManager listens for the onWindowFocus and onWindowBlur events and prints a message to the console when these events occur.
Window events are crucial in creating interactive Flutter apps. WindowManager provides a variety of window events that you can listen to and handle in your Flutter app.
Window events are actions or occurrences that happen in the window of your Flutter app. WindowManager emits several window events, such as onWindowMoved MacOS Windows emitted, onWindowResized MacOS Windows emitted, onWindowDocked Windows emitted, and onWindowUndocked Windows emitted.
These events are triggered when the window is moved, resized, docked, or undocked, respectively. By listening to these events, you can perform specific actions when they occur.
To listen for window events in your Flutter app, you can implement a WindowListener. The WindowListener listens for window events and triggers a callback function when these events occur.
1class MyApp extends StatefulWidget { 2 const MyApp({Key? key}) : super(key: key); 3 4 5 _MyAppState createState() => _MyAppState(); 6} 7 8class _MyAppState extends State<MyApp> { 9 final WindowManager wm = WindowManager.instance; 10 11 12 void initState() { 13 super.initState(); 14 15 wm.onWindowMoved.listen((_) { 16 print('Window moved'); // onwindowmoved macos windows emitted 17 }); 18 19 wm.onWindowResized.listen((_) { 20 print('Window resized'); // onwindowresized macos windows emitted 21 }); 22 23 wm.onWindowDocked.listen((_) { 24 print('Window docked'); // onwindowdocked windows emitted 25 }); 26 27 wm.onWindowUndocked.listen((_) { 28 print('Window undocked'); // onwindowundocked windows emitted 29 }); 30 } 31 32 // ... 33} 34
In this code snippet, a WindowListener is implemented in the initState function of the MyApp widget. The WindowListener listens for the onWindowMoved, onWindowResized, onWindowDocked, and onWindowUndocked events and prints a message to the console when these events occur.
By listening to window events, you can handle these events and perform specific actions when they occur. For instance, you could save the window's current position when the window is moved, adjust the layout of your Flutter app when the window is resized, or change the behavior of your app when the window is docked or undocked.
WindowManager provides several advanced features that can significantly enhance the user experience of your Flutter app. These features include docking and undocking windows, controlling window aspect ratio and alignment, and setting window opacity and brightness.
WindowManager provides the dock and undock functions, which allow you to dock and undock windows in your Flutter app. Docking a window attaches it to a side of the screen, while undocking a window detaches it.
1await wm.dock(); // dock windows docks 2await wm.undock(); // window maintain 3
In this code snippet, the dock function is used to dock the window, and the undock function is used to undock the window.
WindowManager provides the setAspectRatio function, which allows you to control the aspect ratio of windows in your Flutter app. The aspect ratio is the ratio of the window's width to its height.
1await wm.setAspectRatio(16 / 9); // windows setaspectratio 2
In this code snippet, the setAspectRatio function is used to set the window's aspect ratio to 16:9.
WindowManager also provides the setAlignment function, which allows you to control the alignment of windows in your Flutter app. The alignment determines the position of the window on the screen.
1await wm.setAlignment(Alignment.center); // center moves window 2
In this code snippet, the setAlignment function is used to center the window on the screen.
WindowManager provides the setOpacity function, which allows you to set the opacity of windows in your Flutter app. The opacity determines how transparent the window is.
1await wm.setOpacity(0.5); // window ignore 2
In this code snippet, the setOpacity function is used to set the window's opacity to 0.5, making it semi-transparent.
The importance of WindowManager in building Flutter apps for desktop platforms cannot be overstated. By providing a native app experience, WindowManager allows you to create Flutter apps that are functional but also intuitive and user-friendly.
In conclusion, WindowManager is a powerful and versatile tool for building Flutter apps for desktop platforms. By understanding and utilizing the features of WindowManager, you can create Flutter apps that provide a superior user experience and stand out from the crowd.
