Widgets Flutter

Container

Le widget Container est un widget polyvalent qui permet de créer une zone rectangulaire avec contrôle sur la taille, les espacements et la décoration visuelle.

Container(
  // Taille du container
  width: 200,
  height: 100,
  
  // Espacement externe (autour du container)
  margin: const EdgeInsets.all(16),
  
  // Espacement interne (dans le container)
  padding: const EdgeInsets.all(20),
  
  // Décoration (couleur, bordures, coins arrondis, ombre)
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
    border: Border.all(
      color: Colors.blue.shade700,
      width: 2,
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 8,
        offset: Offset(0, 4),
      ),
    ],
  ),
  
  // Alignement du contenu
  alignment: Alignment.center,
  
  // Widget enfant (contenu)
  child: const Text('Bonjour'),
)

Text

Le widget Text affiche une chaîne de caractères avec un style personnalisable. C'est le widget de base pour afficher du texte dans une application Flutter.

// Texte simple
Text('Bonjour Flutter')

// Texte avec style
Text(
  'Texte stylisé',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
    letterSpacing: 1.5,
  ),
)

// Texte avec alignement
Text(
  'Texte centré',
  textAlign: TextAlign.center,
  style: TextStyle(fontSize: 18),
)

// Texte avec overflow
Text(
  'Texte très long qui peut déborder...',
  overflow: TextOverflow.ellipsis,
  maxLines: 2,
  style: TextStyle(fontSize: 16),
)

// Texte avec style riche (TextSpan)
Text.rich(
  TextSpan(
    text: 'Hello ',
    style: TextStyle(color: Colors.black),
    children: [
      TextSpan(
        text: 'Flutter',
        style: TextStyle(
          color: Colors.blue,
          fontWeight: FontWeight.bold,
        ),
      ),
      TextSpan(
        text: ' World!',
        style: TextStyle(color: Colors.green),
      ),
    ],
  ),
)

Padding

Le widget Padding ajoute un espacement interne autour de son enfant. C'est une alternative simple à Container quand on a besoin uniquement de padding sans décoration.

Padding(
  // Espacement uniforme sur tous les côtés
  padding: const EdgeInsets.all(20),
  child: Container(
    color: Colors.blue,
    child: Text('Padding uniforme'),
  ),
)

// Padding avec valeurs différentes
Padding(
  padding: const EdgeInsets.only(
    top: 10,
    bottom: 20,
    left: 15,
    right: 15,
  ),
  child: Container(
    color: Colors.green,
    child: Text('Padding personnalisé'),
  ),
)

// Padding symétrique
Padding(
  padding: const EdgeInsets.symmetric(
    horizontal: 30,
    vertical: 10,
  ),
  child: Container(
    color: Colors.red,
    child: Text('Padding symétrique'),
  ),
)

Center

Le widget Center centre son enfant horizontalement et verticalement. C'est un widget simple et efficace pour centrer un widget dans l'espace disponible.

Center(
  // Widget enfant centré
  child: Container(
    width: 150,
    height: 100,
    color: Colors.blue,
    child: Center(
      child: Text(
        'Centré',
        style: TextStyle(
          color: Colors.white,
          fontSize: 18,
        ),
      ),
    ),
  ),
)

// Center avec largeur et hauteur
Center(
  widthFactor: 2.0,  // Multiplie la largeur par 2
  heightFactor: 2.0, // Multiplie la hauteur par 2
  child: Container(
    width: 100,
    height: 50,
    color: Colors.green,
  ),
)

Align

Le widget Align permet d'aligner un enfant dans un espace disponible selon un point d'alignement spécifique. C'est une version plus flexible de Center qui permet différents types d'alignement.

// Alignement au centre (équivalent à Center)
Align(
  alignment: Alignment.center,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

// Alignement en haut à gauche
Align(
  alignment: Alignment.topLeft,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
)

// Alignement en bas à droite
Align(
  alignment: Alignment.bottomRight,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.green,
  ),
)

// Alignement personnalisé avec coordonnées
Align(
  alignment: Alignment(0.5, -0.5), // x: 0.5, y: -0.5
  child: Container(
    width: 100,
    height: 100,
    color: Colors.orange,
  ),
)

// Avec widthFactor et heightFactor
Align(
  alignment: Alignment.center,
  widthFactor: 2.0,
  heightFactor: 2.0,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.purple,
  ),
)

Column

Le widget Column organise ses enfants verticalement, de haut en bas. Il est essentiel pour créer des layouts en colonne avec contrôle sur l'alignement et l'espacement.

Column(
  // Alignement horizontal des enfants
  crossAxisAlignment: CrossAxisAlignment.center,

  // Alignement vertical (début, centre, fin)
  mainAxisAlignment: MainAxisAlignment.start,

  // Espacement entre les enfants
  mainAxisSize: MainAxisSize.max,

  // Widgets enfants (disposés verticalement)
  children: [
    Container(
      height: 50,
      color: Colors.red,
      margin: EdgeInsets.all(2),
    ),
    Container(
      height: 50,
      color: Colors.green,
      margin: EdgeInsets.all(2),
    ),
    Container(
      height: 50,
      color: Colors.blue,
      margin: EdgeInsets.all(2),
    ),
  ],
)

Row

Le widget Row organise ses enfants horizontalement, de gauche à droite. Il permet de créer des layouts en ligne avec contrôle sur l'alignement et la distribution des éléments.

Row(
  // Alignement vertical des enfants
  crossAxisAlignment: CrossAxisAlignment.center,

  // Alignement horizontal (début, centre, fin)
  mainAxisAlignment: MainAxisAlignment.start,

  // Espacement entre les enfants
  mainAxisSize: MainAxisSize.max,

  // Widgets enfants (disposés horizontalement)
  children: [
    Container(
      width: 50,
      height: 100,
      color: Colors.red,
      margin: EdgeInsets.all(2),
    ),
    Container(
      width: 50,
      height: 100,
      color: Colors.green,
      margin: EdgeInsets.all(2),
    ),
    Container(
      width: 50,
      height: 100,
      color: Colors.blue,
      margin: EdgeInsets.all(2),
    ),
  ],
)

Expanded

Le widget Expanded permet à un enfant de prendre tout l'espace disponible dans un Row ou Column. Il est utile pour créer des layouts flexibles où certains éléments doivent occuper l'espace restant.

Row(
  children: [
    // Widget fixe (taille définie)
    Container(
      width: 50,
      height: 100,
      color: Colors.red,
      margin: EdgeInsets.all(2),
    ),
    
    // Widget qui prend tout l'espace disponible
    Expanded(
      // Facteur de flexibilité (optionnel)
      flex: 2,
      child: Container(
        height: 100,
        color: Colors.green,
        margin: EdgeInsets.all(2),
        child: Center(
          child: Text('Expanded'),
        ),
      ),
    ),
    
    // Autre widget fixe
    Container(
      width: 50,
      height: 100,
      color: Colors.blue,
      margin: EdgeInsets.all(2),
    ),
  ],
)

Spacer

Le widget Spacer crée un espace flexible dans un Row ou Column. C'est une alternative simple à Expanded pour ajouter de l'espace entre des widgets.

Row(
  children: [
    Container(
      width: 50,
      height: 100,
      color: Colors.red,
      margin: EdgeInsets.all(2),
    ),
    
    // Espace flexible (prend tout l'espace disponible)
    Spacer(
      // Facteur de flexibilité (optionnel)
      flex: 2,
    ),
    
    Container(
      width: 50,
      height: 100,
      color: Colors.green,
      margin: EdgeInsets.all(2),
    ),
    
    // Autre espace flexible
    Spacer(),
    
    Container(
      width: 50,
      height: 100,
      color: Colors.blue,
      margin: EdgeInsets.all(2),
    ),
  ],
)

SizedBox

Le widget SizedBox permet de définir une taille fixe pour un widget enfant ou de créer un espace vide. C'est une alternative légère à Container quand on a besoin uniquement de contrôler la taille.

Column(
  children: [
    Container(
      width: 120,
      height: 60,
      color: Colors.blue,
    ),
    SizedBox(height: 20),
    Container(
      width: 120,
      height: 60,
      color: Colors.green,
    ),
    SizedBox(height: 30),
    Container(
      width: 120,
      height: 60,
      color: Colors.red,
    ),
  ],
)

Stack

Le widget Stack permet de superposer plusieurs widgets les uns sur les autres. Il est utile pour créer des overlays, des badges, ou des éléments positionnés de manière absolue.

Stack(
  // Alignement des enfants non positionnés
  alignment: Alignment.center,
  
  // Ajuster la taille selon les enfants
  // fit: StackFit.expand,
  
  // Clipping des enfants qui débordent
  //clipBehavior: Clip.hardEdge,
  
  children: [
    // Widget de base (fond)
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    
    // Widget superposé (peut utiliser Positioned)
    Container(
      width: 100,
      height: 100,
      color: Colors.red.withOpacity(0.7),
    ),
    
    // Texte superposé
    Text(
      'Stack',
      style: TextStyle(
        color: Colors.white,
        fontSize: 24,
        fontWeight: FontWeight.bold,
      ),
    ),
  ],
)

