Créer une application mobile avec Flutter

1. Appel de la bibliothèque material.dart utilisée dans la conception.

• La bibliothèque material.dart fournit des widgets et des outils spécifiques au matériau, conformes aux directives de conception de Material Design de Google.
• Elle est essentielle pour la création d’interfaces utilisateur attrayantes et cohérentes.

2. La fonction main () pour démarrer le projet.

• La fonction main () est le point d’entrée de l’application Flutter. C’est là que le programme commence son exécution. Dans l’exemple donné, la fonction main appelle runApp, qui est le point de départ pour exécuter l’application.

3. La fonction runApp qui est le déclencheur (le moteur) de la conception.

• La fonction runApp prend en argument le widget racine de l’application.

Modification du code par



Exécution du code

• import 'package:flutter/material.dart': Vous devez commencer par importer le package Flutter,Material Design est un langage visuel standard que Flutter utilise pour fournir des widgets.
• void main(): Comme vous le savez, chaque programme Dart doit avoir une fonction void main(), et Flutter ne fait pas exception.
• La méthode main() utilise la notation de flèche (=>) qui vous permet de raccourcir les fonctions.

Les fonctions dans Dart

• Notre application MyApp hérite de Widget Stateless, ce qui en fait également un widget.
• runApp(): La méthode runApp() est une instance de widget, ce qui en fait la racine de l’arborescence qui démarre notre application.
• Center: La méthode runApp() prend un widget comme argument. Dans notre cas, Center , qui possède un autre widget enfant, Text.
• Nous avons plusieurs widgets imbriqués, comme Center et Text.
• Text: Le widget Text permet d’afficher un texte du côté utilisateur. Il est hautement personnalisable, vous pouvez modifier la couleur et la taille de la police.
• En réalité, les widgets peuvent avoir un ou plusieurs enfants, et cela se produit tout le temps et peut être très profond.
• Les widgets Flutter peuvent avoir leurs propres propriétés, comme textDirection, style et color .
• Le but principal de runApp() est d’attacher le widget donné à l’écran.

Nous avons créé une application Flutter simple qui affiche un texte « Bienvenue Flutter! » au centre de l’écran.

• Les méthodes décrits en haut ne seront pas cités ici
• Notre application MyApp hérite de Widget Stateless, ce qui est un autre widget.
• Le widget Scaffold (qui veut dire échafaudage), issu de la bibliothèque Material, fournit une barre d’application par défaut, un titre et un corps qui contient l’arborescence de widgets de l’écran d’accueil.
• La sous-arborescence du widget peut être assez complexe. De plus, Scaffold est généralement utilisé comme sous-widget de MaterialApp, il remplit l’espace disponible et occupe la totalité de la fenêtre ou de l’écran de l’appareil.
• La tâche principale d’un widget consiste à fournir une méthode build() qui décrit comment afficher le widget en fonction d’autres widgets de niveau inférieur.
• La fonction build() renvoie ce qui doit être affiché à l’écran.
• MaterialApp est le widget le plus couramment utilisé pour le développement Flutter, qui est conforme aux concepts de Material Design.
• BuildContext est utilisé pour localiser un widget particulier dans une arborescence et chaque widget possède son propre BuidContext. En fait, chaque widget dans Flutter est créé par la méthode build(), qui prend BuildContext comme argument.
• Le corps de cet exemple consiste en un widget Center contenant un widget enfant Text. Le widget Center aligne sa sous-arborescence au centre de l’écran.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Exemple'),
        ),
        body: const Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

• Importation de packages :

import 'package:flutter/material.dart';

• Cela importe le package material de Flutter, qui contient des widgets pour la conception basée sur le Material Design, le style de conception de Google pour les applications mobiles et web.
• Fonction main :

void main() {
  runApp(const MyApp());
}

• La fonction main est le point d’entrée de l’application. Ici, elle appelle la fonction runApp pour exécuter l’application et lui passe une instance de la classe MyApp. Le mot-clé const est utilisé pour créer une instance constante de MyApp.

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // ...
  }
}

• MyApp est une classe qui étend StatelessWidget, ce qui signifie que c’est un widget immuable qui ne change pas d’état. Le constructeur const MyApp({super.key}); déclare un constructeur constant pour la classe.

Méthode build :

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Exemple'),
      ),
      body: const Center(
        child: Text('Hello, Flutter!'),
      ),
    ),
  );
}

• La méthode build est appelée lors de la construction du widget. Elle retourne une hiérarchie de widgets qui représente l’apparence de l’application. Dans cet exemple, un widget MaterialApp est utilisé comme conteneur principal, avec une seule page définie à l’aide du widget Scaffold.
• Le Scaffold contient une barre d’applications (AppBar) avec un titre « Flutter Exemple ».
• Le corps (body) du Scaffold contient un widget Center qui a un enfant Text affichant « Hello, Flutter! ».

Dans Flutter, l’@override annotation est utilisée pour indiquer qu’une méthode d’une sous-classe est destinée à remplacer une méthode de sa superclasse.
• Cette annotation permet de détecter les erreurs au moment de la compilation si la méthode de la sous-classe ne remplace pas correctement une méthode de la superclasse.

class Animal {
  void makeSound() {
    print('Some generic sound');
  }
}

class Dog extends Animal {
  @override
  void makeSound() {
    print('Woof! Woof!');
  }
}

void main() {
  var dog = Dog();
  dog.makeSound(); // This will print 'Woof! Woof!'
}

• Dans cet exemple, la Dogclasse étend la Animalclasse et la makeSoundméthode de la Dogclasse est annotée avec @override. Cela indique que makeSoundin Dogest destiné à remplacer la makeSoundméthode dans la Animalclasse.
• Si l’ @override annotation est utilisée mais que la méthode de la sous-classe ne remplace pas correctement une méthode de la superclasse, l’analyseur Dart émettra un avertissement, vous aidant ainsi à détecter les problèmes potentiels dès le début du processus de développement.

1. Pagehomepage.dart

2. Page main.dart

3. Exécution du code

4. Changer le style du Widget Text

• Changer le style du Widget Text ‘Bienvenue Flutter‘ avec les propriétés suivantes: