作者 / Chris Sells, chef de produit, expérience développeur Flutter
Notre mission est de fournir aux développeurs un framework open source et efficace pour les aider à créer de belles applications natives sur n'importe quelle plateforme. Jusqu'à présent, nous avons apporté une prise en charge au niveau de la production pour Android et iOS, publié 8 versions stables et plus de 100000 applications utilisent Flutter dans le seul Google Play Store . Nous continuons à travailler dur pour étendre la prise en charge à d'autres plates-formes telles que le Web, macOS et Linux. Maintenant, un autre objectif de Flutter, à savoir la version Alpha de Flutter qui prend en charge Windows, a été publié.
Windows est toujours un choix populaire pour les ordinateurs de bureau et portables. Selon un rapport de Microsoft, Windows 10 compte plus d'un milliard d'appareils actifs. Nos statistiques montrent que plus de la moitié des développeurs Flutter utilisent Windows, et Flutter devrait naturellement prendre en charge ce système. La prise en charge native du bureau offre diverses possibilités pour Flutter, ce qui est vraiment passionnant, y compris l'amélioration des outils de développement et la réduction du fardeau pour les nouveaux utilisateurs. Bien sûr, il peut également permettre aux développeurs d'utiliser une base de code unique pour tout appareil que l'utilisateur peut avoir. Créez des applications.
Windows 10: alimenter 1 milliard d'appareils actifs par mois dans le monde
https://blogs.windows.com/windowsexperience/2020/03/16/windows-10-powering-the-world-with-1-billion-monthly-active-devices/
Ajouter la prise en charge de Windows à Flutter
Comme nous l'avons dit dans la présentation de l'architecture, Flutter est une boîte à outils d'interface multiplateforme conçue pour réaliser la réutilisation du code entre différents systèmes d'exploitation (tels que iOS et Android), tout en permettant aux applications de s'interfacer directement avec les services de la plate-forme sous-jacents. Notre objectif est de permettre aux développeurs de fournir des applications hautes performances qui peuvent s'exécuter naturellement et en douceur sur différentes plates-formes, tout en partageant le plus possible du code, tout en tolérant les différences entre les différentes plates-formes. Le cœur de Flutter est le moteur, qui prend en charge les primitives nécessaires et fournit un support pour toutes les applications Flutter. Chaque fois qu'une nouvelle image doit être dessinée, le moteur est responsable de la pixellisation de la scène composite. Le moteur fournit l'implémentation sous-jacente de l'API principale de Flutter, y compris les graphiques, la disposition du texte, les E / S de fichiers et réseau, la prise en charge de l'accessibilité, l'architecture de plug-in et la chaîne d'outils d'exécution et de compilation Dart.
Vue d'ensemble de l'architecture
https://flutter.cn/docs/resources/architectural-overview
Chaque fois que nous ajouterons une nouvelle plate-forme cible à Flutter, nous étendrons le cadre de base avec de nouveaux services afin qu'il puisse bien fonctionner sur cette plate-forme. Nous avons d'abord implémenté le Material Design sur Android et iOS, ainsi qu'une interface tactile pour les appareils mobiles, afin d'obtenir une expérience parfaite au niveau du pixel sur ces deux plates-formes mobiles. Dans les environnements de bureau tels que le Web, Windows, macOS et Linux, Flutter fournit également un tout nouvel ensemble de services, y compris une prise en charge solide des méthodes de saisie du clavier, de la souris, de la molette de défilement et du contrôleur, ainsi que des widgets pouvant s'adapter à ces plates-formes (certains les widgets fonctionnent même mieux sur les grands écrans dans les applications Web et de bureau).
De plus, chaque nouvelle plateforme affectera non seulement le framework et le moteur de Flutter, mais également de nombreux autres aspects:
Mise à jour de la chaîne d'outils : ajoutez de nouvelles plates-formes cibles pour les outils CLI et IDE (comme Windows dans cet article)
Shell : prend en charge le traitement des entrées de Windows via les messages WM_ *, et réalise la sortie via ANGLE. ANGLE utilise Skia pour effectuer le rendu sur l'interface DirectX sous-jacente à la vitesse native
Runner : chaque projet s'exécutera sur la plateforme cible via une application conteneur. Pour Windows, l'application conteneur est un programme Win32 / C ++ qui peut charger votre code Flutter et l'exécuter au moment de l'exécution. Si vous en avez besoin, vous pouvez ajouter du code natif pour votre application ici.
Plug-ins : les plug-ins sont une collection de code Dart et de code natif pour chaque plate-forme prise en charge. Le code natif doit être ajouté à chaque plug-in, et ces plug-ins seront compilés dans votre version Windows de l'application Flutter.
ANGLE
https://opensource.google/projects/angle
Skia
https://skia.org/
La version alpha publiée cette fois a jeté une base solide pour notre travail dans les mois à venir. Avec la prise en charge de Windows 7 et versions ultérieures, nous espérons qu'il pourra fournir un point de départ aux développeurs qui aiment les premiers utilisateurs.
Exemple d'introduction d'application
Pour bien comprendre la prise en charge de Flutter pour Windows, vous pouvez consulter quelques-uns des exemples d'applications que nous avons créés. Ces applications fonctionnent bien sous Windows grâce à notre nouvelle prise en charge. Le premier exemple est l'application Flokk, qui est le résultat de notre collaboration avec les concepteurs et développeurs de gskinner.com. Nous visons à montrer que Flutter est prêt pour le bureau en créant une application de bureau Flutter créative et belle. Flokk est une application qui peut utiliser vos vraies données de contacts Google et afficher les activités de vos contacts sur GitHub et Twitter.
Si vous souhaitez utiliser l'application Flokk sur votre appareil Windows, vous pouvez télécharger la dernière version sur GitHub. Si vous voulez savoir comment gskinner a développé cette application, vous pouvez consulter leur article de blog: Flokk-Comment nous utilisons Flutter pour créer des applications de bureau.
Télécharger Flokk
https://github.com/gskinnerTeam/Flokk/releases
Flokk-Comment nous utilisons Flutter pour créer des applications de bureau
https://blog.gskinner.com/archives/2020/09/flokk---how-we-built-a-desktop-app-using-flutter.html
De plus, notre exemple d'application Flutter Gallery peut vous montrer tous les aspects de Flutter. Cette application a récemment été complètement réécrite pour ajouter la prise en charge des appareils de bureau. Par conséquent, nous pouvons nous assurer qu'il fonctionne bien sur le Web, Windows, macOS et Linux.
Flutter Gallery (Web 版)
https://gallery.flutter.cn/
De nombreux cas dans la galerie Flutter représentent des styles d'application avec différents concepts. Nous vous recommandons de vous y référer lorsque vous concevez vos propres applications Windows à l'aide de Flutter. Si vous êtes intéressé, vous pouvez trouver le code source sur GitHub.
Adresse du code source
https://github.com/flutter/gallery
Commencez à utiliser Flutter pour Windows
Veuillez suivre les instructions d'installation de Windows pour commencer à installer le SDK Flutter. Pour cibler les périphériques de bureau Windows, vous devez d'abord installer les outils décrits dans la documentation de bureau. Par défaut, Flutter suppose que vous créez la version officielle du logiciel et que vous ne l'avez pas configurée pour développer des applications Windows. Cependant, cela est facilement résolu via la ligne de commande:
$ flutter channel dev
$ flutter upgrade
$ flutter config --enable-windows-desktop
Installer et configurer l'environnement de développement Flutter sur le système Windows
https://flutter.cn/docs/get-started/install/windows
Outils décrits dans la documentation de bureau
https://flutter.cn/desktop#additional-windows-requirements
La première commande configure Flutter pour utiliser le canal expérimental "dev" (au lieu du canal "stable" par défaut). De cette façon, vous pouvez utiliser la prise en charge de la plate-forme qui est encore au stade alpha, comme Windows. La deuxième commande peut obtenir la dernière version sur le canal. La troisième commande vous permet de développer des applications Windows sur votre PC.
Une fois ces paramètres définis, chaque fois que vous créez une nouvelle application Flutter via l'extension Android Studio ou Visual Studio Code, ou via la ligne de commande, un sous-dossier Windows est créé.
Studio Android
https://flutter.cn/docs/get-started/editor?tab=androidstudio
Code Visual Studio
https://flutter.cn/docs/get-started/editor?tab=vscode
Si vous êtes curieux, veuillez exécuter l'application par défaut sous Windows comme suit:
Après avoir créé l'application, la création de l'application générera un fichier EXE natif en mode version et la DLL de prise en charge nécessaire. Si vous souhaitez exécuter cette nouvelle application Windows sur un appareil Windows 10 sur lequel Flutter n'est pas installé, vous pouvez compresser et empaqueter les fichiers nécessaires selon les instructions ici.
Distribuer des applications dans l'environnement de bureau
https://flutter.cn/desktop#distribution
Plug-in Windows
Bien que la prise en charge actuelle de Windows soit toujours une version alpha, les membres de la communauté Flutter développent déjà des plug-ins Windows. comprendre:
url_launcher: lancez le navigateur depuis votre application et ouvrez l'URL donnée
https://pub.flutter-io.cn/packages/url_launcher
path_provider: indiquez le chemin des répertoires spéciaux sur l'appareil de l'utilisateur, tels que Documents et temp
https://pub.flutter-io.cn/packages/path_provider
shared_preferences: sérialisez les préférences utilisateur sur le disque pour le partage entre vos sessions d'application
https://pub.flutter-io.cn/packages/shared_preferences
biometric_storage: stockage chiffré par biométrie
https://pub.flutter-io.cn/packages/biometric_storage
flutter_audio_desktop: lecture audio dans l'application de bureau
https://pub.flutter-io.cn/packages/flutter_audio_desktop
L'avantage d'utiliser ces plug-ins est que la plupart d'entre eux prennent également en charge d'autres plates-formes Flutter, vous pouvez donc adapter vos applications à Android, iOS, Web, Windows et d'autres plates-formes. De plus, bien que sur pub.dev (la plate-forme de gestion de paquets de Dart et Flutter), environ un tiers des paquets sont des plug-ins qui contiennent du code spécifique à la plate-forme, mais la plupart des plug-ins ne le sont pas. Par exemple, de nombreux packages de la plus haute qualité et les plus couramment utilisés figurent dans la liste des plans Flutter Favorite, et la plupart d'entre eux peuvent s'exécuter sous Windows. Si vous souhaitez voir la liste complète des packages pouvant s'exécuter sous Windows, vous pouvez interroger sur pub.dev.
Flutter favori
https://pub.flutter-io.cn/flutter/favorites
Package pour la plate-forme Windows
https://pub.flutter-io.cn/flutter/packages?platform=windows
Interopérabilité avec Windows
Vous pouvez également créer vos propres plug-ins Windows. Lorsque vous êtes dans le canal de développement et que vous avez activé le développement Windows pour l'appareil, vous pouvez utiliser la commande suivante:
$ flutter create --template plugin --platforms windows hello_plugin
À ce stade, vous pouvez ajouter votre code Flutter au sous-dossier lib et ajouter le code Windows au sous-dossier Windows du projet de plug-in. Vous utiliserez des canaux de plate-forme pour communiquer entre les deux piles, ce qui correspond essentiellement à la messagerie entre Dart et le code C ++. Pour obtenir le meilleur exemple sur ce sujet, consultez l'implémentation de url_launcher.
Écrire le code de la plate-forme à deux terminaux (implémentation d'écriture de plug-in)
https://flutter.cn/docs/development/platform-integration/platform-channels
Implémentation de url_launcher
https://github.com/flutter/plugins/tree/master/packages/url_launcher/url_launcher_windows
Cependant, le canal de la plate-forme n'est pas votre seule option d'interopérabilité avec Windows. Vous pouvez également utiliser Dart FFI (Foreign Function Interface) pour charger des bibliothèques et appeler des API de style C, telles que les API Win32. Comme vous pouvez le voir dans le référentiel GitHub, le plugin path_provider est implémenté à l'aide de FFI, qui est différent du url_launcher qui utilise le canal de la plateforme. FFI n'a pas besoin de basculer entre Dart et C ++, mais vous permet d'écrire du code pour importer directement l'API de votre choix. Par exemple, voici le code pour appeler l'API MessageBox:
typedef MessageBoxNative = Int32 Function(
IntPtr hWnd,
Pointer<Utf16> lpText,
Pointer<Utf16> lpCaption,
Int32 uType
);
typedef MessageBoxDart = int Function(
int hWnd,
Pointer<Utf16> lpText,
Pointer<Utf16> lpCaption,
int uType
);
final user32 = DynamicLibrary.open('user32.dll');
final win32MessageBox = user32.lookupFunction<MessageBoxNative, MessageBoxDart>('MessageBoxW');
void showMessageBox(String message, String caption) => win32MessageBox(
0, // No owner window
Utf16.toUtf16(message), // Message
Utf16.toUtf16(caption), // Window title
0 // OK button only
);
...
// call just like any other Dart function
showMessageBox('Test Message', 'Window Caption');
Utilisez dart: ffi pour appeler du code natif
https://flutter.cn/docs/development/platform-integration/c-interop
path_provider (Windows 版)
https://github.com/flutter/plugins/tree/master/packages/path_provider/path_provider_windows
Ce code n'a pas le problème de basculer entre deux threads comme les canaux de plateforme. FFI inclut la prise en charge de nombreux types d'API, notamment Win32, WinRT et COM. Mais ne vous précipitez pas pour encapsuler vous-même l'intégralité de l'API Windows basée sur C. Jetez un œil au plug-in win32. Il le fait déjà et il fait du bon travail. En fait, le plug-in path_provider lui-même est implémenté à l'aide de plug-ins win32. Pour le processus de développement et le principe de fonctionnement du plug-in win32, veuillez lire "Utiliser Dart FFI pour améliorer le plaisir du développement Windows".
Plug-in Win32
https://pub.flutter-io.cn/packages/win32
path_provider
https://pub.flutter-io.cn/packages/path_provider
Utilisez Dart FFI pour améliorer le plaisir du développement Windows
https://medium.com/@timsneath/windows-fun-with-dart-ffi-687c4619e78d
Flutter pour les ressources Windows
Peu importe où vous vous trouvez dans le voyage Flutter pour Windows, vous devriez lire la documentation de développement de bureau sur flutter.dev, qui comprend les derniers détails. En outre, vous pouvez également utiliser le laboratoire de codes pour vous familiariser avec l'écriture d'applications de bureau Flutter pour Windows, macOS et Windows, y compris du code pour des scénarios réels tels que l'utilisation d'OAuth pour l'authentification, l'accès à l'API GitHub et l'utilisation de GraphQL. Ou consultez Recherche de photos, un autre exemple de code de bureau Flutter qui s'exécute sous Windows.
Prise en charge du bureau Flutter
http://flutter.cn/desktop
Codelab
https://codelabs.developers.google.com/codelabs/flutter-github-graphql-client
Recherche de photos
https://github.com/flutter/samples/tree/master/experimental/desktop_photo_search
La recherche de photos utilise des boîtes de dialogue d'ouverture de fichiers Windows standard, des widgets d'arborescence, des widgets de vue fractionnée et utilise de véritables API REST pour présenter les résultats de la recherche.
Comme pour les autres widgets orientés bureau, nous recommandons le plug-in de la barre de menus (menubar), le widget NavigationRail et le widget DataTable. Vous pouvez également être intéressé par le widget InteractiveViewer, qui fournit une prise en charge complète du bureau et vous permet de faire un panoramique et un zoom sur ses widgets enfants grâce à des actions de souris.
Barre de menu
https://github.com/google/flutter-desktop-embedding/tree/master/plugins/menubar
NavigationRail
https://api.flutter.cn/flutter/material/NavigationRail-class.html
DataTable
https://api.flutter.cn/flutter/material/DataTable-class.html
InteractiveViewer
https://api.flutter.cn/flutter/widgets/InteractiveViewer-class.html
Un autre groupe de widgets très utiles vient de SyncFusion. Ils sont bien connus dans la communauté de développement Windows et fournissent un grand nombre de widgets de qualité professionnelle pour créer des graphiques, des emplacements de mesure et des grilles de données.
Widgets SyncFusion
https://pub.flutter-io.cn/publishers/syncfusion.com/packages
Ces widgets sont concédés sous licence pour une utilisation communautaire et professionnelle, vous pouvez donc être assuré de trouver le bon outil pour votre projet.
Cas d'application Flutter pour Windows
En plus des packages et plug-ins Windows (et la prise en charge du bureau Flutter au sens large), les développeurs Flutter ont également créé d'excellentes applications pour Windows, comme ce travail expérimental d'Invoice Ninja:
Facture Ninja
https://www.invoiceninja.com/
Invoice Ninja est une entreprise qui fournit des logiciels de reçus, et Flutter a fortement stimulé sa rentabilité. Leur logiciel prend actuellement en charge les systèmes Android et iOS, fournit des démonstrations de produits sur le Web et fournit aux utilisateurs une version de bureau qui fait déjà partie du plan de l'entreprise.
Démo produit
https://demo.invoiceninja.com/
Invoice Ninja a été épuisé dans le passé, mais ne peut fournir un support que pour le Web et les terminaux mobiles, et une fois maintenu trois bases de code indépendantes. Avec Flutter et plus récemment Flutter Desktop, nous avons pu utiliser une base de code unique pour créer des applications pour chaque plateforme majeure. Nous avons obtenu la version de bureau de l'application à un coût presque nul, et ses performances sont les meilleures de toutes les versions!
- Hillel Coren, co-fondatrice d'Invoice Ninja
Si vous souhaitez créer une application Flutter réelle et rentable sur des appareils mobiles et de bureau, vous pouvez visiter GitHub pour obtenir son code source à titre de référence.
GitHub: Facture Ninja
https://github.com/invoiceninja/flutter-client
Aartos a beaucoup de bons travaux, et le système de détection de drone en temps réel en fait partie.Ils utilisent Flutter pour construire le logiciel client du système sur plusieurs plates-formes. Cette vidéo est une première version du client Windows, fonctionnant simultanément avec son client mobile.
Aartos
https://drone-detection-system.com/
Logiciel client du système de détection d'UAV
https://drone-detection-system.com/aartos-dds/product-overview/
Vidéo de démonstration Windows
https://www.bilibili.com/video/BV1p54y1R79t/
Les versions iOS et Windows partagent la même base de code.
Si vous êtes un développeur Flutter expérimenté, vous constaterez peut-être que vous devez basculer entre différentes versions de Flutter: par exemple, une version est utilisée pour publier la version officielle de l'application mobile, et l'autre version est utilisée pour expérimenter Windows alpha, puis Vous aimerez peut-être Flutter Version Manager (Version Manager), il est maintenant livré avec une interface utilisateur graphique Windows, vous pouvez le télécharger ici.
Gestionnaire de versions Flutter
https://github.com/leoafarias/fvm/releases
Vidéo de démonstration
https://www.bilibili.com/video/BV1LK411A7MX/
Cet outil est open source et vous pouvez voir par vous-même à quel point Leo le rend si beau.
FVM
https://github.com/leoafarias/fvm
Plan d'avenir
Après la sortie de la version alpha, notre attention se portera sur l'amélioration de l'ensemble des fonctionnalités et des produits stables. En tant que projet open source, vous pouvez suivre la progression de la version bêta sur GitHub, et il reste encore du travail à faire, notamment les fonctionnalités d'accessibilité, la mondialisation et la localisation, le traitement amélioré du clavier et du texte, la prise en charge des paramètres de ligne de commande, etc.
Flutter pour Windows Beta
https://github.com/flutter/flutter/projects/55
En plus de prendre en charge l'API Win32 classique, nous expérimentons également des applications de conteneur Flutter basées sur UWP. Cette version permet à Flutter de se connecter à plus d'appareils Windows, y compris Xbox. Dans le cadre de cette expérience, nous avons publié cette semaine une Flutter Gallery basée sur UWP sur le Windows Store.
UWP
https://docs.microsoft.com/en-us/windows/uwp/get-started/universal-application-platform-guide
Windows Store: Galerie Flutter
https://www.microsoft.com/en-us/p/flutter-gallery/9pdwctdfc7qq
La capture d'écran suivante montre la galerie Flutter basée sur UWP fonctionnant sur Xbox:
L'image ci-dessous est la même application exécutée sur un appareil Windows à double écran (sur l'émulateur Windows 10X):
Émulateur Windows 10X
https://docs.microsoft.com/en-us/dual-screen/windows/get-dev-tools
Vous pouvez en savoir plus sur la progression de Flutter pour UWP sur GitHub.
Ajouter le support UWP
https://github.com/flutter/flutter/issues/14967#issuecomment-697108439
Pour résumer
Cette version alpha apporte les puissantes fonctionnalités de Flutter à Windows et offre aux développeurs une architecture déclarative, composable et réactive. L'implémentation adaptative de cette version de la spécification Material vous permet de concevoir des applications en fonction de vos besoins et d'utiliser un ensemble complet d'outils de développement et de débogage Flutter. Votre application sera compilée en code 64 bits natif après le développement. Comme toute autre application native, vous pouvez la mettre en package et l'exécuter sur d'autres appareils Windows. Enfin, vous pouvez utiliser la même base de code pour créer des applications pour les plates-formes Android, iOS, Web, macOS et Linux.
Si vous souhaitez commencer à créer des applications Windows avec Flutter, nous attendons avec impatience vos commentaires! Si vous préférez utiliser votre expertise Windows pour créer des implémentations Windows de plug-ins populaires, ou créer des outils spécifiques à Windows pour Flutter (comme la création d'outils de ligne de commande MSIX via la sortie de la commande flutter build windows), nous vous souhaitons également la bienvenue!
Soumettre des commentaires
https://github.com/flutter/flutter/issues
Créer une implémentation Windows de plugins populaires
https://flutter.cn/docs/development/packages-and-plugins/developing-packages#plugin
Alors que Flutter commence à prendre en charge Windows, quel type de merveilleuses applications envisagez-vous de créer? Bienvenue à partager vos réflexions avec nous dans la section commentaires.
Lecture recommandée
Cliquez sur l'écran à la fin | lire lire l' article original | accéder aux ressources de la communauté de développeurs chinois Flutter