Flutter - Herramientas de desarrollo

Este capítulo explica en detalle las herramientas de desarrollo de Flutter. La primera versión estable del kit de herramientas de desarrollo multiplataforma se lanzó el 4 de diciembre de 2018, Flutter 1.0. Bueno, Google está trabajando continuamente en las mejoras y fortaleciendo el marco de Flutter con diferentes herramientas de desarrollo.

Conjuntos de widgets

Google se actualizó para los conjuntos de widgets Material y Cupertino para proporcionar una calidad perfecta de píxeles en el diseño de los componentes. La próxima versión de flutter 1.2 estará diseñada para admitir eventos de teclado de escritorio y soporte de desplazamiento del mouse.

Desarrollo de Flutter con Visual Studio Code

Visual Studio Code admite el desarrollo de flutter y proporciona amplios accesos directos para un desarrollo rápido y eficiente. Algunas de las características clave proporcionadas por Visual Studio Code para el desarrollo de flutter se enumeran a continuación:

• Asistencia de código: cuando desee comprobar las opciones, puede utilizar Ctrl+Space para obtener una lista de opciones de finalización de código.

• Arreglo rapido - Ctrl+. es una herramienta de reparación rápida para ayudar a corregir el código.

• Accesos directos durante la codificación.

• Proporciona documentación detallada en los comentarios.

• Atajos de depuración.

• Reinicios en caliente.

Dart DevTools

Podemos usar Android Studio o Visual Studio Code, o cualquier otro IDE para escribir nuestro código e instalar complementos. El equipo de desarrollo de Google ha estado trabajando en otra herramienta de desarrollo llamada Dart DevTools. Es una suite de programación basada en web. Es compatible con las plataformas Android e iOS. Se basa en una vista de línea de tiempo para que los desarrolladores puedan analizar fácilmente sus aplicaciones.

Instalar DevTools

Para instalar DevTools, ejecute el siguiente comando en su consola:

flutter packages pub global activate devtools

Ahora puede ver el siguiente resultado:

Resolving dependencies... 
+ args 1.5.1 
+ async 2.2.0
+ charcode 1.1.2 
+ codemirror 0.5.3+5.44.0 
+ collection 1.14.11 
+ convert 2.1.1 
+ devtools 0.0.16 
+ devtools_server 0.0.2 
+ http 0.12.0+2 
+ http_parser 3.1.3 
+ intl 0.15.8 
+ js 0.6.1+1 
+ meta 1.1.7 
+ mime 0.9.6+2 
.................. 
.................. 
Installed executable devtools. 
Activated devtools 0.0.16.

Ejecutar servidor

Puede ejecutar el servidor DevTools con el siguiente comando:

flutter packages pub global run devtools

Ahora, obtendrá una respuesta similar a esta,

Serving DevTools at http://127.0.0.1:9100

Inicie su aplicación

Vaya a su aplicación, abra el simulador y ejecútelo usando el siguiente comando:

flutter run --observatory-port=9200

Ahora, está conectado a DevTools.

Inicie DevTools en el navegador

Ahora acceda a la siguiente URL en el navegador para iniciar DevTools:

http://localhost:9100/?port=9200

Obtendrá una respuesta como se muestra a continuación:

SDK de Flutter

Para actualizar Flutter SDK, use el siguiente comando:

flutter upgrade

Puede ver una salida como se muestra a continuación:

Para actualizar los paquetes de Flutter, use el siguiente comando:

flutter packages upgrade

Podrías ver la siguiente respuesta,

Running "flutter packages upgrade" in my_app... 7.4s

Inspector de aleteo

Se utiliza para explorar árboles de widgets de flutter. Para lograr esto, ejecute el siguiente comando en su consola,

flutter run --track-widget-creation

Puede ver una salida como se muestra a continuación:

Launching lib/main.dart on iPhone X in debug mode... 
─Assembling Flutter resources...                       3.6s 
Compiling, linking and signing...                      6.8s 
Xcode build done.                                     14.2s 
2,904ms (!)
To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R". 
An Observatory debugger and profiler on iPhone X is available at: http://127.0.0.1:50399/ 
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

Ahora vaya a la URL, http://127.0.0.1:50399/, podría ver el siguiente resultado: