Le widjet GridView pour créer des grilles dans Flutter

Le widget GridView de Flutter permet d’avoir des colonnes et des lignes, sous forme de grilles avec des éléments qui permettent de faire défiler et d’accéder aux fonctionnalités de l’application.

Comme son nom l’indique, le widget GridView permet d’afficher un objet sous forme de grille. Nous pouvons utiliser du texte, des images ou tout autre widget à l’intérieur de la grille. Puisqu’il s’agit d’un widget déroulant, nous devons spécifier le sens de défilement.

import 'package:flutter/material.dart';

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

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

class MaGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Le widget GridView"),
        ),
        body: GridView.count(
          crossAxisCount: 3,
          children: <Widget>[
            FlutterLogo(),
            FlutterLogo(),
            FlutterLogo(),
            FlutterLogo(),
            FlutterLogo(),
            FlutterLogo()
          ],
        ));
  }
}

La valeur trois (3) dans crossAxisCount est la valeur du nombre de colonnes dans la grille. En fait, les widgets enfants sont des widgets dérivés qui seront affichés avec un total de six logos Flutter sous la forme d’une grille. Le résultat du code ci-dessus sera comme ceci.

Le widget GridView est essentiellement un widget CustomScrollView déroulant, vous n’avez donc pas à vous soucier si le nombre de widgets de la grille dépasse la taille de l’écran. Dans GridView, nous pouvons également utiliser List.generate pour créer des widgets enfants en fonction du nombre de données.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              title: Text("Le widget GridView"),
            ),
            body: GridView.count(
                crossAxisCount: 3,
                children: List.generate(9, (index) {
                  return Container(
                    child: Card(
                      color: Colors.deepPurpleAccent,
                    ),
                  );
                }))));
  }
}

Il existe cinq façons d’utiliser GridView dans Flutter, à savoir :

GridView

GridView.count

GridView.builder

GridView.custom

GridView.extent

En fait, l’utilisation des cinq fonctions est très similaires. À titre d’exemple, nous afficherons une grille de 2 colonnes avec 4 widgets contenant le logo Flutter en utilisant tous les types de GridView disponibles.

GridView.count

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
        appBar: AppBar(
        title: Text("Le widget GridView"),
    ),
    body: GridView.count(
    crossAxisCount: 2,
    children: <Widget>[
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
    ],
    ),
        ));
  }
}

GridView.builder

Dans la méthode builder, le nombre d’éléments de la grille à afficher suit la valeur de la propriété itemCount.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  itemBuilder: (_, index) => FlutterLogo(),
  itemCount: 4,
)

GridView.custom

GridView.custom(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  childrenDelegate: SliverChildListDelegate(
    [
      FlutterLogo(),
      FlutterLogo(),
      FlutterLogo(),
      FlutterLogo(),
    ],
  ),
)

GridView.extent

GridView.extent(
  maxCrossAxisExtent: 200,
  children: <Widget>[
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
  ],
)

Le widjet GridView

Nous pouvons également créer un GridView sans aucune méthode, son utilisation est comme une combinaison de GridView.count avec le constructeur. Où spécifier le nombre de colonnes de la grille doit utiliser un widget fixe pour les éléments de grille utilisant la propriété children .

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  children: <Widget>[
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
  ],
)

À partir des cinq exemples de code ci-dessus, le résultat sera le même que l’image ci-dessous

Utilisez la méthode qui convient le mieux à votre style. Cependant, pour le processus d’apprentissage, il est recommandé d’utiliser GridView.count ou GridView.builder parce que ces deux méthodes sont les plus utilisées.

GridView.count est pour l’utilisation d’un petit nombre de grilles. Si le nombre de grilles est inférieur à 16, utiliser gridView.count est le bon choix. Cependant, si vous créez une grille avec défilement infini qui affichera de nombreux éléments, vous devez utiliser GridView.builder.

Sachez que comme dans les autres widgets, GridView possède des propriétés que vous pouvez utiliser.