flutter_sticky_header

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Paket, das sticky Headers innerhalb eines CustomScrollView mithilfe von Slivers implementiert. Es ermöglicht es, dass Header während des Scrollens durch Listen oder Raster am oberen Rand des scrollbaren Inhalts sichtbar bleiben und so Navigation und visuelle Organisation verbessern. Ideal für lange Listen mit gruppierten Elementen wie Kontakten, Nachrichten oder kategorisierten Daten. Das Paket ist leichtgewichtig, gut dokumentiert und kompatibel mit allen wichtigen Plattformen.

Anwendungsfälle

Gruppierte Listenansichten
Kontaktlisten mit alphabetischen Überschriften
Nachrichten-Threads mit Datumsüberschriften
Kategorisierte Produktlisten
Scrollbare Dashboards mit Abschnittskopfzeilen

Hauptmerkmale

Sliver-basierte Implementierung
Automatische Kopfzeilenbefestigung
Anpassbare Kopfzeilen-Stilierung
glatter Scrollverhalten
Plattformübergreifende Unterstützung
Einfache Integration mit CustomScrollView

Geeignet für

Entwickler, die scrollbare Listen mit Abschnitten erstellen
Apps, die visuell organisierte Inhalte benötigen
Projekte, die leistungsoptimierte Header erfordern
Teams, die Plattformkonsistenz priorisieren

Hinweise

Erfordert die Verwendung innerhalb eines CustomScrollView
Möglicherweise sind zusätzliche Layout-Anpassungen für komplexe Kopfzeilen erforderlich
Nicht geeignet für nicht-Sliver-Scroll-Kontexte
Eingeschränkte Anpassung über die grundlegende Gestaltung hinaus
Leistungseinbußen bei sehr großen Datensätzen

Original-README

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

A Flutter implementation of sticky headers with a sliver as a child.

Features

Accepts one sliver as content.
Header can overlap its sliver (useful for sticky side header for example).
Notifies when the header scrolls outside the viewport.
Can scroll in any direction.
Supports overlapping (AppBars for example).
Supports not sticky headers (with sticky: false parameter).
Supports a controller which notifies the scroll offset of the current sticky header.

Getting started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  flutter_sticky_header:

In your library add the following import:

import 'package:flutter_sticky_header/flutter_sticky_header.dart';

For help getting started with Flutter, view the online documentation.

SliverStickyHeader

You can place one or multiple SliverStickyHeaders inside a CustomScrollView.

SliverStickyHeader(
  header: Container(
    height: 60.0,
    color: Colors.lightBlue,
    padding: EdgeInsets.symmetric(horizontal: 16.0),
    alignment: Alignment.centerLeft,
    child: Text(
      'Header #0',
      style: const TextStyle(color: Colors.white),
    ),
  ),
  sliver: SliverList(
    delegate: SliverChildBuilderDelegate(
      (context, i) => ListTile(
            leading: CircleAvatar(
              child: Text('0'),
            ),
            title: Text('List tile #$i'),
          ),
      childCount: 4,
    ),
  ),
);

SliverStickyHeader.builder

If you want to change the header layout during its scroll, you can use the SliverStickyHeader.builder constructor.

The example belows changes the opacity of the header as it scrolls off the viewport.

SliverStickyHeader.builder(
  builder: (context, state) => Container(
        height: 60.0,
        color: (state.isPinned ? Colors.pink : Colors.lightBlue)
            .withOpacity(1.0 - state.scrollPercentage),
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        alignment: Alignment.centerLeft,
        child: Text(
          'Header #1',
          style: const TextStyle(color: Colors.white),
        ),
      ),
  sliver: SliverList(
    delegate: SliverChildBuilderDelegate(
      (context, i) => ListTile(
            leading: CircleAvatar(
              child: Text('0'),
            ),
            title: Text('List tile #$i'),
          ),
      childCount: 4,
    ),
  ),
);

You can find more examples in the Example project.

Sponsoring

I'm working on my packages on my free-time, but I don't have as much time as I would. If this package or any other package I created is helping you, please consider to sponsor me. By doing so, I will prioritize your issues or your pull-requests before the others.

Changelog

Please see the Changelog page to know what's recently changed.

Contributions

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.
If you fixed a bug or implemented a new feature, please send a pull request.

Thanks

:clap: Thanks to slightfoot with it's RenderBox version (https://github.com/slightfoot/flutter_sticky_headers) which unintentionally challenged me to work in this RenderSliver version.

Pakete, Repositories und App-Kategorien suchen