Utiliser GridView dans Flutter

 import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: GridView.count(
        primary: false,
        padding: const EdgeInsets.all(20),
        crossAxisSpacing: 20,
        mainAxisSpacing: 20,
        crossAxisCount: 4,
        children: [
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text('1'),
            color: Colors.teal[100],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text('2'),
            color: Colors.teal[200],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text('3'),
            color: Colors.teal[300],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text('4'),
            color: Colors.teal[400],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text('5'),
            color: Colors.teal[500],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text('6'),
            color: Colors.teal[600],
          ),
        ],
      )),
    );
  }
}

• Comme vous le voyez dans le code ci-contre, on voit rapidement ce qui se passe si le paramètre nommé, padding, est commenté dans l’exemple simple.
• Il y avait une « bordure » d’environ 20 pixels logiques entourant les petites cases vertes.
• Notez que les « pixels logiques » ont à peu près la même taille visuelle sur tous les appareils, tandis que les « pixels physiques » correspondent à la taille des pixels matériels réels sur l’appareil.

• Pour définir l’espacement entre les éléments le long de l’axe principal ou de l’axe transversal, définissez les valeurs doubles requises pour la propriété mainAxisSpacing et la propriété crossAxisSpacing respectivement.
• La valeur par défaut de mainAxisSpacing et crossAxisSpacing est zéro. Par conséquent, si nous ne définissons pas ces valeurs, il n’y aurait pas d’espace entre les éléments le long des axes horizontal et vertical.

Il prend dans un objet de classe de type, ScrollPhysics.
Actuellement, il existe quatre sous-classes de la classe, ScrollPhysics: