2.4.5 – Présenter du contenu avec Card

Pour finir ce chapitre, découvrons Card, un widget qui permet de présenter du contenu de manière élégante. Les cartes sont très utilisées dans les applications modernes pour organiser l'information.

🎴 Pourquoi Card ?

Card est un widget qui affiche son contenu dans une carte avec :

• Un fond légèrement surélevé (effet d'ombre)
• Des coins arrondis
• Un espacement interne (padding) automatique
• Une apparence professionnelle et moderne

📝 Exemple minimal : Card + Padding + Text

Voici un exemple simple avec Card et Text :

Card(
  child: Text('Contenu de la carte'),
)

Pour améliorer l'apparence, nous pouvons ajouter du padding (espacement interne) avec le widget Padding :

Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('Contenu de la carte'),
  ),
)

Analysons ce code :

• Card crée la carte avec son style par défaut
• Padding ajoute de l'espace autour du texte
• padding: EdgeInsets.all(16) ajoute 16 pixels d'espace de tous les côtés
• Text affiche le contenu

🧪 Exemple complet

Voici un exemple complet dans une application :

import 'package:flutter/material.dart';

void main() {
  runApp(const MaPage());
}

class MaPage extends StatelessWidget {
  const MaPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Mon Application'),
        ),
        body: SafeArea(
          child: Center(
            child: Card(
              child: Padding(
                padding: EdgeInsets.all(16),
                child: Text('Bonjour Flutter !'),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Dans cet exemple, le texte "Bonjour Flutter !" est affiché dans une carte élégante avec un espacement interne.

📦 Card utilisée dans une Column ou Row

Les cartes sont souvent utilisées dans des Column ou Row pour créer des listes de cartes. Voici un exemple avec une Column :

import 'package:flutter/material.dart';

void main() {
  runApp(const MaPage());
}

class MaPage extends StatelessWidget {
  const MaPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Mon Application'),
        ),
        body: SafeArea(
          child: Center(
            child: Column(
              children: [
                Card(
                  child: Padding(
                    padding: EdgeInsets.all(16),
                    child: Text('Première carte'),
                  ),
                ),
                Card(
                  child: Padding(
                    padding: EdgeInsets.all(16),
                    child: Text('Deuxième carte'),
                  ),
                ),
                Card(
                  child: Padding(
                    padding: EdgeInsets.all(16),
                    child: Text('Troisième carte'),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Dans cet exemple, trois cartes sont affichées verticalement dans une Column. Chaque carte contient du texte avec du padding.

💡 Points clés à retenir

• Card présente le contenu de manière élégante avec des ombres et des coins arrondis
• Padding ajoute de l'espace à l'intérieur d'un widget
• Les cartes sont souvent utilisées dans des Column ou Row pour créer des listes
• EdgeInsets.all(16) ajoute 16 pixels d'espace de tous les côtés

2.4.6 – Gérer l'espacement avec Padding et SizedBox

Quand vous organisez plusieurs widgets dans une Column ou une Row, il est souvent nécessaire d'ajouter de l'espace. Flutter propose deux widgets pour cela : Padding et SizedBox. Chacun a son utilité et ses cas d'usage. Découvrons-les ensemble.

📦 Introduction à Padding

Padding est un widget qui ajoute de l'espace autour d'un widget existant. Il enveloppe un widget et ajoute de l'espacement à l'intérieur, entre le bord et le contenu.

Voici la structure de base de Padding :

Padding(
  padding: EdgeInsets.all(16),
  child: Text('Mon texte'),
)

Analysons ce code :

• Padding( : Le widget qui ajoute de l'espace
• padding: EdgeInsets.all(16) : Ajoute 16 pixels d'espace de tous les côtés (haut, bas, gauche, droite)
• child: Text('Mon texte') : Le widget autour duquel l'espace est ajouté

📏 Introduction à SizedBox

SizedBox est un widget qui crée un espace vide de taille définie. Contrairement à Padding, il ne contient pas de widget enfant : c'est un espace vide qui prend de la place.

Voici la structure de base de SizedBox :

SizedBox(height: 20)

Pour un espace vertical, utilisez height. Pour un espace horizontal, utilisez width.

⬆️ Exemples d'espacement vertical

Pour ajouter de l'espace vertical entre des éléments dans une Column, vous pouvez utiliser les deux méthodes :

Avec SizedBox

Column(
  children: [
    Text('Premier élément'),
    SizedBox(height: 20),  // Espace vide entre les deux textes
    Text('Deuxième élément'),
  ],
)

SizedBox(height: 20) crée un espace vertical de 20 pixels entre les deux textes.

Avec Padding

Column(
  children: [
    Padding(
      padding: EdgeInsets.only(bottom: 20),  // Espace en bas du premier texte
      child: Text('Premier élément'),
    ),
    Text('Deuxième élément'),
  ],
)

Padding avec EdgeInsets.only(bottom: 20) ajoute 20 pixels d'espace en bas du premier texte.

➡️ Exemples d'espacement horizontal

Pour ajouter de l'espace horizontal entre des éléments dans une Row, vous pouvez aussi utiliser les deux méthodes :

Avec SizedBox

Row(
  children: [
    Text('Premier'),
    SizedBox(width: 30),  // Espace vide entre les deux textes
    Text('Deuxième'),
  ],
)

SizedBox(width: 30) crée un espace horizontal de 30 pixels entre les deux textes.

Avec Padding

Row(
  children: [
    Padding(
      padding: EdgeInsets.only(right: 30),  // Espace à droite du premier texte
      child: Text('Premier'),
    ),
    Text('Deuxième'),
  ],
)

Padding avec EdgeInsets.only(right: 30) ajoute 30 pixels d'espace à droite du premier texte.

🧪 Exemple complet : espacement vertical avec SizedBox

Voici un exemple complet avec espacement vertical dans une Column utilisant SizedBox :

import 'package:flutter/material.dart';

void main() {
  runApp(const MaPage());
}

class MaPage extends StatelessWidget {
  const MaPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Mon Application'),
        ),
        body: SafeArea(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text(
                  'Premier élément',
                  style: TextStyle(fontSize: 20),
                ),
                const SizedBox(height: 30),
                const Text(
                  'Deuxième élément',
                  style: TextStyle(fontSize: 20),
                ),
                const SizedBox(height: 30),
                const Text(
                  'Troisième élément',
                  style: TextStyle(fontSize: 20),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Dans cet exemple, les trois textes sont séparés par des espaces de 30 pixels chacun, le tout centré à l'écran.

🧪 Exemple complet : espacement horizontal avec SizedBox

Voici un exemple avec espacement horizontal dans une Row utilisant SizedBox :

import 'package:flutter/material.dart';

void main() {
  runApp(const MaPage());
}

class MaPage extends StatelessWidget {
  const MaPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Mon Application'),
        ),
        body: SafeArea(
          child: Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text(
                  'Premier',
                  style: TextStyle(fontSize: 20),
                ),
                const SizedBox(width: 40),
                const Text(
                  'Deuxième',
                  style: TextStyle(fontSize: 20),
                ),
                const SizedBox(width: 40),
                const Text(
                  'Troisième',
                  style: TextStyle(fontSize: 20),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Dans cet exemple, les trois textes sont séparés horizontalement par des espaces de 40 pixels chacun.

🔄 Comparatif : SizedBox ou Padding ?

Maintenant que vous connaissez les deux widgets, vous vous demandez peut-être : lequel utiliser et quand ? Voici un comparatif clair pour vous aider à choisir.

Exemple visuel de la différence

Voici deux exemples qui montrent la différence :

// Avec SizedBox : espace ENTRE les éléments
Column(
  children: [
    Text('Premier'),
    SizedBox(height: 20),  // Espace vide entre les deux textes
    Text('Deuxième'),
  ],
)

// Avec Padding : espace AUTOUR d'un élément
Column(
  children: [
    Padding(
      padding: EdgeInsets.all(20),  // Espace autour du texte
      child: Text('Premier'),
    ),
    Text('Deuxième'),
  ],
)

Quand utiliser quoi ?

💡 Points clés à retenir

• Padding ajoute de l'espace autour d'un widget existant
• Padding utilise EdgeInsets.all(16) pour ajouter de l'espace de tous les côtés
• SizedBox crée un espace vide de taille définie
• SizedBox(height: 20) crée un espace vertical de 20 pixels
• SizedBox(width: 30) crée un espace horizontal de 30 pixels
• SizedBox est utilisé pour espacer des éléments entre eux dans une liste
• Padding est utilisé pour ajouter de l'espace autour d'un widget spécifique

// Padding : espace autour d'un widget
Padding(
  padding: EdgeInsets.all(16),
  child: Text('Mon texte'),
)

// SizedBox : espace entre les éléments
SizedBox(height: 20)  // Vertical
SizedBox(width: 30)   // Horizontal

2.4.7 – Séparer visuellement avec Divider

Quand vous organisez plusieurs éléments dans une Column ou une Row, il est parfois utile de les séparer visuellement avec une ligne. Le widget Divider est parfait pour cela. C'est un widget simple qui affiche une ligne horizontale pour séparer des éléments.

📏 Rôle du Divider

Divider est un widget qui affiche une ligne horizontale fine. Il est utilisé pour séparer visuellement des éléments dans une interface, créant une distinction claire entre différentes sections ou groupes d'informations.

🧪 Exemple simple : Divider entre deux widgets

Voici comment utiliser Divider dans une Column :

Column(
  children: [
    Text('Premier élément'),
    Divider(),
    Text('Deuxième élément'),
  ],
)

Dans cet exemple, Divider() crée une ligne horizontale entre les deux textes.

🧪 Exemple complet : Divider dans une Column

Voici un exemple complet dans une application :

import 'package:flutter/material.dart';

void main() {
  runApp(const MaPage());
}

class MaPage extends StatelessWidget {
  const MaPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Mon Application'),
        ),
        body: SafeArea(
          child: Column(
            children: [
              const Padding(
                padding: EdgeInsets.all(16),
                child: Text('Section 1', style: TextStyle(fontSize: 20)),
              ),
              const Divider(),
              const Padding(
                padding: EdgeInsets.all(16),
                child: Text('Section 2', style: TextStyle(fontSize: 20)),
              ),
              const Divider(),
              const Padding(
                padding: EdgeInsets.all(16),
                child: Text('Section 3', style: TextStyle(fontSize: 20)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Dans cet exemple, trois sections de texte sont séparées par des Divider, créant une interface claire et organisée.

🎨 Personnalisation (épaisseur, couleur, marges)

Vous pouvez personnaliser l'apparence du Divider avec plusieurs paramètres :

Divider(
  height: 20,
  thickness: 2,
  color: Colors.grey,
  indent: 20,
  endIndent: 20,
)

Analysons ces paramètres :

• height: 20 : La hauteur totale du Divider (espace vertical qu'il occupe, en pixels)
• thickness: 2 : L'épaisseur de la ligne (en pixels). Par défaut, c'est 1 pixel
• color: Colors.grey : La couleur de la ligne. Par défaut, c'est une couleur grise claire
• indent: 20 : L'espacement à gauche de la ligne (en pixels)
• endIndent: 20 : L'espacement à droite de la ligne (en pixels)

🧪 Exemple complet : Divider personnalisé

Voici un exemple avec un Divider personnalisé :

import 'package:flutter/material.dart';

void main() {
  runApp(const MaPage());
}

class MaPage extends StatelessWidget {
  const MaPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Mon Application'),
        ),
        body: SafeArea(
          child: Column(
            children: [
              const Padding(
                padding: EdgeInsets.all(16),
                child: Text('Première section', style: TextStyle(fontSize: 20)),
              ),
              const Divider(
                height: 30,
                thickness: 2,
                color: Colors.blue,
                indent: 40,
                endIndent: 40,
              ),
              const Padding(
                padding: EdgeInsets.all(16),
                child: Text('Deuxième section', style: TextStyle(fontSize: 20)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Dans cet exemple, le Divider est personnalisé avec une épaisseur de 2 pixels, une couleur bleue, et des espacements à gauche et à droite de 40 pixels.

💼 Cas d'utilisation courants

Divider est très utile dans plusieurs situations :

🧪 Exemple : Divider dans une Card

Voici un exemple d'utilisation de Divider dans une Card :

import 'package:flutter/material.dart';

void main() {
  runApp(const MaPage());
}

class MaPage extends StatelessWidget {
  const MaPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Mon Application'),
        ),
        body: SafeArea(
          child: Center(
            child: Card(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  const Padding(
                    padding: EdgeInsets.all(16),
                    child: Text(
                      'Titre de la carte',
                      style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                    ),
                  ),
                  const Divider(),
                  const Padding(
                    padding: EdgeInsets.all(16),
                    child: Text('Contenu de la carte'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Dans cet exemple, une Card contient un titre, un Divider, puis le contenu. Le Divider sépare visuellement le titre du contenu.

💡 Points clés à retenir

• Divider affiche une ligne horizontale pour séparer visuellement des éléments
• Divider() est très simple à utiliser sans paramètres
• height définit l'espace vertical total occupé par le Divider
• thickness définit l'épaisseur de la ligne (par défaut : 1 pixel)
• color définit la couleur de la ligne
• indent et endIndent créent des espacements à gauche et à droite
• Divider est souvent utilisé dans des listes, des Card, ou des menus

// Divider simple
Divider()

// Divider personnalisé
Divider(
  height: 20,
  thickness: 2,
  color: Colors.grey,
  indent: 20,
  endIndent: 20,
)