Google a publié Flutter Alpha: support Windows

Guide de Lao Meng : Windows est là, Mac, Linux et le Web sont-ils encore loin?

Cet article est traduit de https://medium.com/flutter/announcing-flutter-windows-alpha-33982cd0f433

Notre mission est de fournir aux développeurs un cadre open source à haute productivité pour créer de belles applications natives sur n'importe quelle plate-forme. Jusqu'à présent, nous avons fourni des versions stables pour Android et iOS. Le Google Play Store à lui seul fournit 8 versions stables et plus de 100 000 applications. Nous continuerons d'élargir notre champ d'action pour inclure d'autres plates-formes telles que Web, macOS et Linux. Aujourd'hui, nous sommes heureux d'annoncer un autre objectif de Flutter, qui est le support de Flutter pour la version Alpha de Windows.

Windows reste un choix populaire pour les appareils de bureau et portables, et Microsoft signale plus d' un milliard d'appareils actifs exécutant Windows 10 . Nos propres statistiques montrent que plus de la moitié de tous les développeurs Flutter utilisent Windows, il est donc naturel que Flutter soit la cible. La prise en charge du bureau local ouvre de nombreuses possibilités intéressantes pour Flutter, notamment des outils de développement améliorés, réduisant le fardeau des nouveaux utilisateurs et, bien sûr, les applications peuvent accéder à tout appareil que l'utilisateur peut avoir via une base de code unique.

Ajouter des fenêtres à Flutter

Comme mentionné dans notre présentation de l'architecture, Flutter est une boîte à outils d'interface utilisateur multiplateforme conçue pour permettre la réutilisation du code entre les systèmes d'exploitation tels que iOS et Android, tout en permettant aux applications d'interagir directement avec les services de base de la plate-forme. L'objectif est de permettre aux développeurs de fournir des applications hautes performances qui semblent naturelles sur différentes plates-formes, et embrassant leurs différences tout en ayant autant de code que possible. Le cœur de Flutter est le moteur, qui prend en charge toutes les applications Flutter nécessaires. Chaque fois qu'une nouvelle image doit être dessinée, le moteur est responsable de la pixellisation de la scène composite. Il fournit une implémentation de bas niveau de l'API principale de Flutter, y compris les graphiques, la mise en page du texte, les E / S de fichiers et de réseau, la prise en charge de l'accessibilité, l'architecture des plugins et la chaîne d'outils d'exécution et de compilation Dart.

Chaque nouvelle plate-forme que nous ajoutons à Flutter étendra le cadre de base avec de nouveaux services pour lui permettre de briller sur cette plate-forme. Nous avons commencé avec la conception matérielle et une interface utilisateur tactile centrée sur les mobiles sur Android et iOS, qui vise à atteindre la perfection des pixels sur les deux plates-formes mobiles. L'ajout de la prise en charge des facteurs de forme de bureau via le Web, Windows, macOS et Linux apporte un tout nouvel ensemble de services, y compris une prise en charge solide du clavier, de la souris, de la molette de la souris et du contrôleur côté entrée, ainsi que l'adaptation et même l'adaptation à ces aspects Le widget qui fonctionne le mieux. La plus grande taille d'écran fournie avec les applications Web et de bureau.

De plus, chaque nouvelle plate-forme affectera non seulement le framework et le moteur Flutter, mais également de nombreux autres aspects:

• Mise à jour de la chaîne d'outils: ajoutez de nouvelles cibles aux outils CLI et IDE (dans ce cas, Windows)
• Shell: prise en charge du WM_*traitement de l'entrée et de la sortie Windows via ANGLE via des messages , et utilisation de Skia pour effectuer le rendu sur la surface DirectX sous-jacente à une vitesse native
• Runner: chaque projet obtiendra une application Shell pour la cible prise en charge. Pour Windows, il s'agit d'un programme Win32 / C ++ qui peut charger le code Flutter et l'exécuter au moment de l'exécution. Si nécessaire, vous pouvez ajouter du code natif à l'application ici.
• Plugins: les plugins sont un mélange de code Dart et de code natif pour chaque plate-forme prise en charge par le plugin. Ce code natif doit être ajouté pour chaque plug-in compilé dans l'application Flutter sous Windows.

