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)
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent