Création d'une application simple dans Android Studio

Dans ce chapitre, créons une application Flutter simple pour comprendre les bases de la création d'une application Flutter dans Android Studio.

Step 1 - Ouvrez Android Studio

Step 2- Créer un projet Flutter. Pour cela, cliquez surFile → New → New Flutter Project

Step 3- Sélectionnez Application Flutter. Pour cela, sélectionnezFlutter Application et cliquez Next.

Step 4 - Configurez l'application comme ci-dessous et cliquez sur Next.

  • Nom du projet: hello_app

  • Chemin du SDK Flutter: <path_to_flutter_sdk>

  • Emplacement du projet: <path_to_project_folder>

  • La description: Flutter based hello world application

Step 5 - Configurer le projet.

Définissez le domaine de l'entreprise comme flutterapp.tutorialspoint.com et cliquez Finish.

Step 6 - Entrez le domaine de l'entreprise.

Android Studio crée une application de flutter entièrement fonctionnelle avec un minimum de fonctionnalités. Vérifions la structure de l'application puis modifions le code pour faire notre tâche.

La structure de l'application et son objectif sont les suivants -

Différents composants de la structure de l'application sont expliqués ici -

  • android - Code source généré automatiquement pour créer une application Android

  • ios - Code source généré automatiquement pour créer une application iOS

  • lib - Dossier principal contenant le code Dart écrit à l'aide du framework Flutter

  • ib/main.dart - Point d'entrée de l'application Flutter

  • test - Dossier contenant le code Dart pour tester l'application Flutter

  • test/widget_test.dart - Exemple de code

  • .gitignore - Fichier de contrôle de version Git

  • .metadata - généré automatiquement par les outils de flutter

  • .packages - généré automatiquement pour suivre les paquets de flutter

  • .iml - fichier de projet utilisé par le studio Android

  • pubspec.yaml - Utilisé par Pub, Gestionnaire de paquets Flutter

  • pubspec.lock - Généré automatiquement par le gestionnaire de paquets Flutter, Pub

  • README.md - Fichier de description du projet écrit au format Markdown

Step 7- Remplacez le code de fléchettes dans le fichier lib / main.dart par le code ci-dessous -

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',
            )
         ),
      );
   }
}

Comprenons le code de la fléchette ligne par ligne.

  • Line 1- importe le package Flutter, matériel . Le matériau est un package flottant pour créer une interface utilisateur conformément aux directives de conception de matériau spécifiées par Android.

  • Line 3- C'est le point d'entrée de l'application Flutter. Appelle la fonction runApp et lui transmet un objet de la classe MyApp . Le but de la fonction runApp est d'attacher le widget donné à l'écran.

  • Line 5-17- Widget est utilisé pour créer une interface utilisateur dans le cadre de flutter. StatelessWidget est un widget, qui ne maintient aucun état du widget. MyApp étend StatelessWidget et remplace sa méthode de génération . Le but de la méthode de génération est de créer une partie de l'interface utilisateur de l'application. Ici, la méthode de construction utilise MaterialApp , un widget pour créer l'interface utilisateur de niveau racine de l'application. Il a trois propriétés - titre, thème et accueil .

    • title est le titre de l'application

    • theme est le thème du widget. Ici, nous définissons le bleu comme couleur globale de l'application à l'aide de la classe ThemeData et de sa propriété, primarySwatch .

    • home est l'interface utilisateur interne de l'application, que nous définissons un autre widget, MyHomePage

  • Line 19 - 38- MyHomePage est identique à MyApp sauf qu'il renvoie le widget Scaffold . Scaffold est un widget de niveau supérieur à côté du widget MaterialApp utilisé pour créer une conception matérielle conforme à l'interface utilisateur. Il a deux propriétés importantes, appBar pour afficher l'en-tête de l'application et le corps pour afficher le contenu réel de l'application. AppBar est un autre widget pour rendre l'en-tête de l'application et nous l'avons utilisé dans la propriété appBar . Dans la propriété du corps , nous avons utilisé le widget Centre , qui le centre du widget enfant. Le texte est le dernier widget le plus interne pour afficher le texte et il est affiché au centre de l'écran.

Step 8 - Maintenant, lancez l'application en utilisant, Run → Run main.dart

Step 9 - Enfin, la sortie de l'application est la suivante -