Cette version Alpha fournit une base solide, que nous stabiliserons dans les mois à venir. Avec la prise en charge de Windows 7 et versions ultérieures, nous espérons que cela pourra fournir des connaissances d'introduction aux développeurs aventureux.

Découvrez quelques exemples d'applications

Pour vérifier la prise en charge de Flutter pour Windows, vous voudrez peut-être essayer certains des exemples d'applications que nous avons créés, qui fonctionnent bien sur Windows avec notre nouveau support. Le premier est l'application Flokk, ce sont les concepteurs et les développeurs de gskinner.com qui doivent créer ensemble . L'objectif est de prouver que Flutter est prêt pour le bureau en créant une application de bureau Flutter innovante et magnifique. Flokk est une application qui peut être utilisée avec vos vraies données de contacts Google et afficher l'activité des contacts sur GitHub et Twitter.

Si vous souhaitez utiliser l'application Flokk sur une machine Windows, vous pouvez télécharger la dernière version sur GitHub . Si vous voulez savoir comment gskinner a construit cette application, veuillez vous référer à son excellent article de blog: Flokk-Comment nous utilisons Flutter pour créer une application de bureau .

De plus, l'application Flutter Gallery (l'application de spectacle pour tout ce que nous utilisons pour Flutter) a récemment été complètement réécrite pour ajouter la prise en charge des tailles de bureau. Cela nous permet de vérifier s'il peut fonctionner correctement sur le Web ainsi que sur Windows, macOS et Linux.

De nombreuses études dans la bibliothèque montrent des idées pour différents styles d'application qui sont recommandés lors de la conception de vos propres applications Windows à l'aide de Flutter. Lorsque vous trouvez quelque chose que vous aimez, le code peut être trouvé sur GitHub .

Premiers pas avec Flutter pour Windows

Commencez à installer le SDK Flutter conformément aux instructions d'installation de Windows . Pour localiser le bureau Windows, vous devez d'abord installer les outils décrits dans la documentation du bureau . Par défaut, Flutter suppose que vous créez un logiciel de production et que vous n'êtes pas configuré pour développer des applications Windows. Cependant, il peut être facilement résolu à partir de la ligne de commande:

$ flutter channel dev
$ flutter upgrade
$ flutter config --enable-windows-desktop

La première commande définit Flutter pour utiliser le canal "dev" de qualité expérimentale (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 toujours en Alpha, comme Windows. La deuxième commande extrait le dernier bit du canal. La troisième commande peut être utilisée pour le développement d'applications Windows sur votre PC.

Après l'avoir configuré, chaque fois que vous utilisez la prise en charge étendue d' Android Studio ou de Visual Studio Code , ou que vous créez une nouvelle application Flutter à partir de la ligne de commande, il crée un sous-dossier Windows.

Si vous êtes curieux, veuillez exécuter l'application par défaut sous Windows comme suit:

Enfin, une fois l'application créée, la construction de l'application créera un fichier EXE natif en mode version et les DLL de support nécessaires. À ce moment-là, si vous souhaitez essayer d'exécuter une nouvelle application Windows sur n'importe quel ordinateur Windows 10, même si vous n'avez pas d'ordinateur avec Flutter installé, vous pouvez suivre les étapes ci-dessous pour compresser les fichiers nécessaires et l'exécuter.

Plugin Windows

Même si nous venons de sortir la version Alpha, la communauté Flutter développe déjà des plugins Windows. Voilà quelque:

• url_launcher : lancez l'URL depuis votre application dans le navigateur
• path_provider : trouve un chemin pointant vers une direction spéciale sur la machine de l'utilisateur, telle que Document ou temp
• shared_preferences : conserver les préférences utilisateur sérialisées sur le disque entre les sessions d'application
• biometric_storage : stockage crypté par la technologie biométrique
• flutter_audio_desktop : lecture audio à partir de l'application de bureau

L'avantage d'utiliser ces plugins est que la plupart d'entre eux prennent également en charge d'autres plates-formes Flutter, ce qui vous permet de cibler des applications vers Android, iOS, Web, etc., ainsi que Windows. De plus, alors qu'environ un tiers des packages disponibles sur pub.dev (le gestionnaire de packages pour Dart et Flutter) sont des plugins avec un code spécifique à la plate-forme, la plupart ne le sont pas. Par exemple, la plupart des progiciels de la plus haute qualité et les plus couramment utilisés font partie du programme Flutter Favorite, et la plupart fonctionnent sous Windows. Si vous souhaitez voir une liste complète des packages exécutés sous Windows, vous pouvez exécuter cette requête sur pub.dev .

Interopérabilité avec Windows

Si vous souhaitez créer votre propre plug-in pour Windows, vous pouvez. Après avoir accédé au canal développeur et activé Windows pour votre ordinateur, vous pouvez commencer avec la commande suivante:

$ flutter create --template plugin --platforms Windows hello_plugin

À ce moment-là, vous pourrez ajouter du code Flutter aux libsous-dossiers du projet de plug-in et ajouter du code Windows aux windowssous-dossiers. Vous utiliserez les canaux de plate-forme pour communiquer entre les deux piles, qui sont en fait des messages passés entre Dart et le code C ++. Pour la production élaborée de cet exemple, voir l'implémentation url_launcher .

Cependant, les canaux de plate-forme ne sont pas la seule option d'interopérabilité avec Windows. Si vous le souhaitez, vous pouvez utiliser Dart FFI (External Function Interface) pour charger la bibliothèque et appeler des API de style C, telles que les API Win32. Contrairement à url_launcher, qui utilise des canaux de plate-forme, le plugin path_provider est implémenté à l'aide de FFI, comme vous pouvez le voir dans le dépôt GitHub . FFI n'a pas besoin de basculer entre Dart et C ++, mais vous permet d'écrire du code pour importer directement l'API requise. Par exemple, voici le code utilisé 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');
view rawmbox.dart hosted with ❤ by GitHub

