devstory

Créez votre première application Flutter - Hello Flutter

  1. L'objectif de l'article
  2. Créer le projet Flutter
  3. L'explication de la structure du projet
  4. Ecrire les codes pour l'application
  5. Lancer l'application

1. L'objectif de l'article

Dans cet article, je vous aide à créer votre première application Flutter dans Android Studio et la faire fonctionner avec succès avec Android Emulator.
Tout d'abord, assurez-vous que tous les outils nécessaires suivants sont déjà bien installés:

2. Créer le projet Flutter

Dans Android Studio, créer un projet Flutter:
  • File > New > New Flutter Project...
Le projet a été bien créé. Voici sa structure:

3. L'explication de la structure du projet

android
Le dossier génère automatiquement le code pour l'application d'Android.
ios
Le dossier génère automatiquement le code pour l'application d'iOS.
lib
Le dossier d'accueil contient le code Dart de l'application.
lib/main.dart
Le fichier est convoqué pour démarrer (start) l'application.
test
Le dossier contient les codes Dart pour tester l'application.
test/widget_test.dart
Sample code
.gitignore
Git version control file - Ce dossier contient la configuration du projet GIT.
.metadata
Le dossier est automatiquement généré par l'outil de Flutter.
.packages
Automatiquement généré, le fichier contient une liste de dépendances utilisées par le projet.
.iml
Un fichier de projet d'Android Studio.
pubspec.yaml
Un fichier utilisé pour déclarer les ressources relatives au projet comme images, polices, etc.
pubspec.lock
Ce fichier doit être ajouté à GIT Control pour s'assurer que les membres de votre équipe de développement utilisent les mêmes versions de bibliothèque.
README.md
Le fichier décrit le projet, lequel est écrit selon la structure Markdown.

4. Ecrire les codes pour l'application

Supprimer le contenu du fichier main.dart et le remplacer par un nouveau.
lib/main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World Demo Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Home page'),
    );
  }
}
class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: Center(
          child:
          Text(
            'Hello World',
          )
      ),
    );
  }
}

5. Lancer l'application

L'application Flutter doit être mise en place sur un appareil d'Android ou d'iOS. Par conséquent, au cours du processus de développement, vous avez, comme choix, l'une des options suivantes:
  • Connecter votre appareil Android à votre ordinateur et activer le mode développeur (Developer mode).
  • Connecter votre appareil iOS à votre ordinateur (comme un iPhone), et activer le mode développeur (Developer mode).
  • Exécuter un émulateur Android (Android Emulator).
Au cours de la programmation d'une application Flutter dans Android Studio, la meilleure approche consiste à lancer un émulateur d'Android (Android Emulator).
Dans Android Studio veuillez sélectionner:
  • Tools > AVD Manager
Ou cliquer sur l'icône "AVD Manager" sur la barre d'outil:
Lancer une application virtuel sur la liste:
Si vous ne observez aucune liste d'appareils virtuels, créer en un conformément aux instructions suivantes:
Android Emulator est mis en place et prêt à déployer l'application Flutter:
Dans la barre d'outil d'Android Studio, lancer votre application Flutter comme dans l'illustration suivante:
Voici enfin le résultat final:

Tutoriels de programmation Flutter

Show More