¡Comienza a crear aplicaciones de escritorio de Windows con Flutter!

作者 / Chris Sells, gerente de producto, experiencia de desarrollador de Flutter

Nuestra misión es proporcionar a los desarrolladores un marco de código abierto y eficiente para ayudarlos a crear hermosas aplicaciones nativas en cualquier plataforma. Hasta ahora, hemos brindado soporte a nivel de producción para Android e iOS, lanzamos 8 versiones estables y más de 100,000 aplicaciones usan Flutter solo en la tienda Google Play . Seguimos trabajando arduamente para extender el soporte a otras plataformas como web, macOS y Linux. Ahora, se ha lanzado otro objetivo de Flutter, es decir, la versión Alpha de Flutter que es compatible con Windows.

Windows sigue siendo una opción popular para dispositivos de escritorio y portátiles. Según un informe de Microsoft, Windows 10 tiene más de mil millones de dispositivos activos. Nuestras estadísticas muestran que más de la mitad de los desarrolladores de Flutter usan Windows y, naturalmente, Flutter debería ser compatible con este sistema. El soporte de escritorio nativo ofrece varias posibilidades para Flutter, lo cual es realmente emocionante, incluida la mejora de las herramientas de desarrollo y la reducción de la carga para los nuevos usuarios. Por supuesto, también permite a los desarrolladores usar una única base de código para cualquier dispositivo que los usuarios puedan tener. Crea aplicaciones.

  • Windows 10: alimenta mil millones de dispositivos activos mensuales en todo el mundo

    https://blogs.windows.com/windowsexperience/2020/03/16/windows-10-powering-the-world-with-1-billion-monthly-active-devices/

Agregar soporte de Windows a Flutter

Como dijimos en la descripción general de la arquitectura, Flutter es un conjunto de herramientas de interfaz multiplataforma diseñado para lograr la reutilización de código entre diferentes sistemas operativos (como iOS y Android), al tiempo que permite que las aplicaciones interactúen directamente con los servicios de la plataforma subyacente. Nuestro objetivo es permitir que los desarrolladores entreguen aplicaciones de alto rendimiento que puedan ejecutarse de forma natural y fluida en diferentes plataformas, compartiendo código tanto como sea posible y tolerando las diferencias entre diferentes plataformas. El núcleo de Flutter es el motor, que admite las primitivas necesarias y proporciona soporte para todas las aplicaciones de Flutter. Siempre que sea necesario dibujar un nuevo fotograma, el motor es responsable de rasterizar la escena compuesta. El motor proporciona la implementación subyacente de la API central de Flutter, que incluye gráficos, diseño de texto, E / S de archivos y redes, soporte de accesibilidad, arquitectura de complementos y tiempo de ejecución de Dart y cadena de herramientas de compilación.

  • Descripción general de la arquitectura

    https://flutter.cn/docs/resources/architectural-overview

Siempre que agreguemos una nueva plataforma de destino a Flutter, ampliaremos el marco principal con nuevos servicios para permitir que se ejecute bien en esa plataforma. Primero implementamos Material Design en Android e iOS, así como una interfaz táctil para dispositivos móviles, con el fin de lograr una experiencia perfecta a nivel de píxel en estas dos plataformas móviles. En entornos de escritorio como web, Windows, macOS y Linux, Flutter también proporciona un conjunto completamente nuevo de servicios, que incluye un fuerte soporte para métodos de entrada de teclado, mouse, rueda de desplazamiento y controlador, así como widgets que pueden adaptarse a estas plataformas (algunos Los widgets incluso funcionan mejor en pantallas grandes en aplicaciones web y de escritorio).

Además, cada nueva plataforma no solo afectará el marco y el motor de Flutter, sino también muchos otros aspectos:

  • Actualización de la cadena de herramientas: agregue nuevas plataformas de destino para herramientas CLI e IDE (como Windows en este artículo)

  • Shell : admite el procesamiento de entradas de Windows a través de mensajes WM_ * y realiza la salida a través de ANGLE. ANGLE usa Skia para renderizar en la interfaz DirectX subyacente a velocidad nativa

  • Runner : cada proyecto se ejecutará en la plataforma de destino a través de una aplicación de contenedor. Para Windows, la aplicación contenedora es un programa Win32 / C ++ que puede cargar su código Flutter y ejecutarlo en tiempo de ejecución. Si lo necesita, puede agregar código nativo para su aplicación aquí.

  • Complementos : los complementos son una colección de código Dart y código nativo para cada plataforma que admite. Es necesario agregar código nativo a cada complemento, y estos complementos se compilarán en su versión de Windows de la aplicación Flutter.

  • ÁNGULO

    https://opensource.google/projects/angle

  • Skia

    https://skia.org/