Ce code n'entraîne pas la surcharge de la commutation entre deux threads tels que les canaux de plate-forme. FFI inclut la prise en charge de nombreux types d'API, notamment Win32, WinRT et COM. Cependant, avant le package complet et d'exécuter l'API Windows basée sur C, veuillez vérifier le plug-in win32 , le plug-in peut être très utile pour ce faire. En fait, le plugin path_provider lui-même est implémenté à l'aide de plugins win32. Pour plus de détails sur la façon dont les plugins win32 sont développés et comment ils fonctionnent, consultez le billet de blog Dart FFI's Fun for Windows .

Flutter des ressources Windows

Peu importe où vous vous trouvez dans votre voyage Flutter pour Windows, assurez-vous de lire la documentation de bureau sur flutter.dev , qui comprend les derniers détails. En outre, vous devrez vous familiariser avec le laboratoire de code Flutter pour écrire des applications cibles de bureau Windows, macOS et Windows , qui incluent du code pour des scénarios réels, tels que l'authentification à l'aide d'OAuth, l'accès à l'API GitHub et l'utilisation de GraphQL. Ou, pour un autre bon exemple de code de bureau Flutter fonctionnant sous Windows, consultez l'exemple de recherche de photos .

Il utilise des boîtes de dialogue d'ouverture de fichiers Windows standard, des widgets d'arborescence, des widgets de fractionnement et intègre les résultats avec des API REST réelles.

Pour d'autres widgets utiles orientés bureau, nous vous recommandons d' utiliser le plugin de barre de menu , le widget NavigationRail et le widget DataTable . Vous pouvez également être intéressé par le widget InteractiveViewer , qui prend en charge le bureau complet et peut effectuer un panoramique et un zoom sur les sous-widgets avec des gestes de souris.

Peut explorer un autre ensemble utile de widgets est SyncFusion de ceux -ci, ils sont déjà bien connus dans la communauté de développement Windows. Ils fournissent une large gamme de widgets de qualité d'entreprise pour créer des graphiques, des jauges, des grilles de données, etc.

Ces widgets ont des licences communautaires et d'entreprise, vous pouvez donc trouver le meilleur outil pour votre projet.

Flutter pour Windows

En plus des progiciels et plug-ins Windows (généralement Flutter Desktop), les développeurs de Flutter ont développé d’excellentes applications pour Windows, telles que la version expérimentale de Invoice Ninja :

Invoice Ninja est une société de facturation qui s'appuie sur Flutter pour ses revenus. Ils ciblent Android et iOS en production aujourd'hui et proposent des démos Web à essayer, mais ils ont également hâte de fournir une version de bureau.