Positioned

Le widget Positioned permet de positionner un enfant dans un Stack avec des coordonnées précises. Il est utilisé pour placer des widgets à des positions spécifiques (top, bottom, left, right) ou avec des dimensions fixes.

Stack(
  children: [
    // Widget de base
    Container(
      width: 300,
      height: 300,
      color: Colors.blue,
    ),
    
    // Positionné en haut à gauche
    Positioned(
      top: 10,
      left: 10,
      child: Container(
        width: 80,
        height: 80,
        color: Colors.red,
      ),
    ),
    
    // Positionné en bas à droite
    Positioned(
      bottom: 10,
      right: 10,
      child: Container(
        width: 80,
        height: 80,
        color: Colors.green,
      ),
    ),
    
    // Positionné au centre avec dimensions
    Positioned(
      top: 110,
      left: 110,
      width: 80,
      height: 80,
      child: Container(
        color: Colors.orange,
      ),
    ),
  ],
)

ListView

Le widget ListView affiche une liste défilable de widgets disposés linéairement. Il est essentiel pour créer des listes d'éléments avec défilement vertical ou horizontal.

// ListView avec liste d'éléments
ListView(
  // Direction du défilement
  scrollDirection: Axis.vertical,
  
  // Espacement entre les éléments
  padding: EdgeInsets.all(16),
  
  // Espacement entre les enfants
  itemExtent: 80, // Hauteur fixe pour chaque élément
  
  children: [
    Container(
      color: Colors.blue,
      child: ListTile(
        title: Text('Élément 1'),
        leading: Icon(Icons.star),
      ),
    ),
    Container(
      color: Colors.green,
      child: ListTile(
        title: Text('Élément 2'),
        leading: Icon(Icons.favorite),
      ),
    ),
    Container(
      color: Colors.orange,
      child: ListTile(
        title: Text('Élément 3'),
        leading: Icon(Icons.bookmark),
      ),
    ),
  ],
)

// ListView.builder pour des listes dynamiques
ListView.builder(
  itemCount: 50,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Élément ${index + 1}'),
      subtitle: Text('Sous-titre ${index + 1}'),
      leading: Icon(Icons.circle),
    );
  },
)

// ListView.separated avec séparateurs
ListView.separated(
  itemCount: 50,
  separatorBuilder: (context, index) => Divider(),
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Élément ${index + 1}'),
    );
  },
)

Icon

Le widget Icon affiche une icône graphique à partir de la bibliothèque Material Design Icons ou d'icônes personnalisées. C'est un widget essentiel pour ajouter des éléments visuels symboliques dans une interface Flutter.

// Icône simple avec Material Icons
Icon(Icons.star)

// Icône avec taille personnalisée
Icon(
  Icons.favorite,
  size: 48,
)

// Icône avec couleur
Icon(
  Icons.home,
  color: Colors.blue,
  size: 32,
)

// Icône avec différentes opacités
Icon(
  Icons.settings,
  color: Colors.grey.shade600,
  size: 24,
)

// Icône avec style personnalisé
Icon(
  Icons.notifications,
  color: Colors.red,
  size: 40,
  semanticLabel: 'Notifications',
)

// Icône avec différentes tailles
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Icon(Icons.star, size: 16),
    Icon(Icons.star, size: 24),
    Icon(Icons.star, size: 32),
    Icon(Icons.star, size: 48),
    Icon(Icons.star, size: 64),
  ],
)

// Icônes avec différentes couleurs
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Icon(Icons.favorite, color: Colors.red),
    Icon(Icons.star, color: Colors.amber),
    Icon(Icons.bookmark, color: Colors.blue),
    Icon(Icons.share, color: Colors.green),
  ],
)

// Icône personnalisée avec IconData
Icon(
  IconData(0xe87c, fontFamily: 'MaterialIcons'),
  size: 32,
  color: Colors.purple,
)

Image

Le widget Image affiche une image depuis différentes sources : assets locaux, réseau (URL), mémoire, ou fichiers. C'est un widget essentiel pour afficher des images dans une application Flutter.