La versión alfa lanzada esta vez ha sentado una base sólida para nuestro trabajo en los próximos meses. Con soporte para Windows 7 y versiones posteriores, esperamos que pueda proporcionar un punto de partida para los desarrolladores a los que les gustan los primeros usuarios.

Introducción a la aplicación de muestra

Para comprender realmente el soporte de Flutter para Windows, puede consultar algunas de las aplicaciones de muestra que hemos creado. Estas aplicaciones funcionan bien en Windows a través de nuestro nuevo soporte. El primer ejemplo es la aplicación Flokk, que es el resultado de nuestra colaboración con los diseñadores y desarrolladores de gskinner.com. Nuestro objetivo es mostrar que Flutter está listo para el escritorio mediante la creación de una hermosa y creativa aplicación de escritorio Flutter. Flokk es una aplicación que puede usar sus datos reales de Contactos de Google y mostrar las actividades de sus contactos en GitHub y Twitter.

Si desea utilizar la aplicación Flokk en su dispositivo Windows, puede descargar la última versión en GitHub. Si desea saber cómo gskinner desarrolló esta aplicación, puede consultar la publicación de su blog: Flokk: cómo usamos Flutter para crear aplicaciones de escritorio.

  • Descarga Flokk

    https://github.com/gskinnerTeam/Flokk/releases

  • Flokk: cómo usamos Flutter para crear aplicaciones de escritorio

    https://blog.gskinner.com/archives/2020/09/flokk---how-we-built-a-desktop-app-using-flutter.html

Además, nuestra aplicación de muestra Flutter Gallery puede mostrarte todos los aspectos de Flutter. Esta aplicación ha sido recientemente reescrita por completo para agregar soporte para dispositivos de escritorio. Por lo tanto, podemos asegurarnos de que funcione bien en la web, Windows, macOS y Linux.

  • Galería Flutter (web 版)

    https://gallery.flutter.cn/

Muchos casos en la Galería de Flutter representan estilos de aplicaciones con diferentes conceptos, recomendamos que los consulte cuando diseñe sus propias aplicaciones de Windows usando Flutter. Si está interesado, puede encontrar el código fuente en GitHub.

  • Dirección de código fuente

    https://github.com/flutter/gallery

Comienza a usar Flutter para Windows

Siga las instrucciones de instalación de Windows para comenzar a instalar el SDK de Flutter. Para seleccionar dispositivos de escritorio de Windows, primero debe instalar las herramientas descritas en la documentación del escritorio. De forma predeterminada, Flutter asume que está creando la versión oficial del software y no lo ha configurado para desarrollar aplicaciones de Windows. Sin embargo, esto se resuelve fácilmente a través de la línea de comando:

$ flutter channel dev
$ flutter upgrade
$ flutter config --enable-windows-desktop
  • Instalar y configurar el entorno de desarrollo Flutter en el sistema Windows

    https://flutter.cn/docs/get-started/install/windows

  • Herramientas descritas en la documentación del escritorio

    https://flutter.cn/desktop#additional-windows-requirements

El primer comando establece que Flutter use el canal "dev" experimental (en lugar del canal "estable" predeterminado). De esta manera, puede utilizar el soporte de la plataforma que aún se encuentra en la etapa alfa, como Windows. El segundo comando puede obtener la última versión del canal. El tercer comando le permite desarrollar aplicaciones de Windows en su PC.

Después de completar esta configuración, cada vez que cree una nueva aplicación Flutter a través de la extensión de Android Studio o Visual Studio Code, o mediante la línea de comandos, se creará una subcarpeta de Windows.

  • Estudio de Android

    https://flutter.cn/docs/get-started/editor?tab=androidstudio

  • Código de Visual Studio

    https://flutter.cn/docs/get-started/editor?tab=vscode

Si tiene curiosidad, ejecute la aplicación predeterminada en Windows de la siguiente manera:

Después de crear la aplicación, la creación de la aplicación generará un archivo EXE nativo en modo de lanzamiento y la DLL de soporte necesaria. Si desea ejecutar esta nueva aplicación de Windows en cualquier dispositivo con Windows 10 que no tenga Flutter instalado, puede comprimir y empaquetar los archivos necesarios de acuerdo con las instrucciones aquí.

  • Distribuir aplicaciones en el entorno de escritorio

    https://flutter.cn/desktop#distribution

