Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mynameiskenlee/flutter_macos_menubar_example
starter template for building macOS menubar app with flutter and AppKit
https://github.com/mynameiskenlee/flutter_macos_menubar_example
appkit flutter flutter-example-app flutter-macos flutter-template macos menubar-app
Last synced: 8 days ago
JSON representation
starter template for building macOS menubar app with flutter and AppKit
- Host: GitHub
- URL: https://github.com/mynameiskenlee/flutter_macos_menubar_example
- Owner: mynameiskenlee
- Created: 2022-03-11T16:24:28.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-01-16T06:26:40.000Z (10 months ago)
- Last Synced: 2024-08-01T19:37:02.135Z (3 months ago)
- Topics: appkit, flutter, flutter-example-app, flutter-macos, flutter-template, macos, menubar-app
- Language: Dart
- Homepage: https://www.reddit.com/r/FlutterDev/comments/g7aavn/creating_a_menubar_app_for_macos/
- Size: 1.97 MB
- Stars: 123
- Watchers: 1
- Forks: 14
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- my-awesome-list - flutter_macos_menubar_example
README
# flutter_macos_menubar_example
starter template for building menubar app in flutter
Use [multi_windows](https://github.com/mynameiskenlee/flutter_macos_menubar_example/tree/multi_windows) branch for example with addtional windows (select include all branches when using this template)
-------------------------------------------------------
## Getting Started (for single window menu bar app only)
use this template or follow the following step in your flutter project:
1. Change to Content of macos/Runner/AppDelegate.swift
```[language=swift]
import Cocoa
import FlutterMacOS
@NSApplicationMain
class AppDelegate: FlutterAppDelegate {
var statusBar: StatusBarController?
var popover = NSPopover.init()
override init() {
popover.behavior = NSPopover.Behavior.transient //to make the popover hide when the user clicks outside of it
}
override func applicationShouldTerminateAfterLastWindowClosed(_ sender: NSApplication) -> Bool {
return false
}
override func applicationDidFinishLaunching(_ aNotification: Notification) {
let controller: FlutterViewController =
mainFlutterWindow?.contentViewController as! FlutterViewController
popover.contentSize = NSSize(width: 360, height: 360) //change this to your desired size
popover.contentViewController = controller //set the content view controller for the popover to flutter view controller
statusBar = StatusBarController.init(popover)
mainFlutterWindow.close() //close the default flutter window
super.applicationDidFinishLaunching(aNotification)
}
}
```
2. Add a new Swift file named 'StatusBarController.swift' in XCode
3. Add the following code to the StatusBarController.swift
```[language=swift]
import AppKit
class StatusBarController {
private var statusBar: NSStatusBar
private var statusItem: NSStatusItem
private var popover: NSPopover
init(_ popover: NSPopover) {
self.popover = popover
statusBar = NSStatusBar.init()
statusItem = statusBar.statusItem(withLength: 28.0)
if let statusBarButton = statusItem.button {
statusBarButton.image = #imageLiteral(resourceName: "AppIcon") //change this to your desired image
statusBarButton.image?.size = NSSize(width: 18.0, height: 18.0)
statusBarButton.image?.isTemplate = true
statusBarButton.action = #selector(togglePopover(sender:))
statusBarButton.target = self
}
}
@objc func togglePopover(sender: AnyObject) {
if(popover.isShown) {
hidePopover(sender)
}
else {
showPopover(sender)
}
}
func showPopover(_ sender: AnyObject) {
if let statusBarButton = statusItem.button {
popover.show(relativeTo: statusBarButton.bounds, of: statusBarButton, preferredEdge: NSRectEdge.maxY)
}
}
func hidePopover(_ sender: AnyObject) {
popover.performClose(sender)
}
}
```
4. Add the following to macos/Runner/Info.plist to hide the dock icon and application menu
```[language=xml]
LSUIElement
```
To close the app programmatically, use the following code
```[language=dart]
exit(0)
```
5. Done!
You can now build your menubar app with flutter.
-------------------------------------------------------
This project is a starting point for a Flutter menubar application in macOS.
A few resources to get you started if this is your first Flutter project:
- [Lab: Write your first Flutter app](https://flutter.dev/docs/get-started/codelab)
- [Cookbook: Useful Flutter samples](https://flutter.dev/docs/cookbook)
For help getting started with Flutter, view our
[online documentation](https://flutter.dev/docs), which offers tutorials,
samples, guidance on mobile development, and a full API reference.