Pakete, Repositories und App-Kategorien suchen

ducafecatFlutter-Ökosystem
Cover von section_view
Paketdetailsv2.0.6

section_view

Bieten Sie eine Abschnittsliste mit Buchstaben und Aktualisierung an, die Sie vollständig anpassen können

AndroidiOSWebmacOSWindowsLinux
pub.dev API-Dokumentation Quellcode
30-Tage-Downloads
1890
Likes
34
Pub-Punkte
140

Paket installieren

flutter pub add section_view

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

SectionView ist ein Flutter-Paket, das die Erstellung von segmentierten Listenansichten mit alphabetischer Indizierung und Pull-to-Refresh-Funktion ermöglicht. Es erlaubt eine vollständige Anpassung der Abschnittskopfzeilen und Kontrolle über das Scrollverhalten und ist daher ideal für Kontaktlisten, Kataloge oder beliebige alphabetisch sortierte Daten. Das Paket unterstützt alle wichtigen Plattformen wie Android, iOS, Web, macOS, Windows und Linux. Entwickler können die Benutzeroberfläche und Interaktion an die Designsprache ihrer App anpassen.

Anwendungsfälle

  • Kontaktliste mit alphabetischem Index
  • Produktkatalog mit gruppierten Artikeln
  • Anpassbare scrollbare Abschnitte
  • Datenanzeige mit Aktualisierungsfunktion
  • Alphabetische Navigation in Listen

Hauptmerkmale

  • Alphabetische Abschnittsüberschriften
  • Pull-to-Refresh-Unterstützung
  • Vollständig anpassbare Benutzeroberfläche
  • Plattformübergreifende Kompatibilität
  • Glatte Scrollung zwischen Abschnitten
  • Konfigurierbare Header-Stilisierung

Geeignet für

  • Apps, die alphabetische Sortierung benötigen
  • Entwickler, die benutzerdefinierte Abschnittssteuerungen wünschen
  • Projekte, die aktualisierbare Listen erfordern
  • UI-intensive Anwendungen mit gruppierten Daten
  • Plattformübergreifende mobile und Web-Anwendungen

Hinweise

  • Erfordert manuelle Behandlung der Datengruppierung
  • Die Anpassung kann die Komplexität erhöhen
  • Die Leistung hängt von der Liste ab
  • eingebaute Animationen begrenzt
  • Nicht für sehr große Datensätze optimiert
  • Erfordert sorgfältige Zustandsverwaltung

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

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

  1. Show with section view
  2. Alphabet support
  3. 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.

Kategorien

Kopfzeile

Abhängigkeiten

Abhängigkeiten 1 Einträge

Quell-Repository

Projekte, die dieses Paket verwenden

Noch keine Daten verfügbar.