Complemento de Windows

Aunque el soporte actual de Windows sigue siendo una versión alfa, los miembros de la comunidad de Flutter ya están desarrollando complementos de Windows. incluir:

  • url_launcher: inicie el navegador desde su aplicación y abra la URL dada

    https://pub.flutter-io.cn/packages/url_launcher

  • path_provider: proporciona la ruta de directorios especiales en el dispositivo del usuario, como Documents y temp

    https://pub.flutter-io.cn/packages/path_provider

  • shared_preferences: serializa las preferencias del usuario en el disco para compartirlas entre las sesiones de tu aplicación

    https://pub.flutter-io.cn/packages/shared_preferences

  • biometric_storage: almacenamiento cifrado por biometría

    https://pub.flutter-io.cn/packages/biometric_storage

  • flutter_audio_desktop: reproduce audio en la aplicación de escritorio

    https://pub.flutter-io.cn/packages/flutter_audio_desktop

La ventaja de usar estos complementos es que la mayoría de ellos también son compatibles con otras plataformas de Flutter, por lo que puede adaptar sus aplicaciones a Android, iOS, web, Windows y otras plataformas. Además, aunque en pub.dev (la plataforma de administración de paquetes de Dart y Flutter), alrededor de un tercio de los paquetes son complementos que contienen código específico de la plataforma, pero la mayoría de los complementos no lo son. Por ejemplo, muchos de los paquetes de mayor calidad y más utilizados se encuentran en la lista de planes favoritos de Flutter, y la mayoría de ellos pueden ejecutarse en Windows. Si desea ver la lista completa de paquetes que se pueden ejecutar en Windows, puede consultar en pub.dev.

  • Favorito de Flutter

    https://pub.flutter-io.cn/flutter/favorites

  • Paquete para plataforma Windows

    https://pub.flutter-io.cn/flutter/packages?platform=windows

Interoperabilidad con Windows

También puede crear sus propios complementos de Windows. Cuando esté en el canal de desarrollo y haya habilitado el desarrollo de Windows para el dispositivo, puede usar el siguiente comando:

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

En este punto, puede agregar su código de Flutter a la subcarpeta lib y agregar el código de Windows a la subcarpeta de Windows del proyecto de complemento. Utilizará los canales de plataforma para comunicarse entre las dos pilas, que es esencialmente un mensaje entre el código Dart y C ++. Para obtener el mejor ejemplo sobre este tema, consulte la implementación de url_launcher.

  • Escribir código de plataforma de terminal dual (implementación de escritura de plug-in)

    https://flutter.cn/docs/development/platform-integration/platform-channels

  • Implementación de url_launcher

    https://github.com/flutter/plugins/tree/master/packages/url_launcher/url_launcher_windows

Sin embargo, el canal de la plataforma no es su única opción para la interoperabilidad con Windows. También puede usar Dart FFI (interfaz de función externa) para cargar bibliotecas y llamar a API de estilo C, como las API de Win32. Como puede ver en el repositorio de GitHub, el complemento path_provider se implementa usando FFI, que es diferente del url_launcher que usa el canal de la plataforma. FFI no necesita alternar entre Dart y C ++, pero le permite escribir código para importar directamente la API que desee. Por ejemplo, aquí está el código para llamar a la 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');
  • Use dart: ffi para llamar al código nativo

    https://flutter.cn/docs/development/platform-integration/c-interop

  • proveedor_ruta (Windows 版)

    https://github.com/flutter/plugins/tree/master/packages/path_provider/path_provider_windows

Este código no tiene el problema de cambiar entre dos hilos como canales de plataforma. FFI incluye soporte para muchos tipos diferentes de API, incluidas Win32, WinRT y COM. Pero no se apresure a encapsular usted mismo toda la API de Windows basada en C. Por favor, eche un vistazo al complemento win32. Ya lo está haciendo y hace un buen trabajo. De hecho, el complemento path_provider en sí se implementa mediante complementos de win32. Para conocer el proceso de desarrollo y el principio de funcionamiento de los complementos de win32, lea "Use Dart FFI para mejorar la diversión del desarrollo de Windows".

  • Complemento Win32

    https://pub.flutter-io.cn/packages/win32

  • proveedor_ruta

    https://pub.flutter-io.cn/packages/path_provider

  • Utilice Dart FFI para mejorar la diversión del desarrollo de Windows

    https://medium.com/@timsneath/windows-fun-with-dart-ffi-687c4619e78d

