bitsdojo_window

repository·master·Indexed 21 days ago

https://github.com/bitsdojo/bitsdojo_window

A Flutter package for deep customization of desktop application windows on Windows, macOS, and Linux. It enables developers to remove standard OS titlebars and replace them with custom Flutter-rendered UI, including custom window controls, movement logic, and window frame configurations. The library provides specialized widgets such as MoveWindow, WindowButtons, and WindowTitleBarBox, as well as platform-specific configuration for each supported operating system.

Tokens
3.9K
Snippets
13
Records
15
Agent score
74%

What's inside bitsdojo_window

  1. Create custom window controls and movement in Flutter

    master

    When using a custom window frame (BDW_CUSTOM_FRAME), you must provide your own UI for moving the window and controlling its state (minimize, maximize, close).

    Key widgets provided by bitsdojo_window:

    Window Movement

    • MoveWindow: A widget that allows the user to click and drag to move the window. Typically used inside a WindowTitleBarBox.

    Window Buttons

    • WindowButtons: A collection of window control buttons.
    • MinimizeWindowButton: A button to minimize the window. Accepts a colors parameter of type WindowButtonColors.
    • MaximizeWindowButton: A button to maximize/restore the window. Accepts a colors parameter of type WindowButtonColors.
    • CloseWindowButton: A button to close the window. Accepts a colors parameter of type WindowButtonColors.

    Layout Helpers

    • WindowTitleBarBox: A container used to house the title bar area.
    • WindowBorder: A widget to draw a border around your application content.

    Configuration

    • WindowButtonColors: Defines the color states for window buttons:
      • iconNormal
      • mouseOver
      • mouseDown
      • iconMouseOver
      • iconMouseDown
    // Example of a custom title bar with movement and buttons
    WindowTitleBarBox(
      child: Row(
        children: [
          Expanded(child: MoveWindow()), 
          const WindowButtons(),
        ],
      ),
    )
    
    // Example of custom window buttons
    class WindowButtons extends StatelessWidget {
      const WindowButtons({Key? key}) : super(key: key);
      @override
      Widget build(BuildContext context) {
        return Row(
          children: [
            MinimizeWindowButton(colors: myButtonColors),
            MaximizeWindowButton(colors: myButtonColors),
            CloseWindowButton(colors: myCloseButtonColors),
          ],
        );
      }
    }
  2. Configure bitsdojo_window for Linux

    master

    To enable the package on Linux, modify linux/my_application.cc. Include the plugin header and use bitsdojo_window_from(window) to configure the window instance.

    To use a custom frame, call bdw->setCustomFrame(true).

    #include <bitsdojo_window_linux/bitsdojo_window_plugin.h>
    
    // Inside your application setup:
    auto bdw = bitsdojo_window_from(window);
    bdw->setCustomFrame(true);
  3. Integrate bitsdojo_window in Flutter code

    master

    In your lib/main.dart, import the package and use doWhenWindowReady to perform window configuration. This ensures the window is fully initialized before you attempt to set properties like size, alignment, or visibility.

    Commonly used properties on appWindow:

    • size: Sets the window dimensions.
    • minSize: Sets the minimum allowed window size.
    • alignment: Sets the screen alignment (e.g., Alignment.center).
    • title: Sets the window title.
    • show(): Makes the window visible (required if BDW_HIDE_ON_STARTUP was used).
    import 'package:bitsdojo_window/bitsdojo_window.dart';
    
    void main() {
      runApp(MyApp());
    
      doWhenWindowReady(() {
        const initialSize = Size(600, 450);
        appWindow.minSize = initialSize;
        appWindow.size = initialSize;
        appWindow.alignment = Alignment.center;
        appWindow.show();
      });
    }
    import 'package:flutter/material.dart';
    import 'package:bitsdojo_window/bitsdojo_window.dart';
    
    void main() {
      runApp(const MyApp());
      doWhenWindowReady(() {
        final win = appWindow;
        const initialSize = Size(600, 450);
        win.minSize = initialSize;
        win.size = initialSize;
        win.alignment = Alignment.center;
        win.title = "Custom window with Flutter";
        win.show();
      });
    }
  4. Configure bitsdojo_window for Windows

    master

    To enable the package on Windows, modify windows/runner/main.cpp. You must include the plugin header and call bitsdojo_window_configure with the desired flags.

    Available flags:

    • BDW_CUSTOM_FRAME: Enables a custom window frame (removes standard titlebar and buttons).
    • BDW_HIDE_ON_STARTUP: Hides the window when the application starts.

    If you want to use the standard titlebar, remove BDW_CUSTOM_FRAME. If you want the window to be visible immediately, remove BDW_HIDE_ON_STARTUP.

    #include <bitsdojo_window_windows/bitsdojo_window_plugin.h>
    auto bdw = bitsdojo_window_configure(BDW_CUSTOM_FRAME | BDW_HIDE_ON_STARTUP);
  5. Implement a new platform for bitsdojo_window

    master

    To create a new platform-specific implementation for the bitsdojo_window plugin, you must extend the BitsdojoWindowPlatform class. Once your implementation is ready, you must register it as the default instance by assigning it to BitsdojoWindowPlatform.instance during your plugin registration process.

    // 1. Extend BitsdojoWindowPlatform with your implementation
    class MyPlatformBitsdojoWindow extends BitsdojoWindowPlatform {
      // Implement platform-specific behavior here
    }
    
    // 2. Register the implementation
    BitsdojoWindowPlatform.instance = MyPlatformBitsdojoWindow();
  6. Configure bitsdojo_window for macOS

    master

    To enable the package on macOS, modify macos/runner/MainFlutterWindow.swift. Change the class inheritance from NSWindow to BitsdojoWindow and override the bitsdojo_window_configure method.

    Available flags:

    • BDW_CUSTOM_FRAME: Enables a custom window frame.
    • BDW_HIDE_ON_STARTUP: Hides the window when the application starts.

    Example implementation:

    import bitsdojo_window_macos
    
    class MainFlutterWindow: BitsdojoWindow {
        override func bitsdojo_window_configure() -> UInt {
            return BDW_CUSTOM_FRAME | BDW_HIDE_ON_STARTUP
        }
    }
    import Cocoa
    import FlutterMacOS
    import bitsdojo_window_macos
    
    class MainFlutterWindow: BitsdojoWindow {
        override func bitsdojo_window_configure() -> UInt {
            return BDW_CUSTOM_FRAME | BDW_HIDE_ON_STARTUP
        }
        override func awakeFromNib() {
            // ...
        }
    }
  7. Use WindowButton to create custom title bar controls

    master

    The WindowButton widget allows you to create highly customizable title bar buttons (like minimize, maximize, or close) that respond to mouse states (hover, click).

    It provides two builder patterns:

    1. iconBuilder: A function to define how the icon looks based on the current WindowButtonContext (which includes mouseState and iconColor).
    2. builder: A function to define the entire button's structure, receiving both the WindowButtonContext and the generated icon widget.

    Note: WindowButton returns an empty Container on Web and macOS platforms.

    WindowButton(
      iconBuilder: (buttonContext) => Icon(
        Icons.close,
        color: buttonContext.iconColor,
      ),
      onPressed: () => print('Button pressed!'),
      animate: true,
    );
  8. Use pre-built window control buttons

    master

    The library provides specialized subclasses of WindowButton that come with default icons and pre-configured actions for standard window management tasks. These buttons automatically interact with the appWindow instance.

    • MinimizeWindowButton: Minimizes the window. Defaults to appWindow.minimize().
    • MaximizeWindowButton: Maximizes or restores the window. Defaults to appWindow.maximizeOrRestore().
    • RestoreWindowButton: Restores the window from a maximized state. Defaults to appWindow.maximizeOrRestore().
    • CloseWindowButton: Closes the window. Defaults to appWindow.close(). Uses a specific default color scheme (reddish tones) for the hover/click states.
    // Standard usage with default behaviors
    Column(
      children: [
        MinimizeWindowButton(),
        MaximizeWindowButton(),
        CloseWindowButton(),
      ],
    )
  9. Use pre-built window control icons

    master

    The bitsdojo_window package provides several pre-built StatelessWidget icons designed for window control bars (Minimize, Maximize, Restore, and Close). Each icon requires a color parameter to define its appearance.

    Available icons:

    • CloseIcon: An 'X' shaped icon.
    • MaximizeIcon: A square icon representing a maximized window.
    • RestoreIcon: An icon representing a window that can be restored from a maximized state.
    • MinimizeIcon: A horizontal line icon representing a minimized window.
    import 'package:bitsdojo_window/bitsdojo_window.dart'; // Or the specific path to icons
    import 'package:flutter/material.dart';
    
    // Example usage in a custom title bar
    Row(
      children: [
        MinimizeIcon(color: Colors.black),
        MaximizeIcon(color: Colors.black),
        CloseIcon(color: Colors.red),
      ],
    )