Flutter - Outils de développement

Ce chapitre explique en détail les outils de développement Flutter. La première version stable de la boîte à outils de développement multiplateforme a été publiée le 4 décembre 2018, Flutter 1.0. Eh bien, Google travaille en permanence sur les améliorations et le renforcement du framework Flutter avec différents outils de développement.

Ensembles de widgets

Google a mis à jour les ensembles de widgets Material et Cupertino afin de fournir une qualité au pixel près dans la conception des composants. La prochaine version de flutter 1.2 sera conçue pour prendre en charge les événements de clavier de bureau et le survol de la souris.

Développement Flutter avec Visual Studio Code

Visual Studio Code prend en charge le développement de flutter et fournit des raccourcis étendus pour un développement rapide et efficace. Certaines des fonctionnalités clés fournies par Visual Studio Code pour le développement de flutter sont répertoriées ci-dessous -

  • Aide au code - Lorsque vous souhaitez vérifier les options, vous pouvez utiliser Ctrl+Space pour obtenir une liste des options de complétion de code.

  • Solution rapide - Ctrl+. est un outil de correction rapide pour aider à corriger le code.

  • Raccourcis lors du codage.

  • Fournit une documentation détaillée dans les commentaires.

  • Raccourcis de débogage.

  • Redémarre à chaud.

Dart DevTools

Nous pouvons utiliser Android Studio ou Visual Studio Code, ou tout autre IDE pour écrire notre code et installer des plugins. L'équipe de développement de Google a travaillé sur un autre outil de développement appelé Dart DevTools. Il s'agit d'une suite de programmation Web. Il prend en charge les plates-formes Android et iOS. Il est basé sur une vue chronologique afin que les développeurs puissent facilement analyser leurs applications.

Installez DevTools

Pour installer DevTools, exécutez la commande suivante dans votre console -

flutter packages pub global activate devtools

Vous pouvez maintenant voir la sortie suivante -

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.

Exécuter le serveur

Vous pouvez exécuter le serveur DevTools à l'aide de la commande suivante -

flutter packages pub global run devtools

Maintenant, vous obtiendrez une réponse similaire à celle-ci,

Serving DevTools at http://127.0.0.1:9100

Démarrez votre application

Accédez à votre application, ouvrez le simulateur et exécutez à l'aide de la commande suivante -

flutter run --observatory-port=9200

Maintenant, vous êtes connecté à DevTools.

Démarrez DevTools dans le navigateur

Accédez maintenant à l'url ci-dessous dans le navigateur, pour démarrer DevTools -

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

Vous obtiendrez une réponse comme indiqué ci-dessous -

SDK Flutter

Pour mettre à jour le SDK Flutter, utilisez la commande suivante -

flutter upgrade

Vous pouvez voir une sortie comme indiqué ci-dessous -

Pour mettre à niveau les packages Flutter, utilisez la commande suivante -

flutter packages upgrade

Vous pouvez voir la réponse suivante,

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

Inspecteur de scintillement

Il est utilisé pour explorer les arbres de widgets flottants. Pour ce faire, exécutez la commande ci-dessous dans votre console,

flutter run --track-widget-creation

Vous pouvez voir une sortie comme indiqué ci-dessous -

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".

Maintenant, allez à l'url, http://127.0.0.1:50399/ vous pouvez voir le résultat suivant -