Le widget Wrap pour s’adapter aux écrans

Le widget Wrap est similaire aux widgets Row et Column dans Flutter, mais avec en plus la possibilité de s’adapter aux tailles des écrans. Si vous voulez disposer plusieurs widgets horizontalement ou verticalement, vous allez utiliser Row ou Column. Cependant, s’il n’y a pas assez de place, le contenu sera coupé et vous aurez un avertissement de débordement avec une bande jaune et noir.

Par conséquent, l’utilisation du widget Wrap, résoudra ce problème. En fait, il essaiera de placer chaque widget enfant, à côté du widget enfant précédent dans l’axe principal.

S’il n’y a pas assez d’espace dans l’axe principal, il créera une nouvelle volée adjacente à ses widgets enfants existants dans l’axe transversal. Ce widget peut être utile si vous devez placer une liste d’éléments dans plusieurs lignes ou colonnes.

Avec le widget wrap, nous pouvons ajuster l’espace entre les widgets enfants adjacents et les lignes selon les besoins.

Voici un exemple de code avec le widget Row.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wrap'),
      ),
      body: Center(
        child: Row(
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.orange,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.cyan,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
          ],
        ),
      ),
    );
  }
}

Comme vous pouvez le constater, l’affichage a été coupé.

Modifions notre exemple avec le widget Wrap. Dans le code ci-dessus, remplacez Row par Wrap. Voici le résultat :

Donc, en utilisant le widget Wrap, les conteneurs qui ne correspondent pas à la taille de l’écran sont automatiquement renvoyés vers le bas.

Les propriétés du widget Wrap

alignment : détermine si les widgets enfants doivent s’afficher dans l’axe principal. Les valeurs sont WrapAlignment.center, WrapAlignment.end, WrapAlignment.spaceAround, WrapAlignment.spaceBetween, WrapAlignment.spaceEvenly.

direction : détermine la direction, horizontale pour la ligne et verticale pour la colonne.

spacing : déterminer l’espace entre chaque élément.

runSpacing : déterminer l’espace entre chaque ligne comme la hauteur de la ligne.

Conclusion

En fait, on utilise wrap quand il y a une grande pile de widgets, à la fois horizontalement et verticalement. De cette façon l’affichage ne sera pas affecté et peut être ajusté à la taille de l’écran. Dans le développement des sites Web, cela s’appelle le responsive.

Essayez d’utiliser les autres propriétés pour voire un peu les possibilités qu’elles vous offres.