Le widget MaterialApp de Flutter

Sommaire

1- Qu'est-ce que MaterialApp Widget ?
2- Quelques attributs ou propriétés de MaterialApp
3- MaterialApp
4- Comment supprimer la bannière DEBUG ?
5- Quelle est la différence entre Scaffold et MaterialApp dans Flutter ?
6- Application
6.1.1- Cours Flutter

Le widget MaterialApp de Flutter

Qu’est-ce que MaterialApp Widget ?

Avant d’entrer dans MaterialApp , comprenons ce qu’est le « Material Design« .

Le « Material Design » est un « langage de conception » développé par Google. Cette nouvelle méthodologie de conception a été créée en 2014 et est aujourd’hui l’une des plus grandes tendances du design .
Pensé pour être fluide, naturel, intuitif et simple à comprendre, Material Design a plusieurs particularités et fondements, et vise à synthétiser les concepts classiques d’un bon design avec l’innovation et les possibilités apportées par la technologie et la science.
Il offre une expérience transparente sur de nombreuses plates-formes différentes, qu’il s’agisse de smartphones, d’ordinateurs ou de montres intelligentes.

MaterialApp est l’un des widgets les plus puissants de Futter. si vous créez une application Flutter de base, le premier widget que vous verrez est MaterialApp
Le Widget MaterialApp est une classe prédéfinie dans un flutter. C’est probablement le composant principal ou central du flutter qui permet l’accès à tous les autres composants et widgets fournis par Flutter SDK.

MaterialApp est un widget pratique qui intègre divers widgets généralement nécessaires aux applications de conception de matériaux .
Le widget Texte, le widget Bouton déroulant , le widget AppBar , le widget Scaffold , le widget ListView, le widget StatelessWidget ,le widget IconButton , le widget TextField , le widget Padding , le widget ThemeData , etc. sont les widgets accessibles à l’aide de la classe MaterialApp .

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 Design est 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.
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(const MaterialApp( title: "Le nom de l'application", home: Material(color: Colors.amber))); }

home : Il est utilisé, dans l’exemple, pour la route par défaut de l’application, c’est-à-dire que le widget qui y est défini s’affiche lorsque l’application démarre normalement.

En enveloppant votre application dans MaterialApp , vous indiquez à votre application d’utiliser Material Design d’Android , qui est un système de conception créé par Google pour aider les équipes à créer des expériences numériques de haute qualité pour Android, iOS, Flutter et le Web.

Quelques attributs ou propriétés de MaterialApp

title: C’est le titre de l’application, visible dans le gestionnaire de tâches lorsque l’application est en arrière-plan sur certaines plateformes (comme Android).

MaterialApp( title: 'Ma Super Application', home: MyHomePage(), )

theme : Détermine le thème de l’application, comme les couleurs, polices et styles pour les widgets.

MaterialApp( theme: ThemeData( primarySwatch: Colors.green, ), )

color : La couleur du thème de l’application, qui est également la couleur de la fenêtre d’administrationde l’application.
Couleur primaire utilisée pour les éléments du système (par exemple, la barre des tâches ou la barre de statut sur Android).

MaterialApp( color: Colors.blue, )

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( const MaterialApp( title: 'Application Flutter', //le nom de l'application home: Center( child: Text( 'hello flutter', style: TextStyle(color: Colors.blue, decoration: TextDecoration.none), ), ), ), ); }

MaterialApp

Avant de créer MaterialApp, nous devons importer le package de matériel fourni par Flutter SDK.

import 'package:flutter/material.dart';

Ce package nous fournit tous les widgets que nous pouvons utiliser dans notre application. Par exemple : AppBar, Scaffold, BottomNavigationBar, Card, Chip, BottomSheet, etc.
MaterialApp doit avoir au moins l’une des propriétés home, routes, onGenerateRouteou buildernon nulles. Sans cela, vous obtiendrez une erreur.
Ce package nous fournit tous les widgets que nous pouvons utiliser dans notre application. Par exemple : AppBar, Scaffold, BottomNavigationBar, Card, Chip, BottomSheet, etc.

MaterialApp doit avoir au moins l’une des propriétés home, routes, onGenerateRouteou buildernon nulles. Sans cela, vous obtiendrez une erreur.

import 'package:flutter/material.dart'; class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(); } }

Comment supprimer la bannière DEBUG ?

Si vous exécutez votre application mobile Flutter, une étiquette DEBUG s’affichera dans le coin supérieurdroit.
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 dedé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(const 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 widgetMaterial() 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

Quelle est la différence entre Scaffold et MaterialApp dans Flutter ?

MaterialApp Widget est le point de départ de votre application, il indique à Flutter que vous allez utiliser les composants Material et suivre la conception matérielle dans votre application.
MaterialApp est un widget qui introduit un certain nombre de widgets Navigator, Theme qui sont nécessaires pour créer une application de conception de matériaux.
Widget Scaffold est utilisé sous MaterialApp, il vous offre de nombreuses fonctionnalités de base, comme AppBar, BottomNavigationBar, Drawer, FloatingActionButton, etc.

Application

Dans le fichier main.dart, configurez MaterialApp en tant que widget racine de votre application.
Pour chaque attribut ci-dessous, réalisez les actions suivantes :

title : Définissez un titre pour votre application. Ce titre apparaîtra dans la barre de l’application.
theme : Créez un thème personnalisé (couleur primaire, couleur d’accentuation, style de texte).
home : Définissez un widget d’accueil qui affichera un texte centré indiquant « Bienvenue dans mon application ».

Flutter

Le widget MaterialApp de Flutter