section_view

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

SectionView é um pacote Flutter que permite a criação de listas com seções com índice alfabético e funcionalidade de puxar para atualizar. Ele permite personalização total dos cabeçalhos das seções e controle sobre o comportamento de rolagem, tornando-o ideal para listas de contatos, catálogos ou qualquer dado organizado alfabeticamente. O pacote suporta todas as principais plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux. Os desenvolvedores podem adaptar a IU e a interação para corresponder à linguagem de design do seu aplicativo.

Casos de uso

Lista de contatos com índice alfabético
Catálogo de produtos com itens agrupados
Seções roláveis personalizáveis
Exibição de dados com capacidade de atualização
Navegação alfabética em listas

Principais recursos

Cabeçalhos de seção em ordem alfabética
Suporte de recarregamento por puxar
Interface do usuário totalmente personalizável
Compatibilidade multiplataforma
Rolagem suave entre seções
Estilo de cabeçalho configurável

Indicado para

Aplicativos que precisam de ordenação alfabética
Desenvolvedores que desejam controles personalizados de seção
Projetos que exigem listas recarregáveis
Aplicações com foco em UI e dados agrupados
Aplicativos móveis e web multiplataforma

Considerações

Requer manipulação manual do agrupamento de dados
A personalização pode aumentar a complexidade
O desempenho depende do tamanho da lista
animações internas limitadas
Não otimizado para conjuntos de dados muito grandes
Requer gerenciamento cuidadoso de estado

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

Notice: 2.0.0 has break changing

The header sticky will use flutter_list_view to implement
Refresh control will construct by user, like pull_to_refresh

SectionView<AlphabetHeader<CountryModel>, CountryModel>(
  source: _filterCountries,
  onFetchListData: (header) => header.items,
  enableSticky: true,
  alphabetAlign: Alignment.center,
  alphabetInset: const EdgeInsets.all(4.0),
  headerBuilder: getDefaultHeaderBuilder((d) => d.alphabet),
  alphabetBuilder: getDefaultAlphabetBuilder((d) => d.alphabet),
  tipBuilder: getDefaultTipBuilder((d) => d.alphabet),
  refreshBuilder: (child) {
    return SmartRefresher(
        enablePullDown: true,
        enablePullUp: false,
        header: const WaterDropHeader(),
        controller: _refreshController,
        onRefresh: _onRefresh,
        child: child);
  },
  itemBuilder:
      (context, itemData, itemIndex, headerData, headerIndex) {
    return Padding(
      padding: const EdgeInsets.only(right: 12.0),
      child: ListTile(
          title: Text(itemData.name),
          trailing: Text(itemData.phoneCode)),
    );
  },
),

Features

Show with section view
Alphabet support
Refresh support

Screen

Usage

Firstly, you can construct data like

List<GroupModel> data = [
    GroupModel(name: "Group 1", items: [
      ItemModel(name: "Item 1-1"),
      ItemModel(name: "Item 1-2"),
      ItemModel(name: "Item 1-3"),
      ItemModel(name: "Item 1-4"),
      ItemModel(name: "Item 1-5"),
    ]),
    GroupModel(name: "Group 2", items: [
      ItemModel(name: "Item 2-1"),
      ItemModel(name: "Item 2-2"),
      ItemModel(name: "Item 2-3"),
      ItemModel(name: "Item 2-4"),
      ItemModel(name: "Item 2-5"),
    ]),
    GroupModel(name: "Group 3", items: [
      ItemModel(name: "Item 3-1"),
      ItemModel(name: "Item 3-2"),
      ItemModel(name: "Item 3-3"),
      ItemModel(name: "Item 3-4"),
      ItemModel(name: "Item 3-5"),
    ]),
  ];

After that, you can put code into you project like as below

SectionView<GroupModel, ItemModel>(
  source: data,
  onFetchListData: (header) => header.items,
  headerBuilder: getDefaultHeaderBuilder((d) => d.name,
      bkColor: Colors.green,
      style:
          const TextStyle(fontSize: 18, color: Colors.white)),
  itemBuilder:
      (context, itemData, itemIndex, headerData, headerIndex) =>
          ListTile(
            title: Text(itemData.name),
          )),

Additional information

If you want to custom your UI, please follow /example/lib/fullSectionList.dart

Todo

Provide tailer load more functionality
Provide programaticly invoke onRefresh.

Buscar pacotes, repositórios e categorias de apps

Instalar pacote