scrollable_panel

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Paket, das ein Ziehen und Öffnen eines unteren Panels ermöglicht und die Funktionalität des 'Nahe gelegene Orte'-Panels aus der Google Maps-App nachahmt. Es bietet reibungslose Drag-to-Expand-Interaktionen und unterstützt das Scrollen von Inhalten innerhalb des erweiterten Panels. Ideal zum Anzeigen detaillierter Informationen oder Listen in einem kompakten, interaktiven Format. Das Paket ist mit Android, iOS, Web, macOS, Windows und Linux kompatibel.

Anwendungsfälle

Anzeigen von Standortdetails in Kartenanwendungen
Anzeige der Liste nahegelegener Sehenswürdigkeiten
Erweiterbare Informationsfelder erstellen
Implementierung von einklappbaren Inhaltsteilen
Verbesserung der Benutzerinteraktion mit ziehbaren Unterelementen

Hauptmerkmale

Drag-to-expand-Gestenunterstützung
eingebautes scrollbares Inhaltfeld
Plattformübergreifende Kompatibilität
Glatte Animationsübergänge
Anpassbare Panelhöhe und -verhalten
Reaktive Gestaltung für alle Bildschirmgrößen

Geeignet für

Karten- und ortsbasierte Anwendungen
inhaltsreiche Bottom Sheets
Benutzeroberflächen, die erweiterbare Panels erfordern
Entwickler, die native-like Bottom-Sheet-Erfahrungen suchen
Apps, die eine intuitive Gestenbasierte Navigation benötigen

Hinweise

Kann zusätzliche Stilisierung für benutzerdefinierte Visualisierungen erfordern
Leistungseinbußen bei sehr großen Datensätzen
Begrenzte Anpassungsmöglichkeiten für komplexe Animationen
Erfordert sorgfältige Behandlung von verschachtelten Scrollansichten
Nicht ideal für einfache statische Inhaltsanzeige

Original-README

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

drag to expand and then can scroll contents. similar "Nearby spots" panel on google map app.

https://pub.dev/packages/scrollable_panel

Panel Properties

Properties	Data Type	Description
builder	ScrollableWidgetBuilder	builder for inner panel view. ScrollableWidgetBuilder type define in draggable_scrollable_sheet.dart. provide PanelScrollController that extends ScrollController.
controller	PanelController	control panel from some interaction like button.
defaultPanelState	PanelState	set default panel state. (default value PanelState.open)
defaultPanelSize	double	set default panel height factor (default value 0.25)
minPanelSize	double	set minimum panel height factor. (default value 0)
maxPanelSize	double	set maximum panel height factor. (default value 1.0)
onOpen	VoidCallback	if non-null, this callback is called when panel state become open
onClose	VoidCallback	if non-null, this callback is called when panel state become close
onExpand	VoidCallback	if non-null, this callback is called when panel state become expand

PanelController actions

Action	Data Type	Description
open	void	open panel. panel animate to defaultPanelSize.
expand	void	expand panel. panel animate to maxPanelSize.
close	void	close panel. panel animate to minPanelSize.
animateTo	double	animate panel to value height.

Usage

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  PanelController _panelController = PanelController();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('scrollable panel'),
      ),
      body: Stack(
        children: <Widget>[
          InkWell(
            onTap: () {
              _panelController.toDefault();
            },
            child: _FirstView(),
          ),
          ScrollablePanel(
            controller: _panelController,
            builder: (context, controller) {
              return SingleChildScrollView(
                controller: controller,
                child: _SecondView(),
              );
            },
          ),
        ],
      ),
    );
  }
}

TODO

~write README.md and dartdoc~
~null-safety support~
~write test code~
add List<double> anchor property to use multi snapping point.

Pakete, Repositories und App-Kategorien suchen