// Image depuis les assets locaux
Image.asset(
  'assets/images/steve jobs.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

// Image depuis le réseau (URL)
Image.network(
  'http://mazoul.online/images/courses/flutter/chapitre_3/owl.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

// Image avec placeholder pendant le chargement
Image.network(
  'http://mazoul.online/images/courses/flutter/chapitre_3/owl.jpg',
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return Center(
      child: CircularProgressIndicator(
        value: loadingProgress.expectedTotalBytes != null
            ? loadingProgress.cumulativeBytesLoaded /
              loadingProgress.expectedTotalBytes!
            : null,
      ),
    );
  },
)

// Image avec gestion d'erreur
Image.network(
  'http://mazoul.online/images/courses/flutter/chapitre_3/owl.jpg',
  errorBuilder: (context, error, stackTrace) {
    return Icon(Icons.error, size: 50, color: Colors.red);
  },
)

// Image avec différentes options de fit
Column(
  children: [
    Image.asset(
      'assets/images/steve jobs.jpg',
      width: 200,
      height: 100,
      fit: BoxFit.cover, // Couvre toute la zone
    ),
    SizedBox(height: 10),
    Image.asset(
      'assets/images/steve jobs.jpg',
      width: 200,
      height: 100,
      fit: BoxFit.contain, // S'adapte dans la zone
    ),
    SizedBox(height: 10),
    Image.asset(
      'assets/images/steve jobs.jpg',
      width: 200,
      height: 100,
      fit: BoxFit.fill, // Remplit la zone (peut déformer)
    ),
  ],
)

// Image avec cache
Image.network(
  'http://mazoul.online/images/courses/flutter/chapitre_3/owl.jpg',
  cacheWidth: 200, // Optimisation du cache
  cacheHeight: 200,
)

// Image avec frameBuilder pour animation
Image.asset(
  'assets/images/steve jobs.jpg',
  frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
    if (wasSynchronouslyLoaded) return child;
    return AnimatedOpacity(
      opacity: frame == null ? 0 : 1,
      duration: Duration(milliseconds: 300),
      child: child,
    );
  },
)

CircleAvatar

Le widget CircleAvatar affiche un avatar circulaire avec une image, une icône, ou des initiales. C'est un widget Material Design très utilisé pour représenter des utilisateurs ou des profils dans les interfaces.

// CircleAvatar simple avec initiales
CircleAvatar(
  child: Text('JD'),
)

// CircleAvatar avec couleur de fond
CircleAvatar(
  backgroundColor: Colors.blue,
  child: Text('AB', style: TextStyle(color: Colors.white)),
)

// CircleAvatar avec image depuis assets
CircleAvatar(
  backgroundImage: AssetImage('assets/images/steve jobs.jpg'),
  radius: 50,
)

// CircleAvatar avec image depuis réseau
CircleAvatar(
  backgroundImage: NetworkImage('http://mazoul.online/images/courses/flutter/chapitre_3/owl.jpg'),
  radius: 40,
)

// CircleAvatar avec icône
CircleAvatar(
  backgroundColor: Colors.green,
  child: Icon(Icons.person, color: Colors.white),
  radius: 30,
)

// CircleAvatar avec taille personnalisée
CircleAvatar(
  radius: 60, // Taille du rayon
  backgroundColor: Colors.purple,
  child: Text(
    'FL',
    style: TextStyle(
      fontSize: 32,
      fontWeight: FontWeight.bold,
      color: Colors.white,
    ),
  ),
)

// CircleAvatar avec minRadius et maxRadius
CircleAvatar(
  minRadius: 20,
  maxRadius: 50,
  backgroundColor: Colors.orange,
  child: Icon(Icons.star, color: Colors.white),
)

// CircleAvatar avec foregroundColor
CircleAvatar(
  backgroundColor: Colors.blue.shade100,
  foregroundColor: Colors.blue.shade900,
  child: Icon(Icons.settings, size: 30),
  radius: 35,
)

// CircleAvatar avec onBackgroundImageError
CircleAvatar(
  backgroundImage: NetworkImage('http://mazoul.online/images/courses/flutter/chapitre_3/owl.jpg'),
  radius: 50,
  onBackgroundImageError: (exception, stackTrace) {
    print('Erreur de chargement de l\'image');
  },
  child: Icon(Icons.error), // Affiché si l'image ne charge pas
)

// CircleAvatar dans une Row
Row(
  children: [
    CircleAvatar(
      backgroundImage: AssetImage('assets/images/steve jobs.jpg'),
      radius: 25,
    ),
    SizedBox(width: 10),
    CircleAvatar(
      backgroundColor: Colors.red,
      child: Text('A'),
      radius: 25,
    ),
    SizedBox(width: 10),
    CircleAvatar(
      backgroundColor: Colors.green,
      child: Icon(Icons.check, color: Colors.white),
      radius: 25,
    ),
  ],
)

ListTile

