Un ensemble de méthodes pour modifier la NSWindow d’une application Flutter sur macOS

macos_window_utils est un paquet Flutter qui fournit un ensemble de méthodes pour modifier le NSWindow d’une application Flutter sur macOS. Avec ce package, vous pouvez facilement personnaliser l’apparence et le comportement de la fenêtre de votre application, y compris la barre de titre, les effets de transparence, l’ombre, etc.

Caractéristiques

macos_window_utils offre, entre autres, les fonctionnalités suivantes :

• Méthodes pour définir le matériau de la fenêtre de l’application.
• Méthodes pour entrer/sortir du mode plein écran ou (dé)zoomer la fenêtre.
• Méthodes pour marquer une fenêtre comme « document édité ».
• Méthodes pour définir les noms de fichiers et les URL représentés.
• Méthodes pour masquer/afficher le titre de la fenêtre.
• Méthodes pour activer/désactiver l’affichage du contenu en taille réelle.
• Méthodes pour afficher/masquer et activer/désactiver les boutons de feux de circulation de la fenêtre.
• Une méthode pour définir la valeur alpha de la fenêtre.
• Méthodes pour ajouter une barre d’outils à la fenêtre et définir son style.
• Une méthode pour ajouter un sous-titre à la fenêtre.
• Méthodes pour que la fenêtre ignore les événements de la souris.
• Une méthode qui rend la fenêtre entièrement transparente (sans effet de flou).
• Méthodes pour activer/désactiver l’ombre de la fenêtre.
• Méthodes et widgets pour ajouter, supprimer et modifier des sous-vues d’effets visuels.

De plus, le package est livré avec un exemple de projet qui présente les fonctionnalités du plug-in via une interface utilisateur intuitive et consultable :

Commencer

Ouvrez le macos/Runner.xcworkspace dossier de votre projet à l’aide de Xcode, appuyez sur ⇧ + ⌘ + O et recherchez MainFlutterWindow.swift.

Insérer import macos_window_utils en haut du fichier. Ensuite, remplacez le code au-dessus du super.awakeFromNib()-ligne avec le code suivant :

let windowFrame = self.frame
let macOSWindowUtilsViewController = MacOSWindowUtilsViewController()
self.contentViewController = macOSWindowUtilsViewController
self.setFrame(windowFrame, display: true)

/* Initialize the macos_window_utils plugin */
MainFlutterWindowManipulator.start(mainFlutterWindow: self)

RegisterGeneratedPlugins(registry: macOSWindowUtilsViewController.flutterViewController)

En supposant que vous commenciez avec la configuration par défaut, le code final devrait ressembler à ceci :

import Cocoa
import FlutterMacOS
+import macos_window_utils

class MainFlutterWindow: NSWindow {
  override func awakeFromNib() {
-   let flutterViewController = FlutterViewController.init()
-   let windowFrame = self.frame
-   self.contentViewController = flutterViewController
-   self.setFrame(windowFrame, display: true)

-   RegisterGeneratedPlugins(registry: flutterViewController)
    
+   let windowFrame = self.frame
+   let macOSWindowUtilsViewController = MacOSWindowUtilsViewController()
+   self.contentViewController = macOSWindowUtilsViewController
+   self.setFrame(windowFrame, display: true)

+   /* Initialize the macos_window_utils plugin */
+   MainFlutterWindowManipulator.start(mainFlutterWindow: self)

+   RegisterGeneratedPlugins(registry: macOSWindowUtilsViewController.flutterViewController)

    super.awakeFromNib()
  }
}

Maintenant, appuyez à nouveau sur ⇧ + ⌘ + O et recherchez Runner.xcodeproj. Aller à info > Deployment Target et réglez le macOS Deployment Target à 10.13 ou au-dessus.

Selon votre cas d’utilisation, vous souhaiterez peut-être étendre la zone de la fenêtre sur laquelle Flutter peut dessiner à l’ensemble de la fenêtre, de sorte que vous puissiez également dessiner sur la barre de titre de la fenêtre (par exemple, lorsque vous essayez uniquement de rendre la barre latérale transparente tandis que le reste de la fenêtre est censé rester opaque).

Pour ce faire, activez l’affichage du contenu en taille réelle avec le code Dart suivant :

WindowManipulator.makeTitlebarTransparent();
WindowManipulator.enableFullSizeContentView();

Lorsque vous décidez de le faire, il est recommandé d’envelopper votre application (ou des parties de celle-ci) dans un TitlebarSafeArea widget comme suit :

TitlebarSafeArea(
  child: YourApp(),
)

Cela garantit que votre application n’est pas couverte par la barre de titre de la fenêtre.

De plus, il peut être utile d’envisager de diviser votre barre latérale et votre vue principale en plusieurs NSVisualEffectViewest à l’intérieur de votre application. En effet, macOS dispose d’une fonctionnalité appelée « teinte de fond d’écran », qui est activée par défaut. Cette fonctionnalité permet aux fenêtres de se fondre dans le fond d’écran du bureau :

Pour obtenir le même effet dans votre application Flutter, vous pouvez définir le matériau de la fenêtre sur NSVisualEffectViewMaterial.windowBackground et enveloppez votre widget de barre latérale avec un TransparentMacOSSidebar widget comme ceci:

TransparentMacOSSidebar(
  child: YourSidebarWidget(),
)

Noter: Le widget redimensionnera automatiquement le NSVisualEffectView lorsqu’un redimensionnement est détecté dans le widget build méthode. Si vous animez la taille de votre barre latérale à l’aide d’un TweenAnimationBuilderveuillez vous assurer que le TransparentMacOSSidebar le widget est construit dans le TweenAnimationBuilderc’est build méthode, afin de garantir qu’une reconstruction est déclenchée lorsque la taille change. Pour référence, il y a un exemple de travail dans le transparent_sidebar_and_content.dart dossier de la example projet.

Usage

Initialisez le plugin comme suit :

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await WindowManipulator.initialize();
  runApp(MyApp());
}

Ensuite, appelez n’importe quelle méthode de WindowManipulator classe pour manipuler la fenêtre de votre application.

Licence

MA licence

GitHub

Voir Github