Le widget MaterialApp de 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.
MaterialAppest 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
MaterialAppest 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. MaterialAppest 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 MaterialAppest 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. - 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.
-
MaterialApp
- Avant de créer
MaterialApp, nous devons importer le package de matériel fourni par Flutter SDK. - Ce package nous fournit tous les widgets que nous pouvons utiliser dans notre application. Par exemple :
AppBar,Scaffold,BottomNavigationBar,Card,Chip,BottomSheet, etc. MaterialAppdoit 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.
-
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.
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"),
),
);
}
}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.
import 'package:flutter/material.dart';
MaterialAppdoit 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();
}
}Widget Scaffold est utilisé sous MaterialApp, il vous offre de nombreuses fonctionnalités de base, comme AppBar, BottomNavigationBar, Drawer, FloatingActionButton, etc.