Recursos de Flutter para Windows

No importa dónde se encuentre en el viaje de Flutter para Windows, debe leer la documentación de desarrollo de escritorio en flutter.dev, que incluye los detalles más recientes. Además, también puede usar codelab para familiarizarse con la escritura de aplicaciones Flutter de escritorio para Windows, macOS y Windows, incluido código para escenarios reales como usar OAuth para la autenticación, acceder a la API de GitHub y usar GraphQL. O echa un vistazo a Photo Search, otro ejemplo de código de escritorio de Flutter que se ejecuta en Windows.

  • Soporte de escritorio Flutter

    http://flutter.cn/desktop

  • Codelab

    https://codelabs.developers.google.com/codelabs/flutter-github-graphql-client

  • Búsqueda de fotos

    https://github.com/flutter/samples/tree/master/experimental/desktop_photo_search

Photo Search utiliza cuadros de diálogo de apertura de archivos estándar de Windows, widgets de vista de árbol, widgets de vista dividida y utiliza API REST reales para presentar resultados de búsqueda.

En cuanto a otros widgets orientados al escritorio, recomendamos el complemento de la barra de menú (menubar), el widget NavigationRail y el widget DataTable. También puede estar interesado en el widget InteractiveViewer, que brinda soporte completo para el escritorio y le permite desplazarse y hacer zoom en sus widgets secundarios mediante acciones del mouse.

  • Barra de menús

    https://github.com/google/flutter-desktop-embedding/tree/master/plugins/menubar

  • NavegaciónRail

    https://api.flutter.cn/flutter/material/NavigationRail-class.html

  • Tabla de datos

    https://api.flutter.cn/flutter/material/DataTable-class.html

  • Visor interactivo

    https://api.flutter.cn/flutter/widgets/InteractiveViewer-class.html

Otro grupo de widgets muy útiles proviene de SyncFusion. Son bien conocidos en la comunidad de desarrollo de Windows y proporcionan una gran cantidad de widgets de calidad empresarial para crear gráficos, ranuras de medición y cuadrículas de datos.

  • Widgets de SyncFusion

    https://pub.flutter-io.cn/publishers/syncfusion.com/packages

Estos widgets tienen licencia para uso comunitario y empresarial, por lo que puede estar seguro de encontrar la herramienta adecuada para su proyecto.

Caso de aplicación de Flutter para Windows

Además de los paquetes y complementos de Windows (y el soporte de escritorio de Flutter en un sentido amplio), los desarrolladores de Flutter también han estado creando excelentes aplicaciones para Windows, como este trabajo experimental de Invoice Ninja:

  • Factura Ninja

    https://www.invoiceninja.com/

Invoice Ninja es una empresa que ofrece software de recibos y Flutter ha aportado un sólido impulso a su rentabilidad. Su software actualmente es compatible con los sistemas Android e iOS, y proporciona demostraciones de productos en la web y proporciona a los usuarios una versión de escritorio que ya está dentro del plan de la empresa.

  • Demostración del producto

    https://demo.invoiceninja.com/

Invoice Ninja se ha agotado en el pasado, pero solo puede proporcionar soporte para la web y terminales móviles, y una vez mantuvo tres bases de código independientes. Con Flutter y, más recientemente, Flutter Desktop, hemos podido utilizar una única base de código para crear aplicaciones para todas las plataformas principales. Obtuvimos la versión de escritorio de la aplicación a un costo casi cero, ¡y su rendimiento es el mejor de todas las versiones!

- Hillel Coren, cofundador de Invoice Ninja

Si desea crear una aplicación Flutter real y rentable en dispositivos móviles y de escritorio, puede visitar GitHub para obtener su código fuente como referencia.

  • GitHub: Invoice Ninja

    https://github.com/invoiceninja/flutter-client

Aartos tiene muchos buenos trabajos, y el sistema de detección de drones en tiempo real es uno de ellos. Usan Flutter para construir el software cliente del sistema en múltiples plataformas. Este video es una versión inicial del cliente de Windows, que se ejecuta simultáneamente con su cliente móvil.

  • Aartos

    https://drone-detection-system.com/

  • Software de cliente del sistema de detección de UAV

    https://drone-detection-system.com/aartos-dds/product-overview/

  • Video de demostración de Windows

    https://www.bilibili.com/video/BV1p54y1R79t/

