Pakete, Repositories und App-Kategorien suchen

ducafecatFlutter-Ökosystem
Cover von swipe_image_gallery
Paketdetailsv0.11.0

swipe_image_gallery

Eine scrollbare, per Wischen schließbare, zoombare Galerie, auf der Sie eine dynamische Überlagerung hinzufügen können.

AndroidiOSWebmacOSWindowsLinux
pub.dev API-Dokumentation Quellcode
30-Tage-Downloads
11.100
Likes
101
Pub-Punkte
160

Paket installieren

flutter pub add swipe_image_gallery

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Swipe Image Gallery ist ein Flutter-Paket, das Entwicklern ermöglicht, interaktive Bildgalerien mit Swipen zum Schließen, Zoomen und dynamischen Überlagerungsfunktionen zu erstellen. Es unterstützt mehrere Plattformen wie Android, iOS, Web, macOS, Windows und Linux. Die Galerie ermöglicht es Benutzern, durch Bilder zu scrollen, diese per Wischen zu schließen und zum detaillierten Ansehen zu vergrößern bzw. zu verkleinern. Entwickler können die Galerie mit dynamischen Überlagerungen wie Text oder Symbolen anpassen. Ideal für Foto-Sharing-Apps, Produktpräsentationen oder jede App, die eine intuitive Bildnavigation erfordert.

Anwendungsfälle

  • Foto-Sharing-Apps
  • Produktbildbetrachter
  • Interaktive Erzählung
  • Bildüberprüfungsarbeitsabläufe
  • digitale Albumpräsentationen

Hauptmerkmale

  • Swipe-to-dismiss-Funktion
  • Vergrößerbare Bilder
  • Dynamische Overlay-Unterstützung
  • Plattformübergreifende Kompatibilität
  • Anpassbare Gestensteuerung
  • Glatte Scroll-Erfahrung

Geeignet für

  • Mobile und Web-Bildergalerien
  • Apps, die interaktive Bildentfernung erfordern
  • Entwickler, die anpassbare Bild-Oberflächen suchen
  • Projekte, die Zoom- und Wischgesten erfordern
  • UX-fokussierte visuelle Anwendungen

Hinweise

  • Kann eine Leistungsoptimierung für große Bildmengen erfordern
  • Die Overlay-Positionierung erfordert möglicherweise eine sorgfältige Layout-Verwaltung
  • Mögliche Gestenkonflikte mit anderen Widgets
  • Eingeschränkte integrierte Animationsanpassung
  • Am besten geeignet für moderate Bildanzahlen pro Galerie

Original-README

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

Swipe Image Gallery

Pub Version

A scrollable, dismissable by swiping, zoomable gallery on which you can add a dynamic overlay. While it is intended for an image gallery different types of widgets can also be used.

Installation

Add swipe_image_gallery as a dependency in your pubspec.yaml file.

Usage

With a List of Image Widgets
final assets = const [
  Image(image: AssetImage('assets/1.jpeg')),
  Image(image: AssetImage('assets/2.jpeg')),
  Image(image: AssetImage('assets/3.jpeg')),
  Image(image: AssetImage('assets/4.jpeg')),
];

...

SwipeImageGallery(
  context: context,
  children: assets,
).show();

Image Widgets

With a List of Widgets
final widgets = [
  Container(
    color: Colors.white,
    child: Center(
      child: Text('First Page', style: TextStyle(fontSize: 24.0)),
    ),
  ),
  Container(
    color: Colors.grey,
    child: Center(
      child: Text('Second Page', style: TextStyle(fontSize: 24.0)),
    ),
  ),
];

...

SwipeImageGallery(
  context: context,
  children: widgets,
).show();

Widgets

Using Builder
final urls = [
  'https://via.placeholder.com/400',
  'https://via.placeholder.com/800',
  'https://via.placeholder.com/900x350',
  'https://via.placeholder.com/1000',
  'https://via.placeholder.com/100',
];

...

SwipeImageGallery(
  context: context,
  itemBuilder: (context, index) {
    return Image.network(urls[index]);
  },
  itemCount: urls.length,
).show();
Add an Overlay

You can find the OverlayExample widget here.

  StreamController<Widget> overlayController =
      StreamController<Widget>.broadcast();

  @override
  void dispose() {
    overlayController.close();
    super.dispose();
  }

  ...

  SwipeImageGallery(
    context: context,
    children: remoteImages,
    onSwipe: (index) {
      overlayController.add(OverlayExample(
        title: '${index + 1}/${remoteImages.length}',
      ));
    },
    overlayController: overlayController,
    initialOverlay: OverlayExample(
      title: '1/${remoteImages.length}',
    ),
  ).show();

overlay

Hero Animation
final heroProperties = [
  ImageGalleryHeroProperties(tag: 'imageId1'),
  ImageGalleryHeroProperties(tag: 'imageId2'),
];

final assets = const [
  Image(image: AssetImage('assets/1.jpeg')),
  Image(image: AssetImage('assets/2.jpeg')),
];

...

Row(
  children: [
    Expanded(
      child: InkWell(
        onTap: () => SwipeImageGallery(
          context: context,
          children: assets,
          heroProperties: heroProperties,
        ).show(),
        child: Hero(
          tag: 'imageId1',
          child: Image(
            image: AssetImage('assets/1.jpeg'),
          ),
        ),
      ),
    ),
    Expanded(
      child: InkWell(
        onTap: () => SwipeImageGallery(
          context: context,
          children: assets,
          initialIndex: 1,
          heroProperties: heroProperties,
        ).show(),
        child: Hero(
          tag: 'imageId2',
          child: Image(
            image: AssetImage('assets/2.jpeg'),
          ),
        ),
      ),
    ),
  ],
),

hero

For more detailed examples you can check out the example project.

Kategorien

Bild

Quell-Repository

Projekte, die dieses Paket verwenden

Noch keine Daten verfügbar.