Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bitsdojo/bitsdojo_window
A Flutter package that makes it easy to customize and work with your Flutter desktop app window.
https://github.com/bitsdojo/bitsdojo_window
Last synced: 9 days ago
JSON representation
A Flutter package that makes it easy to customize and work with your Flutter desktop app window.
- Host: GitHub
- URL: https://github.com/bitsdojo/bitsdojo_window
- Owner: bitsdojo
- License: mit
- Created: 2020-11-27T21:01:55.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-24T00:42:49.000Z (11 months ago)
- Last Synced: 2024-08-01T12:27:35.250Z (3 months ago)
- Language: Dart
- Homepage: http://www.youtube.com/watch?v=bee2AHQpGK4
- Size: 248 KB
- Stars: 794
- Watchers: 22
- Forks: 230
- Open Issues: 107
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-flutter-desktop - bitsdojo_window - A package to help with creating custom windows with Flutter desktop (custom border, titlebar and minimize/maximize/close buttons) and common desktop window operations (show/hide/position on screen) for Windows and macOS (Packages)
README
[](https://pub.dev/packages/bitsdojo_window)
[](https://pub.dev/packages/bitsdojo_window)
[](https://pub.dev/packages/bitsdojo_window)
[](https://github.com/bitsdojo/bitsdojo_window/stargazers)
[](https://github.com/bitsdojo/bitsdojo_window/actions/workflows/build_test.yaml)
[](https://github.com/bitsdojo/bitsdojo_window/blob/main/LICENSE)
# bitsdojo_window
A [Flutter package](https://pub.dev/packages/bitsdojo_window) that makes it easy to customize and work with your Flutter desktop app window on **Windows**, **macOS** and **Linux**.
Watch the tutorial to get started. Click the image below to watch the video:
[](https://www.youtube.com/watch?v=bee2AHQpGK4 "Click to open")
**Features**:
- Custom window frame - remove standard Windows/macOS/Linux titlebar and buttons
- Hide window on startup
- Show/hide window
- Move window using Flutter widget
- Minimize/Maximize/Restore/Close window
- Set window size, minimum size and maximum size
- Set window position
- Set window alignment on screen (center/topLeft/topRight/bottomLeft/bottomRight)
- Set window title
# Getting Started
Add the package to your project's `pubspec.yaml` file manually or using the command below:
```shell
pub add bitsdojo_window
```
The `pubspec.yaml` file should look like this:
```diff
// pubspec.yaml
...
dependencies:
flutter:
sdk: flutter
+ bitsdojo_window: ^0.1.6
dev_dependencies:
...
```
# For Windows apps
Inside your application folder, go to `windows\runner\main.cpp` and change the code look like this:
```diff
// windows/runner/main.cpp
...
#include "flutter_window.h"
#include "utils.h"
+ #include
+ auto bdw = bitsdojo_window_configure(BDW_CUSTOM_FRAME | BDW_HIDE_ON_STARTUP);
int APIENTRY wWinMain(_In_ HINSTANCE instance, _In_opt_ HINSTANCE prev,
...
```
# For macOS apps
Inside your application folder, go to `macos\runner\MainFlutterWindow.swift` and change the code look like this:
```diff
// macos/runner/MainFlutterWindow.swift
import Cocoa
import FlutterMacOS
+ import bitsdojo_window_macos
- class MainFlutterWindow: NSWindow {
+ class MainFlutterWindow: BitsdojoWindow {
+ override func bitsdojo_window_configure() -> UInt {
+ return BDW_CUSTOM_FRAME | BDW_HIDE_ON_STARTUP
+ }
override func awakeFromNib() {
...
}
}
```
#
If you don't want to use a custom frame and prefer the standard window titlebar and buttons, you can remove the `BDW_CUSTOM_FRAME` flag from the code above.
If you don't want to hide the window on startup, you can remove the `BDW_HIDE_ON_STARTUP` flag from the code above.
# For Linux apps
Inside your application folder, go to `linux\my_application.cc` and change the code look like this:
```diff
// linux/my_application.cc
...
#include "flutter/generated_plugin_registrant.h"
+ #include
struct _MyApplication {
...
}
+ auto bdw = bitsdojo_window_from(window);
+ bdw->setCustomFrame(true);
- gtk_window_set_default_size(window, 1280, 720);
gtk_widget_show(GTK_WIDGET(window));
g_autoptr(FlDartProject) project = fl_dart_project_new();
...
}
```
# Flutter app integration
Now go to `lib\main.dart` and change the code look like this:
```diff
// lib/main.dart
import 'package:flutter/material.dart';
+ 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();
+ });
}
```
This will set an initial size and a minimum size for your application window, center it on the screen and show it on the screen.
You can find examples in the [example](./bitsdojo_window/example) folder.
Here is an example that displays this window:
Click to expand
```dart
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();
});
}
const borderColor = Color(0xFF805306);
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: WindowBorder(
color: borderColor,
width: 1,
child: Row(
children: const [LeftSide(), RightSide()],
),
),
),
);
}
}
const sidebarColor = Color(0xFFF6A00C);
class LeftSide extends StatelessWidget {
const LeftSide({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SizedBox(
width: 200,
child: Container(
color: sidebarColor,
child: Column(
children: [
WindowTitleBarBox(child: MoveWindow()),
Expanded(child: Container())
],
)));
}
}
const backgroundStartColor = Color(0xFFFFD500);
const backgroundEndColor = Color(0xFFF6A00C);
class RightSide extends StatelessWidget {
const RightSide({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Expanded(
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [backgroundStartColor, backgroundEndColor],
stops: [0.0, 1.0]),
),
child: Column(children: [
WindowTitleBarBox(
child: Row(
children: [Expanded(child: MoveWindow()), const WindowButtons()],
),
)
]),
),
);
}
}
final buttonColors = WindowButtonColors(
iconNormal: const Color(0xFF805306),
mouseOver: const Color(0xFFF6A00C),
mouseDown: const Color(0xFF805306),
iconMouseOver: const Color(0xFF805306),
iconMouseDown: const Color(0xFFFFD500));
final closeButtonColors = WindowButtonColors(
mouseOver: const Color(0xFFD32F2F),
mouseDown: const Color(0xFFB71C1C),
iconNormal: const Color(0xFF805306),
iconMouseOver: Colors.white);
class WindowButtons extends StatelessWidget {
const WindowButtons({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Row(
children: [
MinimizeWindowButton(colors: buttonColors),
MaximizeWindowButton(colors: buttonColors),
CloseWindowButton(colors: closeButtonColors),
],
);
}
}
```
#
# **Want to help? Become a sponsor**
I am developing this package in my spare time and any help is appreciated.
If you want to help you can [become a sponsor](https://github.com/sponsors/bitsdojo).
🙏 Thank you!
## ☕️ Current sponsors:
No sponsors