Le widget ListTile est un widget Material Design qui affiche une ligne de contenu avec un titre, un sous-titre optionnel, et des widgets de début (leading) et de fin (trailing). C'est un widget très utilisé dans les listes et les menus.

// ListTile simple
ListTile(
  title: Text('Titre'),
  subtitle: Text('Sous-titre'),
)

// ListTile avec icône leading
ListTile(
  leading: Icon(Icons.person),
  title: Text('Profil'),
  subtitle: Text('Gérer votre profil'),
)

// ListTile avec trailing
ListTile(
  leading: Icon(Icons.settings),
  title: Text('Paramètres'),
  trailing: Icon(Icons.arrow_forward_ios),
)

// ListTile cliquable
ListTile(
  leading: Icon(Icons.home),
  title: Text('Accueil'),
  subtitle: Text('Retourner à l\'accueil'),
  trailing: Icon(Icons.chevron_right),
  onTap: () {
    print('ListTile cliquée');
  },
)

// ListTile avec isThreeLine
ListTile(
  leading: CircleAvatar(
    backgroundImage: AssetImage('assets/images/steve jobs.jpg'),
  ),
  title: Text('Titre principal'),
  subtitle: Text('Première ligne de sous-titre\nDeuxième ligne de sous-titre'),
  isThreeLine: true, // Active l'affichage sur 3 lignes
  trailing: Icon(Icons.more_vert),
)

// ListTile avec dense (plus compact)
ListTile(
  dense: true,
  leading: Icon(Icons.email),
  title: Text('Email compact'),
  subtitle: Text('ListTile avec moins d\'espacement'),
)

// ListTile avec selected
ListTile(
  selected: true,
  selectedTileColor: Colors.blue.shade50,
  leading: Icon(Icons.star, color: Colors.blue),
  title: Text('Élément sélectionné'),
  subtitle: Text('Cet élément est actuellement sélectionné'),
)

// ListTile avec enabled
ListTile(
  enabled: false, // Désactive l'interaction
  leading: Icon(Icons.lock),
  title: Text('Élément désactivé'),
  subtitle: Text('Cet élément n\'est pas disponible'),
)

// ListTile avec contenu personnalisé
ListTile(
  leading: Container(
    width: 50,
    height: 50,
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(8),
    ),
    child: Icon(Icons.image, color: Colors.white),
  ),
  title: Text('Contenu personnalisé'),
  subtitle: Text('Avec un leading personnalisé'),
  trailing: PopupMenuButton(
    itemBuilder: (context) => [
      PopupMenuItem(child: Text('Option 1')),
      PopupMenuItem(child: Text('Option 2')),
    ],
  ),
)

Card

Le widget Card est un widget Material Design qui affiche un contenu dans une carte avec des coins arrondis et une ombre. C'est un widget très utilisé pour créer des interfaces modernes et organisées avec des éléments visuellement distincts.

// Card simple
Card(
  child: ListTile(
    leading: Icon(Icons.person),
    title: Text('Titre de la carte'),
    subtitle: Text('Sous-titre de la carte'),
    trailing: Icon(Icons.arrow_forward),
  ),
)

// Card avec contenu personnalisé
Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Titre',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
        SizedBox(height: 8),
        Text('Contenu de la carte avec du texte personnalisé.'),
      ],
    ),
  ),
)

// Card avec elevation (ombre)
Card(
  elevation: 8, // Ombre plus prononcée
  child: Container(
    padding: EdgeInsets.all(16),
    child: Text('Card avec elevation élevée'),
  ),
)

// Card avec couleur
Card(
  color: Colors.blue.shade50, // Couleur de fond
  child: ListTile(
    leading: Icon(Icons.info, color: Colors.blue),
    title: Text('Card colorée'),
    subtitle: Text('Avec une couleur de fond personnalisée'),
  ),
)

// Card avec shape personnalisé
Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20),
    side: BorderSide(
      color: Colors.blue,
      width: 2,
    ),
  ),
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('Card avec coins très arrondis et bordure'),
  ),
)

// Card avec margin
Card(
  margin: EdgeInsets.all(16),
  child: ListTile(
    title: Text('Card avec margin'),
    subtitle: Text('Espacement autour de la carte'),
  ),
)

// Card avec image
Card(
  clipBehavior: Clip.antiAlias, // Pour que l'image respecte les coins arrondis
  child: Column(
    children: [
      Image.network(
        'http://mazoul.online/images/courses/flutter/chapitre_3/owl.jpg',
        height: 200,
        width: double.infinity,
        fit: BoxFit.cover,
      ),
      ListTile(
        title: Text('Card avec image'),
        subtitle: Text('Image en haut de la carte'),
      ),
    ],
  ),
)

