Loupe

L'installation Flutter pour MacOS : La story Flutter continue

Dans l'article précédent, nous avons parlé de Flutter, le framework cross-plateform de Google. Nous allons donc maintenant voir comment préparer son environnement pour le développement Flutter. Cet article sera consacré à l'installation pour macOS, si vous êtes sous Windows, c'est par ici que ça se passe.

Ready ? Steady ? Go !

C'est parti pour l'installation de Flutter sur Mac. Comme expliqué dans l'article concernant l'installation sous Windows, pour développer des applications Flutter pour iOS, il est obligatoire de posséder un mac et de développer sur celui-ci.

Configuration requise

Tout d'abord, la configuration minimum requise :

  • Système d'exploitation : macOS (64-bit)
  • Espace disque : 700 MB (sans inclure l'espace pour l'IDE/tools).
    • Outils :
    • bash
    • curl
    • git 2.x
    • mkdir
    • rm
    • unzip
    • which

SDK Flutter

Si la confirmation de votre Mac est corforme, téléchargez le SDK Flutter. (Ou voir les autres versions)

Une fois le SDK téléchargé, il faut extraire (si cela n'est pas automatique) l'archive dans le dossier choisi (par exemple : ~/development). Si l'extraction est automatique, copier le dossier dans le dossier cible.

Path

Ajoutons maintenant Flutter aux variables d'environnement.

Pour cela, allons dans le terminal et plaçons-nous dans le dossier contenant le dossier flutter à l'aide de la commande cd ~/<votre-chemin> (cs ~/development dans mon cas).

Créons ou modifions le fichier $HOME/.bash_profile à l'aide de la commande vi $HOME/.bash_profile (j'ai choisi vi mais vous pouvez utiliser l'éditeur de votre choix). Ajoutons la ligne export PATH="$PATH:~/development/flutter/bin" (où ~/development est le dossier où vous avez placé flutter lors de l'étape précédente. Si vous avez choisi un emplacement différent, remplacez cette partie var votre chemin).

Ensuite, utilisons la commande source $HOME/.bash_profile pour mette à jour le terminal avec nos modifications.

Nous pouvons maintenant utilser la commande flutter dans notre terminal.

Quoi de neuf doctor ?

De la même manière que pour l'installation pour Windows, nous allons vérifier notre installation à l'aide de la commande flutter doctor. Cette commande vérifie votre environnement et affiche un rapport avec le statut de l'installation de Flutter. Voici donc mon output :

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.2.1, on Mac OS X 10.14.3 18D109, locale fr-FR)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.io/setup/#android-setup for detailed instructions).
      If Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
      You may also want to add it to your PATH environment variable.

[!] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ Brew can be used to install tools for iOS device development.
      Download brew at https://brew.sh/.
[!] Android Studio (version 3.4)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] Connected device (1 available)

! Doctor found issues in 3 categories.

Flutter est bien installé mais il me manque le SDK Android, Android Studio, et les outils pour déployer sur des devices physiques iOS.

Procédons maintenant à la configuration de la partie iOS.

Installation iOS

Flutter a besoin de Xcode version 9 ou plus récent. Si vous ne l'avez pas ou si vous avez une ancienne version, commencez par le télécharger et le mettre à jour.

Maintenant que nous avons une version de Xcode à jour, configurons les outils de ligne de commande pour utiliser cette version. Pour cela, utilisons la commande suivante :

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

Le chemin peut être différent en fonction de la version que vous utilisez, si c'est le cas, modifiez-le en fonction de votre chemin vers Xcode.

Vérifions maintenant que la licence Xcode a bien été signée, et sinon signons-la sinon, après avoir tout lu, bien évidemment :

sudo xcodebuild -license 

Déploiement sur des devices physiques

Pour pouvoir déployer sur des devices iOS, il nous faut quelques outils supplémentaires. Commençons par installer Homebrew avec la commande suivante :

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Puis brew update pour s'assurer qu'il est bien à jour. "Already up-to-date." Pile ce qu'on attendait.

Passons donc à l'installation des outils manquants avec les commandes indiquées par flutter doctor un peu plus tôt.

brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

Si une de ces commandes échoue, il est recommendé d'exécuter la commande brew doctor et de suivre les instructions.

Installation Android

Flutter dépend d'Android Studio pour récupérer les dépendances d'Android. Dans cette étape, nous allons donc commencer par installer Android Studio. Démarrons-le et suivons les étapes de l'installation.

Capture d’écran 2019-05-02 à 10.02.39.png

Installons ensuite les plugins Flutter et Dart pour Android Studio dans le menu Configure > Plugins.

Capture d’écran 2019-05-02 à 10.06.05.png

Doctor ?

Maintenant que tout est installé, exécutons à nouveau la commande flutter doctor. Voici ce qu'il me dit

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.2.1, on Mac OS X 10.14.3 18D109, locale fr-FR)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
[✓] Android Studio (version 3.4)
[!] Connected device
    ! No devices available

! Doctor found issues in 3 categories.

Exécutons donc les commandes indiquées pour sélectionner la bonne application Xcode et accepter les licences Android. Une fois cela fait, appelons à nouveau le docteur

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.2.1, on Mac OS X 10.14.3 18D109, locale fr-FR)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
[✓] Android Studio (version 3.4)
[!] Connected device
    ! No devices available

Cette fois-ci, tout va bien :)

Nous sommes donc prêts à utiliser Flutter !

Première application

Quitte à avoir installé Android Studio et les extentions Flutter lors de l'étape précédante, nous allons l'utiliser pour créer notre première (ou pas) application Flutter.

Pour cela, démarrons Android Studio puis choisissons l'option "Start a new Flutter project".

Capture d’écran 2019-05-02 à 09.51.03.png

Android Studio nous propose ensuite de choisir le type de projet que nous souhaitons créer. Choisissez donc le type de projet souhaité. Pour ma part, je choisis de créer une application donc je sélectionne "Flutter application".

Choisissons ensuite un nom de projet et le dossier dans lequel le placer. Si le SDK Flutter n'a pas été détecté, renseignez le chemin vers votre dossier Flutter (~/Documents/development/flutter dans mon cas).

TADA!

Après cette installation encore une fois plus ou moins longue et plus ou moins fastidieuse, notre environnement est prêt et nous pouvons enfin commencer à jouer avec Flutter en ciblant iOS aussi cette fois !

La suite ?

Ces billets pourraient aussi vous intéresser

Vous nous direz ?!

Commentaires

comments powered by Disqus