Usare le GridView in Flutter

Il GridView è un componente di Flutter che ci permette di creare un layout a griglia in maniera molto semplice.

In questo articolo vediamo come usarlo; non prenderemo i dati da una sorgente remote, ma avremo una lista creata a mano nel codice.

Cominciamo con il model del nostro oggetto (book.dart).

Io l'ho creato dentro ad una cartella models:

class Book {
  final int? id;
  final String? title;
  final int? authorId;
  final String? author;
  final int? editorId;
  final String? editor;
  final double? price;
  final String? isbn;
  final String? note;
  final int? scaffale;
  final DateTime? dataAggiunta;

  Book({
    this.id,
    this.title,
    this.authorId,
    this.author,
    this.editorId,
    this.editor,
    this.price,
    this.isbn,
    this.note,
    this.scaffale,
    this.dataAggiunta,
  });
}

Una semplice classe con diversi campi, di cui nessuno obbligatorio (potete ovviamente cambiare questa cosa).

A questo punto, dentro ad una cartella widgets, ho creato un widget che rappresenta un oggetto singolo (book_item.dart):

import 'package:flutter/material.dart';

class BookItem extends StatelessWidget {
  final String? title;
  final String? author;
  final double? price;

  const BookItem({
    super.key,
    this.title,
    this.author,
    this.price,
  });

  @override
  Widget build(BuildContext context) {
    return GridTile(
      footer: GridTileBar(
        backgroundColor: Colors.green,
        leading: Text('€ $price'),
        trailing: IconButton(
          icon: const Icon(Icons.update),
          onPressed: () {},
        ),
        title: Text(
          author!,
          textAlign: TextAlign.center,
        ),
      ),
      child: Text(
        title!,
        textAlign: TextAlign.center,
      ),
    );
  }
}

Abbiamo usato anche il componente GridTile, che ha tutta una serie di opzioni molto comode; sperimentate un pò per capire il funzionamento.

Infine vediamo la shermata in cui c'è la nostra GridView:

import 'package:flutter/material.dart';

import 'models/book.dart';
import 'widgets/book_item.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MP Book',
      theme: ThemeData(
        fontFamily: 'Raleway',
        brightness: Brightness.dark,
        primaryColor: Colors.amber,
        primarySwatch: Colors.amber,
        textTheme: const TextTheme(
          // headline1: TextStyle(fontWeight: FontWeight.bold),
          headline6: TextStyle(fontWeight: FontWeight.bold),
          bodyText1: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.purple,
            foregroundColor: Colors.white,
          ),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final List<Book> bookList = [
    Book(
      id: 1,
      title: 'IT',
      authorId: 2,
      author: 'Stephen King',
      editor: 'Mondadori',
      editorId: 2,
      price: 33.25,
      isbn: '',
      scaffale: 2,
      note: '',
      dataAggiunta: DateTime.now(),
    ),
    Book(
      id: 2,
      title: 'Sahara',
      authorId: 2,
      author: 'Clive Cussler',
      editor: 'Mondadori',
      editorId: 2,
      price: 23.05,
      isbn: '',
      scaffale: 2,
      note: '',
      dataAggiunta: DateTime.now(),
    ),
    Book(
      id: 3,
      title: 'Mars',
      authorId: 2,
      author: 'Weir',
      editor: 'Mondadori',
      editorId: 2,
      price: 90.25,
      isbn: '',
      scaffale: 2,
      note: '',
      dataAggiunta: DateTime.now(),
    ),
    Book(
      id: 3,
      title: 'Libro 4',
      authorId: 5,
      author: 'Stephen King',
      editor: 'Mondadori',
      editorId: 2,
      price: 33.25,
      isbn: '',
      scaffale: 2,
      note: '',
      dataAggiunta: DateTime.now(),
    ),
  ];

  MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('MP Book'),
        backgroundColor: Colors.amber,
      ),
      body: GridView.builder(
        padding: const EdgeInsets.all(10.0),
        itemCount: bookList.length,
        itemBuilder: (ctx, i) => BookItem(
          title: bookList[i].title,
          author: bookList[i].author,
          price: bookList[i].price,
        ),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 3 / 2,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
        ),
      ),
    );
  }
}

Come vedete abbiamo impostato la visualizzazione su due colonne.

Inoltre abbiamo usato la "versione" GridView.builder, in quanto nella realtà non sappiamo quanti elementi abbiamo.