// Card cliquable (InkWell)
Card(
  child: InkWell(
    onTap: () {
      print('Card cliquée');
    },
    child: Padding(
      padding: EdgeInsets.all(16),
      child: Row(
        children: [
          Icon(Icons.touch_app),
          SizedBox(width: 16),
          Text('Card cliquable'),
        ],
      ),
    ),
  ),
)

ElevatedButton

Le widget ElevatedButton est un bouton Material Design avec une élévation (ombre) qui le fait ressortir de la surface. C'est le bouton principal utilisé pour les actions importantes dans une application Flutter.

// ElevatedButton simple
ElevatedButton(
  onPressed: () {
    print('Bouton cliqué');
  },
  child: Text('Cliquez-moi'),
)

// ElevatedButton avec style personnalisé
ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.blue,
    foregroundColor: Colors.white,
    padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ),
  ),
  child: Text('Bouton stylisé'),
)

// ElevatedButton avec icône
ElevatedButton.icon(
  onPressed: () {},
  icon: Icon(Icons.save),
  label: Text('Enregistrer'),
)

// ElevatedButton désactivé
ElevatedButton(
  onPressed: null, // null désactive le bouton
  child: Text('Bouton désactivé'),
)

// ElevatedButton avec elevation
ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    elevation: 8, // Ombre plus prononcée
    backgroundColor: Colors.green,
  ),
  child: Text('Bouton avec elevation'),
)

// ElevatedButton avec minimumSize
ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    minimumSize: Size(200, 50), // Taille minimale
  ),
  child: Text('Bouton large'),
)

// ElevatedButton avec fixedSize
ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    fixedSize: Size(150, 40), // Taille fixe
  ),
  child: Text('Taille fixe'),
)

// ElevatedButton avec plusieurs dans une Row
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    ElevatedButton(
      onPressed: () {},
      child: Text('Annuler'),
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.grey,
      ),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Confirmer'),
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.blue,
      ),
    ),
  ],
)

TextButton

Le widget TextButton est un bouton plat sans élévation qui affiche uniquement du texte. C'est un bouton secondaire utilisé pour les actions moins importantes ou les liens dans une interface Flutter.

// TextButton simple
TextButton(
  onPressed: () {
    print('TextButton cliqué');
  },
  child: Text('Cliquez-moi'),
)

// TextButton avec style personnalisé
TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(
    foregroundColor: Colors.blue,
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
  ),
  child: Text('Bouton stylisé'),
)

// TextButton avec icône
TextButton.icon(
  onPressed: () {},
  icon: Icon(Icons.delete),
  label: Text('Supprimer'),
  style: TextButton.styleFrom(
    foregroundColor: Colors.red,
  ),
)

// TextButton désactivé
TextButton(
  onPressed: null, // null désactive le bouton
  child: Text('Bouton désactivé'),
)

// TextButton avec backgroundColor
TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(
    backgroundColor: Colors.blue.shade50,
    foregroundColor: Colors.blue.shade900,
    padding: EdgeInsets.all(16),
  ),
  child: Text('Bouton avec fond'),
)

// TextButton avec shape personnalisé
TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
      side: BorderSide(color: Colors.blue),
    ),
  ),
  child: Text('Bouton avec bordure'),
)

// TextButton avec minimumSize
TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(
    minimumSize: Size(150, 40),
  ),
  child: Text('Bouton large'),
)

// TextButton dans une Row
Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('Pas encore de compte ? '),
    TextButton(
      onPressed: () {},
      child: Text('S\'inscrire'),
    ),
  ],
)

IconButton

Le widget IconButton est un bouton qui affiche uniquement une icône. C'est un widget compact utilisé pour les actions rapides, les menus, ou les contrôles dans une interface Flutter.

// IconButton simple
IconButton(
  onPressed: () {
    print('IconButton cliqué');
  },
  icon: Icon(Icons.favorite),
)

// IconButton avec couleur
IconButton(
  onPressed: () {},
  icon: Icon(Icons.star),
  color: Colors.amber,
  iconSize: 30,
)

// IconButton désactivé
IconButton(
  onPressed: null, // null désactive le bouton
  icon: Icon(Icons.lock),
)

// IconButton avec tooltip
IconButton(
  onPressed: () {},
  icon: Icon(Icons.info),
  tooltip: 'Informations',
  color: Colors.blue,
)

// IconButton avec splashColor
IconButton(
  onPressed: () {},
  icon: Icon(Icons.delete),
  color: Colors.red,
  splashColor: Colors.red.shade200,
  highlightColor: Colors.red.shade100,
)

