Bien démarrer avec Flutter pour Surface Duo

Important

Les fonctionnalités et l’aide décrites dans cet article sont en préversion publique et peuvent faire l’objet de modifications importantes avant leur lancement en disponibilité générale. Microsoft ne donne aucune garantie, expresse ou implicite, concernant les informations fournies ici.

Pour commencer, suivez les instructions de téléchargement et d’installation de l’émulateur du double écran Surface Duo sur un ordinateur que vous avez également configuré pour le développement Flutter. Vous pouvez suivre le Guide de démarrage de Flutter si vous commencez à partir de zéro.

Prise en charge d’appareil pliable Flutter

Conseil

La prise en charge d’appareil pliable Flutter est en préversion publique. Consultez la PR du moteur Flutter et la PR du framework Flutter sur GitHub pour fournir du feedback.

Comme la prise en charge d’appareil pliable Flutter est encore en révision et n’a pas encore été fusionnée avec Flutter master, la configuration demande d’utiliser une version personnalisée de Flutter :

  1. Configurer le moteur Flutter personnalisé.
  2. Compiler le moteur Flutter personnalisé.
  3. Configurer le framework Flutter personnalisé.
  4. Créer votre application avec prise en charge d’appareil pliable.

Ces étapes sont expliquées en détail ci-dessous.

Étape 1. Configurer le moteur Flutter personnalisé

Suivez les instructions de la page Setting up the Engine development environment. À l’étape 4, vous devez utiliser cette configuration .gclient :

solutions = [
  {
    "managed": False,
    "name": "src/flutter",
    "url": "git@github.com:andreidiaconu/engine.git",
    "custom_deps": {},
    "deps_file": "DEPS",
    "safesync_url": "",
  },
]

Vous disposez maintenant de tout le code nécessaire pour pouvoir compiler votre propre version du moteur Flutter avec prise en charge d’appareil pliable.

Étape 2. Compiler le moteur Flutter personnalisé

Suivez les instructions de la page Compiling the engine. L’émulateur Surface Duo est un émulateur x64, donc sur un ordinateur Mac OS ou Linux, les étapes 3 et 4 sont les suivantes :

  • ./flutter/tools/gn --android --android-cpu x64 --unoptimized && ./flutter/tools/gn --unoptimized && ./flutter/tools/gn --android --unoptimized
  • ninja -C out/android_debug_unopt_x64 && ninja -C out/host_debug_unopt && ninja -C out/android_debug_unopt

Vous disposez maintenant d’une version de moteur locale avec prise en charge d’appareil pliable.

Étape 3. Configurer le framework Flutter personnalisé

L’outil flutter doit être configuré pour utiliser le moteur personnalisé au lieu du moteur par défaut :

  1. Assurez-vous que adb (des outils de la plateforme Android) se trouve dans votre chemin (par exemple, c’est adb qui imprime la sortie).

  2. git clone git@github.com:andreidiaconu/flutter.git

  3. cd flutter

  4. Ajoutez le répertoire bin de ce dépôt à votre chemin. Cela vous permettra d’utiliser la commande flutter dans ce répertoire plus facilement.

    Avertissement

    Annulez cette étape lorsque vous souhaitez revenir à votre installation normale de Flutter.

  5. Exécutez flutter update-packages. Cela permet de récupérer tous les packages Dart dont dépend Flutter. Si la résolution de version a échoué, essayez git fetch upstream pour mettre à jour les versions Flutter avant flutter update-packages.

Ces instructions sont très similaires à ce que vous devez faire pour configurer l’environnement de développement du framework.

Étape 4. Créer votre application avec prise en charge d’appareil pliable

Le framework et le moteur sont distincts et ne fonctionnent pas ensemble pour l’instant. Suivez les instructions sur l’utilisation d’un moteur local à partir de la page de l’outil flutter pour les faire fonctionner ensemble.

Et voilà ! Vous disposez maintenant d’un framework Flutter et d’un moteur Flutter personnalisés sur votre ordinateur, qui contiennent tous les changements de la PR du moteur Flutter et de la PR du framework Flutter, et qui peuvent créer votre application en utilisant la nouvelle prise en charge de MediaQuery, le widget TwoPane et les routes de menu contextuel gérant la charnière.