«Dans le passé Ninja, nous avons eu du mal à ne prendre en charge que les appareils Web et mobiles et ne pouvons gérer que trois bases de code distinctes à la fois. Avec Flutter, et récemment Flutter Desktop, nous avons pu utiliser une seule base de code pour chaque plate-forme majeure Créez des applications. Non seulement nous obtenons fondamentalement une version de bureau gratuite de l'application, mais nous avons également les meilleures performances de toutes les applications! "

--Hillel Coren, co-fondateur d'Invoice Ninja

Si vous souhaitez implémenter des applications Flutter génératrices de revenus dans le monde réel qui peuvent fonctionner sur des ordinateurs mobiles et de bureau, vous pouvez trouver le code source sur GitHub .

Aartos est une autre entreprise qui fabrique d'excellents produits, y compris un système de détection de drone en temps réel avec un client multi-plateforme écrit par Flutter . Il s'agit d'une version antérieure du client Windows fonctionnant avec le client mobile:

Adresse vidéo: https://youtu.be/mGvPCT7Vc2Y

Les deux versions pour iOS et Windows partagent exactement la même base de code.

Si vous êtes un développeur Flutter expérimenté et que vous basculez entre différentes versions de Flutter; par exemple, une version pour fournir des applications mobiles de production et une autre version pour tester Windows alpha, alors vous pourriez aimer Gestionnaire de version Flutter, qui a maintenant une interface graphique Windows, vous pouvez télécharger cette version .

Adresse vidéo: https://youtu.be/_WA71wSt2ww

L'outil est open source, vous pouvez donc voir par vous-même à quel point Leo le rend si beau.

Et après

Maintenant que nous avons publié la version Alpha, notre attention s'est tournée vers l'achèvement de l'ensemble des fonctionnalités et la publication de produits stables. En tant que projet open source, vous pouvez suivre la progression de notre test bêta sur le site Web GitHub. Les autres travaux à effectuer incluent l'accessibilité, la mondialisation et la localisation, l'amélioration du traitement du clavier et du texte, la prise en charge des paramètres de ligne de commande, etc. .

En plus de prendre en charge l'API Win32 classique, nous expérimentons également une version UWP du shell Flutter, qui permet à Flutter d'accéder à une plus large gamme d'appareils Windows, y compris Xbox. Dans le cadre de l'expérience, nous avons publié cette semaine une version UWP de Flutter Gallery sur le Windows App Store .

La capture d'écran suivante montre la galerie Flutter basée sur UWP fonctionnant sur Xbox:

Il s'agit du simulateur Windows 10X de la même application s'exécutant sur un appareil à double écran s'exécutant sur le programme Windows :

Vous pouvez en savoir plus sur la progression de Flutter pour UWP sur GitHub .

Résumé

Dans cette version, nous introduisons les fonctions de Flutter dans Windows. Il dispose d'un cadre déclaratif, composable et réactif qui peut améliorer l'efficacité du travail des développeurs et dispose d'une implémentation adaptative de spécification de matériau, de sorte que vous pouvez également créer des applications Regardez et ressentez comme vous le souhaitez en tant qu'ensemble complet d'outils de développement et de débogage pour Flutter. Une fois terminé, votre application sera compilée en code 64 bits natif, et vous pourrez la conditionner et l’apporter à d’autres ordinateurs Windows, comme toute autre application native. Enfin, vous pouvez utiliser la même base de code pour créer des applications pour Android, iOS, Web, macOS et Linux.

Si vous souhaitez commencer à créer des applications Windows avec Flutter, nous espérons recevoir vos commentaires ! Si vous souhaitez utiliser l'expertise Windows pour créer des implémentations Windows de plugins populaires , ou créer des outils centrés sur Windows pour Flutter (peut-être une CLI qui peut flutter build windowscréer MSIX à partir de la sortie de commandes ...), vous êtes également les bienvenus !

Avec le nouveau support de Flutter pour Windows, qu'allez-vous construire?

Déclaration de copyright: Cet article est original et autorisé sous la licence CC BY-SA 4.0 . Veuillez joindre le lien source et cette déclaration pour réimpression.

»

communiquer avec

communiquer avec

Blog Laomeng Flutter (330 contrôles d'utilisation + série d'introduction au combat): http://laomengit.com

Bienvenue à rejoindre le groupe d'échange Flutter (WeChat: laomengit) et à suivre le compte public [Lao Meng Flutter]: