Paketdetailsv0.0.6

flutter_skeleton_ui

Ein Flutter-Paket zum Erstellen benutzerdefinierter Skelett-Widgets, um die Layoutstruktur der Seite während des Ladevorgangs nachzuahmen.

AndroidiOSWebmacOSWindowsLinux

pub.dev API-Dokumentation Quellcode

30-Tage-Downloads: 12.400
Likes: 43
Pub-Punkte: 150

Paket installieren

flutter pub add flutter_skeleton_ui

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

flutter_skeleton_ui ist ein Flutter-Paket, das Entwicklern ermöglicht, anpassbare Skelett-Platzhalter für UI-Elemente während Ladezustände zu erstellen. Es simuliert die Anordnung des tatsächlichen Inhalts und sorgt durch die vorläufige Anzeige der Seitenstruktur vor dem vollständigen Laden der Daten für eine reibungslose Benutzererfahrung. Das Paket unterstützt verschiedene Widgets wie Karten, Listen und Textplatzhalter mit Optionen für Animationen und Styling. Ideal zur Verbesserung der wahrgenommenen Leistung und zur Reduzierung von visuellen Störungen in Apps.

Anwendungsfälle

Ladebildschirm-Platzhalter
Layoutverschiebungen während des Datenabrufs verhindern
Verbesserung der Benutzererfahrung bei Netzwerkverzögerungen
In Prototypen die Inhaltstruktur simulieren
Verbesserung der wahrgenommenen App-Reaktionsfähigkeit
Konsistente Ladezustände über Bildschirme hinweg erstellen

Hauptmerkmale

Anpassbare Skelettformen
Eingebauter animierter Schimmer-Effekt
Unterstützung für Listen- und Rasterlayouts
Einfache Integration mit bestehenden Widgets
Konfigurierbare Farben und Größen
Kompatibilität mit responsive Design

Geeignet für

Entwickler, die eine bessere Ladeerfahrung suchen
Apps mit häufigem Datenabruf
Prototyping interaktiver Benutzeroberflächen
Teams, die visuelle Aufbereitung priorisieren
Frontend-orientierte Flutter-Projekte
Projekte, die eine konsistente Platzhaltergestaltung erfordern

Hinweise

Kann die anfängliche Paketgröße leicht erhöhen
Benötigt manuelle Einrichtung für komplexe Layouts
Die Animationsleistung hängt vom Gerät ab
Nicht geeignet für statischen Inhalt
Eingeschränkte Anpassung über die grundlegende Gestaltung hinaus
Am besten mit angemessener Ladezustandsverwaltung verwenden

Original-README

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

Flutter Skeletons

Clone of skeletons

A Flutter package for building custom skeleton widgets to mimic the page's layout while loading.

Installation

flutter pub add flutter_skeleton_ui

Examples

Items		ListView (Default)

ListView (Custom)	ListView (Complex Cards)	SkeletonTheme

Light/Dark modes	Right-To-Left	Custom Shimmer

All examples can be found here examples.

How To Use

Can be used by encapsulating the child widget in a Skeleton widget:

import 'package:flutter_skeleton_ui/flutter_skeleton_ui.dart';

Skeleton(
        isLoading: _isLoading,
        skeleton: SkeletonListView(),
        child: Container(child: Center(child: Text("Content"))),
      )

or directly:

Container(
    child: _isLoading
    ? SkeletonListView()
    : Container(child: Center(
                       child: Text("Content"))),
)

a SkeletonTheme can be used to set the default configs for all skeleton descendants in the tree.

SkeletonTheme(
    // themeMode: ThemeMode.light,
    shimmerGradient: LinearGradient(
        colors: [
          Color(0xFFD8E3E7),
          Color(0xFFC8D5DA),
          Color(0xFFD8E3E7),
        ],
        stops: [
          0.1,
          0.5,
          0.9,
        ],
      ),
      darkShimmerGradient: LinearGradient(
        colors: [
          Color(0xFF222222),
          Color(0xFF242424),
          Color(0xFF2B2B2B),
          Color(0xFF242424),
          Color(0xFF222222),
        ],
        stops: [
          0.0,
          0.2,
          0.5,
          0.8,
          1,
        ],
        begin: Alignment(-2.4, -0.2),
        end: Alignment(2.4, 0.2),
        tileMode: TileMode.clamp,
      ),
        child: MateriaApp(
            ...
        ),
      ),

More Customization:

ListView (Complex Cards)

for more complex shapes you can build your skeleton inside a SkeletonItem widget:

ListView.builder(
  physics: NeverScrollableScrollPhysics(),
  itemCount: 5,
  itemBuilder: (context, index) => Padding(
    padding: const EdgeInsets.all(8.0),
    child: Container(
      padding: const EdgeInsets.all(8.0),
      decoration: BoxDecoration(color: Colors.white),
      child: SkeletonItem(
          child: Column(
        children: [
          Row(
            children: [
              SkeletonAvatar(
                style: SkeletonAvatarStyle(
                    shape: BoxShape.circle, width: 50, height: 50),
              ),
              SizedBox(width: 8),
              Expanded(
                child: SkeletonParagraph(
                  style: SkeletonParagraphStyle(
                      lines: 3,
                      spacing: 6,
                      lineStyle: SkeletonLineStyle(
                        randomLength: true,
                        height: 10,
                        borderRadius: BorderRadius.circular(8),
                        minLength: MediaQuery.of(context).size.width / 6,
                        maxLength: MediaQuery.of(context).size.width / 3,
                      )),
                ),
              )
            ],
          ),
          SizedBox(height: 12),
          SkeletonParagraph(
            style: SkeletonParagraphStyle(
                lines: 3,
                spacing: 6,
                lineStyle: SkeletonLineStyle(
                  randomLength: true,
                  height: 10,
                  borderRadius: BorderRadius.circular(8),
                  minLength: MediaQuery.of(context).size.width / 2,
                )),
          ),
          SizedBox(height: 12),
          SkeletonAvatar(
            style: SkeletonAvatarStyle(
              width: double.infinity,
              minHeight: MediaQuery.of(context).size.height / 8,
              maxHeight: MediaQuery.of(context).size.height / 3,
            ),
          ),
          SizedBox(height: 8),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  SkeletonAvatar(
                      style: SkeletonAvatarStyle(width: 20, height: 20)),
                  SizedBox(width: 8),
                  SkeletonAvatar(
                      style: SkeletonAvatarStyle(width: 20, height: 20)),
                  SizedBox(width: 8),
                  SkeletonAvatar(
                      style: SkeletonAvatarStyle(width: 20, height: 20)),
                ],
              ),
              SkeletonLine(
                style: SkeletonLineStyle(
                    height: 16,
                    width: 64,
                    borderRadius: BorderRadius.circular(8)),
              )
            ],
          )
        ],
      )),
    ),
  ),
);

Issues and feedback

For issues, please report here. Contributions are welcome.

Kategorien

Platzhalter

Quell-Repository

jordanliu/flutter_skeleton_ui

flutter_skeleton_ui

☆ 6 Sterne⑂ 1 Forks

DartSwift

Projekte, die dieses Paket verwenden

Noch keine Daten verfügbar.