Flutter: Exemplo de GridView.builder()

Publicado em 31/03/2023 por cacpnrj

Tempo de leitura: 2 minutes

Se seu aplicativo Flutter precisar exibir uma exibição em grade de um número grande ou infinito de itens (uma lista de produtos obtidos da API, por exemplo), você deve usar GridView.builder() em vez de GridView(). O builder() é chamado apenas para os itens que estão realmente visíveis para que o desempenho do seu aplicativo seja aprimorado.

Exemplo

Os passos:

1. Gere uma lista com 100.000 produtos fictícios:

final List<Map> myProducts =
      List.generate(100000, (index) => {"id": index, "name": "Produto $index"})
          .toList();

Ao usar GridView.builder(), nos livraremos do atraso ao renderizar uma lista super extensa como esta.

2. Implemente a visualização em grade:

GridView.builder(
   gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
       maxCrossAxisExtent: 200,
       childAspectRatio: 3 / 2,
       crossAxisSpacing: 20,
       mainAxisSpacing: 20),
   itemCount: myProducts.length,
   itemBuilder: (BuildContext ctx, index) {
     return Container(
       alignment: Alignment.center,
       decoration: BoxDecoration(
           color: Colors.amber,
           borderRadius: BorderRadius.circular(15)),
       child: Text(myProducts[index]["name"]),
     );
   }),

Captura de tela:

O Código completo

Código completo em main.dart

// CapSistema.com.br
// main.dart
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Ocultar o banner de depuração
      debugShowCheckedModeBanner: false,
      title: 'CapSistema.com.br',
      home: HomeScreen(),
    );
  }
}

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

  final List<Map> myProducts =
      List.generate(100000, (index) => {"id": index, "name": "Produto $index"})
          .toList();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('CapSistema.com.br'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        // implement GridView.builder
        child: GridView.builder(
            gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 200,
                childAspectRatio: 3 / 2,
                crossAxisSpacing: 20,
                mainAxisSpacing: 20),
            itemCount: myProducts.length,
            itemBuilder: (BuildContext ctx, index) {
              return Container(
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    color: Colors.amber,
                    borderRadius: BorderRadius.circular(15)),
                child: Text(myProducts[index]["name"]),
              );
            }),
      ),
    );
  }
}

Conclusão

Parabéns! Neste ponto, você deve entender melhor e se sentir mais confortável ao implementar um GridView em seu aplicativo. Você pode explorar coisas mais interessantes sobre grade e listar coisas no Flutter, dando uma olhada nos seguintes artigos:

Twittar

0 Compart.