Skip to content

Commit

Permalink
Add CI, update example, dependencies, readme (#228)
Browse files Browse the repository at this point in the history
* Add CI and update example

1. Add CI build test with GitHub Actions
2. Delete example web target
3. Change example target name to `bitsdojo_window_example`
4. Update example dependencies version

* Update dependencies version

* Update README.md

1. Add badges
2. Optimize markdown syntax
3. Update code block readability

* Add file path to code block

* macOS fixes
  • Loading branch information
bookshiyi authored Dec 23, 2023
1 parent 816d217 commit 978d1ee
Show file tree
Hide file tree
Showing 39 changed files with 476 additions and 349 deletions.
97 changes: 97 additions & 0 deletions .github/workflows/build_test.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
name: build-test

on:
push:
branches:
- master
paths-ignore:
- ".vscode/**"
- "CHANGELOG.md"
- "LICENSE"
- "README.md"
- "resources/**"
- "**/CHANGELOG.md"
- "**/LICENSE"
- "**/README.md"
pull_request:
paths-ignore:
- ".vscode/**"
- "CHANGELOG.md"
- "LICENSE"
- "README.md"
- "resources/**"
- "**/CHANGELOG.md"
- "**/LICENSE"
- "**/README.md"
workflow_dispatch:

concurrency:
group: >
${{ github.workflow }}
${{ github.event.pull_request.number || github.ref }}
cancel-in-progress: true

jobs:
build:
name: ${{ matrix.runner }}
runs-on: ${{ matrix.runner }}-latest
timeout-minutes: 30
strategy:
fail-fast: false # Important
matrix:
runner: [ubuntu, windows, macos]
include:
- runner: ubuntu
target: linux
- runner: windows
target: windows
- runner: macos
target: macos

steps:
- name: Checkout repository
uses: actions/checkout@v3
with:
fetch-depth: 1
submodules: true

- name: Setup Flutter SDK
uses: subosito/flutter-action@v2
with:
channel: "stable"
cache: true

- name: Setup Ninja and GTK3 toolchain (Only Linux)
if: matrix.runner == 'ubuntu'
run: |
sudo apt-get update -y
sudo apt-get install -y ninja-build libgtk-3-dev
- name: Fetch dependencies
working-directory: bitsdojo_window/example
run: flutter pub get

- name: Run flutter build ${{ matrix.target }}
working-directory: bitsdojo_window/example
run: flutter build ${{ matrix.target }} --release -v

- name: Archive artifacts (Linux)
if: matrix.runner == 'ubuntu'
uses: actions/upload-artifact@v3
with:
name: bitsdojo_window_example_${{ matrix.runner }}
path: bitsdojo_window/example/build/linux/x64/release/bundle/

- name: Archive artifacts (Windows)
if: matrix.runner == 'windows'
uses: actions/upload-artifact@v3
with:
name: bitsdojo_window_example_${{ matrix.runner }}
path: bitsdojo_window/example/build/windows/runner/Release/bitsdojo_window_example.exe

- name: Archive artifacts (macOS)
if: matrix.runner == 'macos'
uses: actions/upload-artifact@v3
with:
name: bitsdojo_window_example_${{ matrix.runner }}
path: bitsdojo_window/example/build/macos/Build/Products/Release/bitsdojo_window_example.app
191 changes: 111 additions & 80 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,79 +1,102 @@
[![Pub Version](https://img.shields.io/pub/v/bitsdojo_window)](https://pub.dev/packages/bitsdojo_window)
[![Pub Popularity](https://img.shields.io/pub/popularity/bitsdojo_window)](https://pub.dev/packages/bitsdojo_window)
[![Pub Points](https://img.shields.io/pub/points/bitsdojo_window)](https://pub.dev/packages/bitsdojo_window)

[![GitHub Stars](https://img.shields.io/github/stars/bitsdojo/bitsdojo_window)](https://github.com/bitsdojo/bitsdojo_window/stargazers)
[![Build Test](https://github.com/bitsdojo/bitsdojo_window/actions/workflows/build_test.yaml/badge.svg)](https://github.com/bitsdojo/bitsdojo_window/actions/workflows/build_test.yaml)
[![GitHub License](https://img.shields.io/github/license/bitsdojo/bitsdojo_window)](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**.
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:
Watch the tutorial to get started. Click the image below to watch the video:

[![IMAGE ALT TEXT](https://img.youtube.com/vi/bee2AHQpGK4/0.jpg)](https://www.youtube.com/watch?v=bee2AHQpGK4 "Click to open")

<img src="https://raw.githubusercontent.com/bitsdojo/bitsdojo_window/master/resources/screenshot.png">

**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
- 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

Install the package using `pubspec.yaml`
Add the package to your project's `pubspec.yaml` file manually or using the command below:

# For Windows apps
```shell
pub add bitsdojo_window
```

Inside your application folder, go to `windows\runner\main.cpp` and add these two lines at the beginning of the file:
The `pubspec.yaml` file should look like this:

```cpp
#include <bitsdojo_window_windows/bitsdojo_window_plugin.h>
auto bdw = bitsdojo_window_configure(BDW_CUSTOM_FRAME | BDW_HIDE_ON_STARTUP);
```
```diff
// pubspec.yaml

# For macOS apps
...

Inside your application folder, go to `macos\runner\MainFlutterWindow.swift` and add this line after the one saying `import FlutterMacOS` :
dependencies:
flutter:
sdk: flutter
+ bitsdojo_window: ^0.1.6

```swift
import FlutterMacOS
import bitsdojo_window_macos // Add this line
dev_dependencies:

...
```

Then change this line from:
# For Windows apps

```swift
class MainFlutterWindow: NSWindow {
```
Inside your application folder, go to `windows\runner\main.cpp` and change the code look like this:

to this:
```diff
// windows/runner/main.cpp

```swift
class MainFlutterWindow: BitsdojoWindow {
```
...

After changing `NSWindow` to `BitsdojoWindow` add these lines below the line you changed:
#include "flutter_window.h"
#include "utils.h"

```swift
override func bitsdojo_window_configure() -> UInt {
return BDW_CUSTOM_FRAME | BDW_HIDE_ON_STARTUP
}
+ #include <bitsdojo_window_windows/bitsdojo_window_plugin.h>
+ auto bdw = bitsdojo_window_configure(BDW_CUSTOM_FRAME | BDW_HIDE_ON_STARTUP);

int APIENTRY wWinMain(_In_ HINSTANCE instance, _In_opt_ HINSTANCE prev,

...
```

Your code should now look like this:
# 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

```swift
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: NSWindow {
+ class MainFlutterWindow: BitsdojoWindow {
+ override func bitsdojo_window_configure() -> UInt {
+ return BDW_CUSTOM_FRAME | BDW_HIDE_ON_STARTUP
+ }
override func awakeFromNib() {

...

}
}

override func awakeFromNib() {
... //rest of your code
```

#

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.
Expand All @@ -82,57 +105,63 @@ If you don't want to hide the window on startup, you can remove the `BDW_HIDE_ON

# For Linux apps

Inside your application folder, go to `linux\my_application.cc` and add this line at the beginning of the file:
Inside your application folder, go to `linux\my_application.cc` and change the code look like this:

```cpp
#include <bitsdojo_window_linux/bitsdojo_window_plugin.h>
```
Then look for these two lines:
```diff
// linux/my_application.cc

```cpp
gtk_window_set_default_size(window, 1280, 720);
gtk_widget_show(GTK_WIDGET(window));
```
and change them to this:
...
#include "flutter/generated_plugin_registrant.h"
+ #include <bitsdojo_window_linux/bitsdojo_window_plugin.h>

```cpp
auto bdw = bitsdojo_window_from(window); // <--- add this line
bdw->setCustomFrame(true); // <-- add this line
//gtk_window_set_default_size(window, 1280, 720); // <-- comment this line
gtk_widget_show(GTK_WIDGET(window));
```
struct _MyApplication {

...

}

As you can see, we commented the line calling `gtk_window_set_default_size` and added these two lines before `gtk_widget_show(GTK_WIDGET(window));`
+ 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();

...

}

```cpp
auto bdw = bitsdojo_window_from(window);
bdw->setCustomFrame(true);
```

# Flutter app integration

Now go to `lib\main.dart` and add this code in the `main` function right after `runApp(MyApp());` :
Now go to `lib\main.dart` and change the code look like this:

```dart
void main() {
runApp(MyApp());
```diff
// lib/main.dart

// Add this code below
import 'package:flutter/material.dart';
+ import 'package:bitsdojo_window/bitsdojo_window.dart';

doWhenWindowReady(() {
const initialSize = Size(600, 450);
appWindow.minSize = initialSize;
appWindow.size = initialSize;
appWindow.alignment = Alignment.center;
appWindow.show();
});
}
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` folder.
You can find examples in the [example](./bitsdojo_window/example) folder.

Here is an example that displays this window:

<details>
<summary>Click to expand</summary>

Expand Down Expand Up @@ -249,9 +278,11 @@ class WindowButtons extends StatelessWidget {
}
}
```

</details>

#

# **Want to help? Become a sponsor**

I am developing this package in my spare time and any help is appreciated.
Expand All @@ -262,4 +293,4 @@ If you want to help you can [become a sponsor](https://github.com/sponsors/bitsd

## ☕️ Current sponsors:

No sponsors
No sponsors
2 changes: 2 additions & 0 deletions bitsdojo_window/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
## 0.1.6
- Various fixes to work with latest Flutter version
## 0.1.5
- Runs on Windows 7
## 0.1.4
Expand Down
Loading

0 comments on commit 978d1ee

Please sign in to comment.