Como usar o listview no flutter?

Publicado em 19/03/2023 por cacpnrj

Tempo de leitura: 3 minutes

ListView no Flutter é usado para exibir uma lista rolável de itens. É um dos widgets mais usados no Flutter. ListView é usado para agrupar vários itens em uma matriz e exibi-los em uma lista que pode ser rolada. A lista pode ser rolada horizontal ou verticalmente. O ListView pode ser personalizado e otimizado com vários truques para adequá-lo às necessidades específicas do projeto. Neste blog, exploraremos o ListView, seus tipos e como usar diferentes tipos de listview rapidamente.

Conteudo

1) ListView no Flutter

ListView é o tipo mais básico de widget no Flutter. Ele exibe uma lista rolável de itens, onde cada item é representado por um widget. Normalmente, isso é usado com um pequeno número de filhos como List. Ele também construirá elementos invisíveis na lista, portanto, outros vários widgets podem renderizar isso de forma ineficiente.

Construtores de ListView

ListView(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
double itemExtent,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
List<Widget> children: const <Widget>[],
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

Exemplo de ListView

ListView(
  children: <Widget>[
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
    ListTile(title: Text('Item 4')),
    ListTile(title: Text('Item 5')),
  ],
)

No exemplo acima, estamos usando o widget ListTile para representar cada item da lista. Você pode substituí-lo por qualquer widget de sua escolha.

2) ListView.builder

O widget ListView.builder é usado quando você tem um grande número de itens para exibir e não deseja criar todos os widgets de uma vez. Em vez disso, ele cria widgets à medida que se tornam visíveis na tela.

Construtor de ListView.builder

ListView.builder(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
double itemExtent,
@required IndexedWidgetBuilder itemBuilder,
int itemCount,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

O construtor builder() constrói uma lista repetida de widgets. O construtor recebe dois parâmetros principais:

Um itemCount para o número de repetições para o widget a ser construído (não obrigatório).
Um itemBuilder para construir o widget que será gerado ‘itemCount‘ vezes (obrigatório).

Se o itemCount não for especificado, widgets infinitos serão construídos por padrão.

Exemplo de ListView.builder

ListView.builder(
  itemCount: 100,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(title: Text('Item $index'));
  },
)

No exemplo acima, estamos usando a propriedade itemCount para especificar o número de itens a serem exibidos. A propriedade itemBuilder é uma função que usa um BuildContext e um índice como argumentos e retorna um widget para exibição nesse índice.

4) ListView.custom

O widget ListView.custom é uma versão mais flexível do widget ListView.builder. Ele permite que você forneça seu próprio delegado para controlar a criação de widgets. Como nome, permite criar a lista com a funcionalidade personalizada.

Construtores para ListView.custom

const ListView.custom(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
double itemExtent,
@required SliverChildDelegate childrenDelegate,
double cacheExtent,
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

Exemplo de ListView.custom

ListView.custom(
  childrenDelegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return ListTile(title: Text('Item $index'));
    },
    childCount: 100,
  ),
)

No exemplo acima, estamos usando o SliverChildBuilderDelegate para criar os widgets. É necessária uma função que retorna um widget para exibição em um determinado índice e uma propriedade childCount para especificar o número de itens a serem exibidos.

Conclusão

Neste blog, ex0ploramos os diferentes tipos de ListView no Flutter com exemplos. O widget ListView é o tipo mais básico de ListView, ListView.builder é usado quando você tem um grande número de itens para exibir, ListView.separated é semelhante a ListView.builder, mas permite adicionar separadores entre itens e ListView.custom é uma versão mais flexível de ListView.builder que permite fornecer seu próprio delegado para controlar a criação de widgets. Você pode escolher o tipo apropriado de ListView com base nos requisitos do seu aplicativo.

Obrigado por ler este artigo

Além disso, siga para se atualizar sobre artigos e projetos interessantes.

Se eu entendi algo errado? Deixe-me saber nos comentários. Eu adoraria melhorar.

Twittar

0 Compart.