// IconButton avec padding personnalisé
IconButton(
  onPressed: () {},
  icon: Icon(Icons.settings),
  padding: EdgeInsets.all(20),
  iconSize: 35,
)

// IconButton avec constraints
IconButton(
  onPressed: () {},
  icon: Icon(Icons.add),
  constraints: BoxConstraints(
    minWidth: 50,
    minHeight: 50,
  ),
  iconSize: 30,
)

// IconButton dans une AppBar
AppBar(
  title: Text('Titre'),
  actions: [
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.search),
      tooltip: 'Rechercher',
    ),
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.more_vert),
      tooltip: 'Plus d\'options',
    ),
  ],
)

// Plusieurs IconButton dans une Row
Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.thumb_up),
      color: Colors.green,
    ),
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.thumb_down),
      color: Colors.red,
    ),
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.share),
      color: Colors.blue,
    ),
  ],
)

TextField

Le widget TextField permet à l'utilisateur de saisir du texte dans l'application. C'est un widget essentiel pour les formulaires, les recherches, et toute interaction nécessitant une saisie de texte.

// TextField simple
TextField(
  decoration: InputDecoration(
    labelText: 'Nom',
    hintText: 'Entrez votre nom',
  ),
)

// TextField avec controller
final TextEditingController controller = TextEditingController();

TextField(
  controller: controller,
  decoration: InputDecoration(
    labelText: 'Email',
    prefixIcon: Icon(Icons.email),
  ),
)

// TextField avec validation
TextField(
  decoration: InputDecoration(
    labelText: 'Mot de passe',
    hintText: 'Entrez votre mot de passe',
    prefixIcon: Icon(Icons.lock),
    suffixIcon: Icon(Icons.visibility),
    border: OutlineInputBorder(),
  ),
  obscureText: true, // Masque le texte (pour mot de passe)
)

// TextField avec maxLines
TextField(
  maxLines: 3,
  decoration: InputDecoration(
    labelText: 'Message',
    hintText: 'Entrez votre message',
    border: OutlineInputBorder(),
  ),
)

// TextField avec maxLength
TextField(
  maxLength: 10,
  decoration: InputDecoration(
    labelText: 'Téléphone',
    hintText: '10 chiffres',
    counterText: '',
    prefixIcon: Icon(Icons.phone),
  ),
  keyboardType: TextInputType.phone,
)

// TextField avec onChanged
TextField(
  decoration: InputDecoration(
    labelText: 'Recherche',
    prefixIcon: Icon(Icons.search),
    border: OutlineInputBorder(),
  ),
  onChanged: (value) {
    print('Texte saisi: $value');
  },
)

// TextField avec enabled
TextField(
  enabled: false,
  decoration: InputDecoration(
    labelText: 'Champ désactivé',
    hintText: 'Ce champ est désactivé',
  ),
)

// TextField avec style personnalisé
TextField(
  decoration: InputDecoration(
    labelText: 'Style personnalisé',
    filled: true,
    fillColor: Colors.blue.shade50,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10),
    ),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10),
      borderSide: BorderSide(color: Colors.blue, width: 2),
    ),
  ),
)

Switch

Le widget Switch est un interrupteur à bascule qui permet à l'utilisateur de basculer entre deux états (activé/désactivé). C'est un widget Material Design utilisé pour les paramètres binaires.

// Switch simple avec StatefulWidget
bool isSwitched = false;

Switch(
  value: isSwitched,
  onChanged: (value) {
    setState(() {
      isSwitched = value;
    });
  },
)

// Switch avec label
Row(
  children: [
    Text('Activer les notifications'),
    Spacer(),
    Switch(
      value: isSwitched,
      onChanged: (value) {
        setState(() {
          isSwitched = value;
        });
      },
    ),
  ],
)

// Switch avec couleur personnalisée
Switch(
  value: isSwitched,
  onChanged: (value) {
    setState(() {
      isSwitched = value;
    });
  },
  activeColor: Colors.green,
  inactiveThumbColor: Colors.grey,
  inactiveTrackColor: Colors.grey.shade300,
)

// Switch désactivé
Switch(
  value: true,
  onChanged: null, // null désactive le switch
)

// Switch avec ListTile
ListTile(
  title: Text('Mode sombre'),
  subtitle: Text('Activer le thème sombre'),
  trailing: Switch(
    value: isDarkMode,
    onChanged: (value) {
      setState(() {
        isDarkMode = value;
      });
    },
  ),
)

