MaterialApp – le principal widget dans Flutter

MaterialApp est un widget qui encapsule plusieurs widgets nécessaires pour la conception d’applications material design. En fait, le mot material ou matériel, veut dire qu’il s’inspire d’objets réels.

Material Designest un langage de conception développé par Google. Ce nouveau concept de conception a été créée en 2014 et est aujourd’hui l’une des plus grandes tendances du design.

Il est fluide, naturel, intuitif et simple à comprendre, Material Design possède plusieurs caractéristiques et principes fondamentaux. Son objectif est de synthétiser les concepts classiques d’un bon design avec l’innovation et les possibilités apportées par la technologie.

Le widget MaterialApp est une classe Flutter qui fournit une disposition de conception material design. En fait, c’est un composant principal pour d’autres widgets enfants et on l’utilise généralement comme widget de niveau supérieur.

De plus, on peut utiliser MaterialApp dans de nombreuses plates-formes différentes, qu’il s’agisse de smartphones, d’ordinateurs ou de montres intelligentes.

Toutefois, pour l’utiliser, nous devons créer une nouvelle instance dans la méthode runnApp qui est le root ou la racine de notre application.

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      
    )
  );
}

Nous allons créer une page d’accueil et lui donner une couleur.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
        title: "Le nom de l'application", 
        home: Material(color: Colors.amber
    )));
}

Quelques attributs ou propriétés de MaterialApp

• title : le nom de l’application qui s’affiche dans la fenêtre d’administration de l’application.
• theme : le thème, qui définit la couleur de l’interface utilisateur de l’application.
• color : la couleur du thème de l’application, qui est également la couleur de la fenêtre d’administration de l’application.
• home : widget de l’interface principale de l’application.
• routes : la table de navigation supérieur de l’application, qui permet de naviguer entre les pages.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: 'Application Flutter', //le nom de l'application
      home: Center(
        child: Text('hello flutter', style: TextStyle(color: Colors.blue, decoration: TextDecoration.none)),
      )));
}

Comment supprimer la bannière DEBUG ?

Si vous exécutez votre application mobile Flutter, une étiquette DEBUG s’affichera dans le coin supérieur droit.

En fait, cette bande sera automatiquement supprimée lorsque vous créerez votre application mobile Flutter dans un mode de publication . Cependant, nous pouvons également la supprimer d’une application de débogage.

Tout ce que vous avez à faire et de définir la propriété debugShowCheckedModeBanner sur false dans le widget MaterialApp de votre application.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Nom de l'application",
      home: Material(
          color: Colors.teal,
          child: Center(
              child: Text(
            "Bonjour !",
            textDirection: TextDirection.ltr,
            style: TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.bold,
              fontStyle: FontStyle.italic,
              fontSize: 35.0,
            ),
          )))));
}

Nous avons un widget Material qui permet de définir un élément de l’interface utilisateur en respectant les règles Matérial.

Le widget Material() prend une couleur et possède un widget enfant Center(). Le widget Center() aligne son widget enfant Text() au centre de l’espace disponible sur l’écran. Puis Text(), prend une chaîne de caractère et va l’afficher en spécifiant le style du texte en utilisant la classe TextStyle().

home : la page d’accueil est le premier widget à afficher lorsque l’application démarre normalement, sauf indication contraire. Nous avons affiché un texte avec une couleur et une taille qu’on a définies.