Back

Le widget MaterialApp de Flutter

Le widget MaterialApp de Flutter

  1. 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.
    • Le widget MaterialApp dans Flutter

    • 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 .



      Le widget MaterialApp dans Flutter

    • 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.
    • import 'package:flutter/material.dart';
      
      void main() {
        runApp(const MyApp());
      }
      class MyApp extends StatelessWidget {
        const MyApp({Key? key}) : super(key: key);
        @override
        Widget build(BuildContext context) {
          return const MaterialApp(
            home: Center(
              child: Text("Le widget MaterialApp dans Flutter"),
            ),
          );
        }
      }
    • 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.

  2. 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();
           }
      }
  3. 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.



Riadh HAJJI

Abonnez vous à notre chaîne YouTube gratuitement