Le widget Divider pour séparer les widgets Flutter

Le widget Divider est un widget qui permet de séparer deux widgets Container, deux widgets Card etc. En fait, le widget Divider crée un simple espace blanc qui sépare deux widgets Container. Cette représentation visuelle peut aider à mieux comprendre le contenu d’une page et la rend plus attrayante.

Parfois, vous allez vous retrouvez dans la situation où vous devez ajouter une ligne entre vos widgets ou à l’extrémité inférieure d’un widget dans le pied de page ou quelque part.

Donc, ces séparateurs peuvent être utilisés dans n’importe quel widget contenant plusieurs widgets enfants tels que des listes, Drawers, Column et Row pour séparer le contenu.

Notez qu’il n’y a pas d’argument obligatoire, ce qui veut dire que vous pouvez appeler le constructeur sans rien passer.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: Drawer(),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Container(
              color: Colors.purple,
            ),
          ),
          const Divider(
            color: Colors.black,
            height: 15,
            thickness: 2,
            indent: 10,
            endIndent: 10,
          ),
          Expanded(
            child: Container(
              color: Colors.cyan,
            ),
          ),
        ],
      ),
    );
  }
}

Exécution du code.

Les propriétés du widget Divider

Color color : la couleur de la ligne de séparation verticale. Par défaut, il est défini sur une couleur blanche.

height : cet attribut vous permet de définir la taille du widget Divider. L’attribut height détermine combien d’espace vous allez avoir entre les deux widgets.

double indent : cet attribut vous permet de définir le retrait/l’espace à donner sur le côté gauche du widget.

double endIndent : vous permet de définir le retrait/l’espace sur le coté droit. Il détermine l’espace avec une valeur de type double comme indiqué dans le code.

double thickness : l’épaisseur du diviseur.

Comment créer une ligne verticale ?

Nous utilisons le widget VerticalDivider pour créer une ligne verticale dans Flutter. Ce widget possède des propriétés utiles telles que width, thickness, color, indent, endIndent, etc. Vous pouvez l’utiliser comme indiqué dans l’extrait ci-dessous. avec les widgets Container et Row.

  body: Center(
        child: Row(
          children: <Widget>[
            Container(
              color: Colors.indigo,
              height: 100,
              width: 150,
            ),
            VerticalDivider(
              color: Colors.black,
              thickness: 2,
              width: 20,
              indent: 50,
              endIndent: 50,
            ),
            Container(
              color: Colors.cyanAccent,
              height: 100,
              width: 150,
            ),
          ],
        ),
      ),