Code Monkey home page Code Monkey logo

flutter_macos_menubar_example's Introduction

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)

multi_windows demo


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
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)
  }
}
  1. Add a new Swift file named 'StatusBarController.swift' in XCode Xcode > File > New > File... Select Swift File Name it StatusBarController.swift
  2. 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)
    }
}
  1. 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)
  1. Done! You can now build your menubar app with flutter. Complete

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.

flutter_macos_menubar_example's People

Contributors

dependabot[bot] avatar mynameiskenlee avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

flutter_macos_menubar_example's Issues

error: value of optional type 'NSWindow?' must be unwrapped to refer to member 'close' of wrapped base type 'NSWindow'

If you are also encountering the error as titled with error detail:

/macos/Runner/AppDelegate.swift:20:9: error: value of optional type 'NSWindow?' must be unwrapped to refer to member 'close' of wrapped base type 'NSWindow'
        mainFlutterWindow.close() //close the default flutter window
        ^
        mainFlutterWindow.close() //close the default flutter window

        ^
                         ?
        mainFlutterWindow.close() //close the default flutter window
        ^
                         !
** BUILD FAILED **

Exception: Build process failed

Exited (1).

Replace line 20

mainFlutterWindow.close() //close the default flutter window

in AppDelegate.swift with:

guard let window = mainFlutterWindow else {
        print("mainFlutterWindow is nil")
        return
}
window.close()

Flutter version: Flutter (Channel stable, 3.16.7, on macOS 14.2.1 23C71 darwin-arm64, locale en-US).

How to Change MenuBar App Icon?

Hello,
I have a question regarding my Flutter application. How can I change the default Flutter logo icon in the app's menu bar?

Additionally, is it possible to use a dynamic icon? For instance, I'm developing a VPN app, and I'd like the app icon to change based on whether the VPN is connected or disconnected

Thank you for your help!

Content of the app is not clickable

Thank you for this template, but it, unfortunately, doesn't work for me. It compiles, shows and hides, but the content of the app isn't clickable. I can't press the close text button or fab button. Could you help me?

Flutter 3.0.5
macOS 12.1 M1 Pro

Screen.Recording.2022-07-27.at.20.16.29.mov

Icon not showing

The Flutter Icon is not showing. Shows only a black square.
MacOS 13.4

Detect menubar popup open

I've started making a menu bar app with this example by following the steps described.

Since I need a page reload when the app appears, I've already added focus_detector for that purpose. I am now looking for a way to detect when the popup is opened.

This needs to be without breaking compatibility with the other platforms that don't use a menu bar (e.g. iOS, Android).

Mouse move could not be detected

I'm trying to migrate my app to a menubar application for macOS. But it seems that all mouse move events were not passed to my app correctly. But click works well.

20221103170730_rec_.mp4

In the video, all the ripples effects were produced by click. And as the list scrolls, the effect is pointing to the wrong position.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.