Comment créer votre première application iOS Flutter sur MacOS

Flutter 1.0 a été publié par Google le 4 décembre 2018 et constitue un puissant outil vous permettant de créer de superbes applications sur iOS et Android. Avec d'autres plates-formes telles que Firebase, le développement d'applications mobiles est maintenant plus facile que jamais.

Concevez de superbes applications avec Flutter

Dans ce tutoriel, je vais vous montrer comment créer votre première application Hello World avec Flutter sur un ordinateur Mac, que nous allons tester sur le simulateur Xcode iOS.

1. Installation de Flutter

Pour installer Flutter sur notre ordinateur, nous devons d’abord télécharger le SDK Flutter. Nous devrions également créer et nous déplacer dans un répertoire de travail personnalisé et déplacer le fichier téléchargé flutter_macos_v1.0.0-stable.zip dans ce répertoire.

Après cela, nous pouvons décompresser l’outil Flutter et configurer l’environnement à l’aide du code suivant saisi dans notre console.

Décompressez flutter_macos_v1.0.0-stable.zip
export PATH = "$ PATH:` pwd` / flutter / bin "

Si tout se passe bien, nous devrions pouvoir vérifier les dépendances en entrant le code suivant dans notre console.

docteur flottant

Avant de passer à l'étape suivante, nous devons également configurer notre profil bash. Le profil bash se trouve dans le répertoire de base nommé .bash_profile, ouvrez le fichier avec un éditeur de texte et ajoutez la ligne suivante.

export PATH = "$ PATH: [PATH_TO_FLUTTER_GIT_DIRECTORY] / flutter / bin"

Où [PATH_TO_FLUTTER_GIT_DIRECTORY] doit être remplacé par le nom du répertoire de travail que nous venons de créer pour Flutter. Une fois le profil configuré, nous pouvons exécuter la commande suivante dans notre répertoire de base pour mettre à jour le chemin.

source ~ / .bash_profile

Dans le cas où .profile est introuvable, créez simplement un fichier vide portant le nom .profile et enregistrez-le dans le répertoire racine, puis réessayez.

Pour vérifier que le chemin est correctement mis à jour, nous pouvons taper la commande suivante dans la console.

echo $ PATH

Et nous devrions voir quelque chose contenant ce qui suit dans l’argument de retour. Où [PATH_TO_FLUTTER_GIT_DIRECTORY] est notre répertoire de travail.

[PATH_TO_FLUTTER_GIT_DIRECTORY] / Flutter / bin

2. Configuration du simulateur iOS

Afin de configurer le simulateur iOS en premier lieu, nous devons installer Xcode sur notre ordinateur, qui peut être téléchargé en ligne ou dans le magasin d'applications. Après cela, nous pouvons configurer les outils de ligne de commande Xcode pour utiliser notre version nouvellement installée à l'aide de la commande suivante saisie dans notre console.

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

Nous pouvons ensuite ouvrir le simulateur iOS avec la commande suivante.

ouvrir un simulateur

Cela peut prendre un certain temps à charger, mais une fois que cela est fait, nous pouvons passer au déploiement de notre première application Flutter.

Il y a deux autres choses à noter:

1. Assurez-vous que votre simulateur utilise un périphérique 64 bits (iPhone 5s ou ultérieur) en vérifiant les paramètres du menu Matériel> Périphérique du simulateur.

2. En fonction de la taille de l’écran de votre ordinateur de développement, les appareils iOS simulés à haute densité d’écran risquent de déborder de votre écran. Définissez l’échelle de l’appareil dans le menu Fenêtre> Échelle du simulateur.

3. Créer une application Hello World dans Flutter

Créer une application en mode flottant est assez simple, il suffit de taper la commande suivante. Vous êtes libre de changer hello_world en un autre nom de votre choix. Flutter imprimera «Tout est fait!» Dans la console une fois le processus terminé.

flutter créer hello_world

Nous pouvons maintenant aller dans le répertoire app avec:

cd hello_world

Ensuite, lancez l'application avec:

course flottante

Flutter générera une application par défaut comme celle présentée dans la démo, ce qui nous permet de cliquer sur un bouton tout en suivant le nombre de clics. Le composant principal de l'application est défini par le fichier main.dart dans le dossier lib. Essayez de remplacer le contenu du fichier main.dart par le code suivant.

importer 'package: flutter / material.dart';

void main () => runApp (MyApp ());

La classe MyApp étend StatelessWidget {
  @passer outre
  Construction du widget (contexte BuildContext) {
    retourner MaterialApp (
      titre: 'Welcome to Flutter',
      accueil: échafaudage (
        appBar: AppBar (
          titre: Texte ('Welcome to Flutter'),
        ),
        corps: centre (
          child: Text ('Hello World'),
        ),
      ),
    )
  }
}

Une fois cela fait, nous pouvons mettre à jour le simulateur en tapant "r" dans la console. Et nous devrions voir le simulateur mis à jour pour afficher le texte «Hello World» comme indiqué ci-dessous.

Toutes nos félicitations! Vous venez de créer votre première application Flutter. Pour plus d'informations sur Flutter, vous pouvez les trouver sur le site officiel. Flutter utilise principalement une fléchette et vous pouvez en trouver plus sur son site officiel.

Amusez-vous à créer des applications mobiles!

À l'avenir, je pourrais écrire plus de tutoriels sur Flutter. Je pense que cet outil a un avenir prometteur dans le domaine du développement d'applications mobiles. Vous trouverez ci-dessous les guides relatifs au développement de Flutter et iOS, je vais continuer à mettre à jour la liste.

  • Comment intégrer votre appli Flutter iOS avec Firebase sur MacOS
  • Comment tester votre application Flutter iOS sur votre appareil iOS