Ambas versiones de iOS y Windows comparten la misma base de código.

Si es un desarrollador experimentado de Flutter, es posible que necesite alternar entre diferentes versiones de Flutter: por ejemplo, una versión se usa para lanzar la versión oficial de la aplicación móvil y la otra versión se usa para experimentar con Windows alpha, luego Puede que le guste Flutter Version Manager (Administrador de versiones), ahora viene con una interfaz gráfica de usuario de Windows, puede descargarlo aquí.

  • Administrador de versiones de Flutter

    https://github.com/leoafarias/fvm/releases

  • Video de demostración

    https://www.bilibili.com/video/BV1LK411A7MX/

Esta herramienta es de código abierto y puedes ver por ti mismo cómo Leo hace que se vea tan bien.

  • FVM

    https://github.com/leoafarias/fvm

Plan futuro

Después del lanzamiento de la versión alfa, nuestra atención se centrará en mejorar el conjunto de funciones y los productos estables. Como proyecto de código abierto, puede realizar un seguimiento del progreso de la versión beta en GitHub, y aún queda trabajo por hacer, incluidas funciones de accesibilidad, globalización y localización, procesamiento mejorado de teclado y texto, compatibilidad con parámetros de línea de comandos, etc.

  • Flutter para Windows Beta

    https://github.com/flutter/flutter/projects/55

Además de admitir la API clásica de Win32, también estamos experimentando con aplicaciones de contenedor Flutter basadas en UWP. Esta versión permite que Flutter inicie sesión en más dispositivos Windows, incluida Xbox. Como parte de este experimento, esta semana lanzamos una Galería Flutter basada en UWP en la Tienda Windows.

  • UWP

    https://docs.microsoft.com/en-us/windows/uwp/get-started/universal-application-platform-guide

  • Tienda Windows: Galería Flutter

    https://www.microsoft.com/en-us/p/flutter-gallery/9pdwctdfc7qq

La siguiente captura de pantalla muestra la Galería Flutter basada en UWP que se ejecuta en Xbox:

La siguiente imagen es la misma aplicación que se ejecuta en un dispositivo Windows de pantalla dual (en el emulador de Windows 10X):

  • Emulador de Windows 10X

    https://docs.microsoft.com/en-us/dual-screen/windows/get-dev-tools

Puede obtener más información sobre el progreso de Flutter para UWP en GitHub.

  • Agregar compatibilidad con UWP

    https://github.com/flutter/flutter/issues/14967#issuecomment-697108439

para resumir

Esta versión alfa trae las poderosas características de Flutter a Windows y proporciona a los desarrolladores una arquitectura declarativa, componible y receptiva. La implementación adaptativa de esta versión de la especificación Material le permite diseñar aplicaciones de acuerdo con sus propias necesidades y utilizar un conjunto completo de herramientas de depuración y desarrollo de Flutter. Una vez desarrollada la aplicación, se compilará en un código nativo de 64 bits. Al igual que cualquier otra aplicación nativa, puede empaquetarla y ejecutarla en otros dispositivos Windows. Finalmente, puede usar la misma base de código para crear aplicaciones para plataformas Android, iOS, web, macOS y Linux.

Si desea comenzar a crear aplicaciones de Windows con Flutter, ¡esperamos escuchar sus comentarios! Si prefiere utilizar su experiencia en Windows para crear implementaciones de Windows de complementos populares, o crear algunas herramientas específicas de Windows para Flutter (como crear herramientas de línea de comandos MSIX a través de la salida del comando flutter build windows), ¡también le damos una calurosa bienvenida!

  • Enviar comentarios

    https://github.com/flutter/flutter/issues

  • Cree una implementación de Windows de complementos populares

    https://flutter.cn/docs/development/packages-and-plugins/developing-packages#plugin

Cuando Flutter comience a ser compatible con Windows, ¿qué tipo de aplicaciones maravillosas planeas crear? Bienvenido a compartir sus pensamientos con nosotros en la sección de comentarios.


Lectura recomendada




 Haga clic en la pantalla al final leer leer el artículo original  | acceder a los recursos de la comunidad de desarrolladores chinos de Flutter  


Supongo que te gusta

Origin blog.csdn.net/jILRvRTrc/article/details/109088490
Recomendado
Clasificación