flutter_macos_menubar_example
starter template for building menubar app in flutter
Use 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:
- Change to Content of macos/Runner/AppDelegate.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)
}
}
- Add a new Swift file named 'StatusBarController.swift' in XCode
- Add the following code to the StatusBarController.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)
}
}
- Add the following to macos/Runner/Info.plist to hide the dock icon and application menu
<key>LSUIElement</key>
<true/>
To close the app programmatically, use the following code
exit(0)
- 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:
For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.