Créer sa première application avec Flutter

Tout d’abord vous devez vous assurer d’avoir installé Android Studio, le SDK de flutter et un éditeur de code. Ici, j’utiliserai VS Code pour éditer mon code car c’est certainement le meilleur éditeur gratuit.

Créez un nouveau fichier avec VS Code

Ouvrez VS Code et créez un nouveau fichier. Si aucune création ne vous est proposée, maintenez Ctrl + Shift + p.

Vous devriez alors avoir un menu déroulant comme suit. Entrez alors « Flutter new project » puis pressez « Entrer ».

Vous êtes ensuite invité à entrer le nom de votre application. Choisissez le bien car tous les fichiers seront créés en référence à ce nom bien qu’il ne détermine pas le nom de votre application telle qu’elle apparaîtra une fois publiée.

Entrez un le nom de votre application. Si le nom de votre de votre application est composé de plusieurs mots, insérez un _ entre les différents mots comme ceci par exemple: mon_app_révolutionnaire. Notez que vous ne pouvez pas utiliser de majuscules pour le nom de votre application.

Votre nouveau document s’initialise et vous obtenez ensuite une page comme celle-ci:

Modifier le document

Pour l’instant si vous ne maîtriser pas encore le langage Dart, les syntagmes ou bien les groupes de mots qui apparaissent doivent vous paraître obscurs. C’est normal pourtant en apprenant les bases en quelques jours vous comprendrez à quoi servent tous ces éléments.

Sélectionner l’ensemble des éléments qui compose la page (en cliquant avec la souris au milieu de la page et en maintenant Crtl + A puis Supprimer). Une fois que tout a été supprimé, votre fichier qui est de base intitulé lib/main.dart doit être vide.

Vous pouvez alors copier le code suivant:

import 'package:flutter/material.dart';

Le mot « import » signifie que vous avertissez le framework que vous importez quelque chose dont vous allez vous servir dans cette page. Il s’agit ici d’une bibliothèque appelée material.dart. C’est grâce à cette bibliothèque que nous allons pouvoir importer des widgets à insérer dans notre code. C’est en quelque sorte les matériaux pour réaliser les fondations.

Ensuite entrez le code suivant:

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

« Void main() » signifie que c’est l’entrée principale de votre application. C’est par ici que votre smartphone va commencer à exécuter votre code.

Ensuite entrez le code suivant:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Vous ne devez pas comprendre grand chose mais c’est normal car ce tutoriel n’est pas fait pour vous apprendre à coder en langage Dart mais juste à créer une application simple. Votre code complet devrait ressembler à ceci:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Comprendre les éléments clés de la page

Ne portez pas attention sur les deux lignes suivantes sur lesquelles je reviendrai dans d’autres tutoriels.

class MyApp extends StatelessWidget {
  @override

Widget build(BuildContext context) est une méthode qui renvoie un widget. Ici comme vous pouvez le voir on se sert de la bibliothèque Material en retournant MaterialApp. Le mot title est le titre de votre page mais ce ne sera pas le titre apparent. Pour cela, on entre le widget « home ». C’est la continuité de notre void main car après la porte d’entrée, nous passons par la route principale.

« Scaffold » est le widget qui nous permet d’implémenter les éléments de design basiques de notre page comme la barre supérieure ou siège le titre de notre application. Ici c’est ce à quoi sert « appBar ». Le widget « title » sera la valeur affichée dans la barre de notre application.

Ensuite le widget « body » cible ce que votre application va avoir en son centre, littéralement en son centre. C’est dans notre cas ce qui viendra après la barre de notre application.

Le widget « center » va nous permettre de centrer le texte que nous voulons faire apparaître sur notre page. Ainsi dans le widget juste en dessous, vous pouvez remplacer le texte « Hello World » par « Ceci est ma première application ».

Lancer l’émulateur

Voilà, votre première application est prête à être lancée. Pour voir le résultat immédiatement, cliquez sur l’onglet « debug » en haut.

Cliquez sur « Start debugging » puis sélectionnez l’appareil que vous avez préalablement créé pour émuler votre projet.

Ensuite l’émulateur se lance et vous obtenez le résultat de votre application en quelques secondes, minutes selon la vitesse de votre ordinateur!

N’hésitez pas à me contacter si vous avez besoin d’informations supplémentaires ou visitez les autres tutoriels et documentations de ce site.

Laisser un commentaire