// Switch avec activeTrackColor et inactiveTrackColor
Switch(
  value: isSwitched,
  onChanged: (value) {
    setState(() {
      isSwitched = value;
    });
  },
  activeTrackColor: Colors.blue.shade200,
  inactiveTrackColor: Colors.grey.shade300,
  activeColor: Colors.blue,
)

Checkbox

Le widget Checkbox permet à l'utilisateur de sélectionner une ou plusieurs options parmi une liste. C'est un widget essentiel pour les formulaires avec des choix multiples.

// Checkbox simple avec StatefulWidget
bool isChecked = false;

Checkbox(
  value: isChecked,
  onChanged: (value) {
    setState(() {
      isChecked = value ?? false;
    });
  },
)

// Checkbox avec label
Row(
  children: [
    Checkbox(
      value: isChecked,
      onChanged: (value) {
        setState(() {
          isChecked = value ?? false;
        });
      },
    ),
    Text('J\'accepte les conditions'),
  ],
)

// Checkbox avec couleur personnalisée
Checkbox(
  value: isChecked,
  onChanged: (value) {
    setState(() {
      isChecked = value ?? false;
    });
  },
  activeColor: Colors.green,
  checkColor: Colors.white,
)

// Checkbox désactivé
Checkbox(
  value: true,
  onChanged: null, // null désactive le checkbox
)

// Checkbox avec ListTile
ListTile(
  leading: Checkbox(
    value: isChecked,
    onChanged: (value) {
      setState(() {
        isChecked = value ?? false;
      });
    },
  ),
  title: Text('Option 1'),
  subtitle: Text('Description de l\'option'),
)

// Plusieurs checkboxes
Column(
  children: [
    CheckboxListTile(
      title: Text('Option A'),
      value: optionA,
      onChanged: (value) {
        setState(() {
          optionA = value ?? false;
        });
      },
    ),
    CheckboxListTile(
      title: Text('Option B'),
      value: optionB,
      onChanged: (value) {
        setState(() {
          optionB = value ?? false;
        });
      },
    ),
    CheckboxListTile(
      title: Text('Option C'),
      value: optionC,
      onChanged: (value) {
        setState(() {
          optionC = value ?? false;
        });
      },
    ),
  ],
)

// Checkbox avec tristate (trois états)
bool? isTristate = null; // null, true, ou false

Checkbox(
  value: isTristate,
  tristate: true,
  onChanged: (value) {
    setState(() {
      isTristate = value;
    });
  },
)

Radio

Le widget Radio permet à l'utilisateur de sélectionner une seule option parmi plusieurs choix. C'est un widget essentiel pour les formulaires avec des choix exclusifs (un seul choix possible).

// Radio simple avec StatefulWidget
String selectedValue = 'option1';

Radio(
  value: 'option1',
  groupValue: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value.toString();
    });
  },
)

// Radio avec label
Row(
  children: [
    Radio(
      value: 'option1',
      groupValue: selectedValue,
      onChanged: (value) {
        setState(() {
          selectedValue = value.toString();
        });
      },
    ),
    Text('Option 1'),
  ],
)

// Plusieurs Radio dans un groupe
Column(
  children: [
    RadioListTile(
      title: Text('Option A'),
      value: 'A',
      groupValue: selectedValue,
      onChanged: (value) {
        setState(() {
          selectedValue = value.toString();
        });
      },
    ),
    RadioListTile(
      title: Text('Option B'),
      value: 'B',
      groupValue: selectedValue,
      onChanged: (value) {
        setState(() {
          selectedValue = value.toString();
        });
      },
    ),
    RadioListTile(
      title: Text('Option C'),
      value: 'C',
      groupValue: selectedValue,
      onChanged: (value) {
        setState(() {
          selectedValue = value.toString();
        });
      },
    ),
  ],
)

// Radio avec couleur personnalisée
Radio(
  value: 'option1',
  groupValue: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value.toString();
    });
  },
  activeColor: Colors.green,
  fillColor: MaterialStateProperty.all(Colors.green),
)

// Radio désactivé
Radio(
  value: 'option1',
  groupValue: selectedValue,
  onChanged: null, // null désactive le radio
)

// Radio avec subtitle
RadioListTile(
  title: Text('Mode standard'),
  subtitle: Text('Recommandé pour la plupart des utilisateurs'),
  value: 'standard',
  groupValue: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value.toString();
    });
  },
)

// Radio avec secondary widget
RadioListTile(
  title: Text('Option premium'),
  subtitle: Text('Fonctionnalités avancées'),
  secondary: Icon(Icons.star, color: Colors.amber),
  value: 'premium',
  groupValue: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value.toString();
    });
  },
)