Paketdetailsv2.0.0+4

skeleton_loader

Ein Flutter-Paket, das einen vollständig anpassbaren Lade-Skelett für Ihre App bereitstellt.

AndroidiOSWebmacOSWindowsLinux

pub.dev API-Dokumentation Quellcode

30-Tage-Downloads: 17
Likes: 235
Pub-Punkte: 140

Paket installieren

flutter pub add skeleton_loader

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Paket, das vollständig anpassbare Lade-Skelette bietet, um die Benutzererfahrung während des Datenladens zu verbessern. Es stellt Platzhalteranimationen bereit, die dem endgültigen Inhaltlayout ähneln und so die wahrgenommene Ladezeit verringern sowie die Reaktionsfähigkeit der App verbessern. Dank Unterstützung aller wichtigen Plattformen ist es ideal für die Erstellung von reibungslosen, professionell aussehenden Oberflächen. Das Paket ist leichtgewichtig und einfach zu integrieren, wodurch Entwickler das Aussehen und Verhalten der Skelette an ihr Designsystem anpassen können.

Anwendungsfälle

Listen oder Raster mit Platzhalterinhalten laden
Kartenlayouts anzeigen, bevor die Daten eintreffen
Verbesserung der wahrgenommenen Leistung während asynchroner Operationen
Konsistente Benutzeroberfläche beim Abrufen von Remote-Daten
Verbesserung der Benutzererfahrung in Formularen mit dynamischen Feldern

Hauptmerkmale

Völlig anpassbare Skelett-Optik
Unterstützung für mehrere Animationsarten
Einfache Integration mit bestehenden Widgets
Plattformübergreifende Kompatibilität
Leicht und leistungsstark
konfigurierbare Schimmer-Effekte

Geeignet für

Entwickler, die während Ladezuständen eine verbesserte Benutzererfahrung suchen
Designer, die visuelle Konsistenz beibehalten möchten
Apps mit dynamischem oder netzwerkabhängigem Inhalt
Projekte, die polierte, produktionsfertige Platzhalter erfordern
Teams, die Material- oder Cupertino-Designsysteme verwenden

Hinweise

Kann zusätzliche Stilisierung für komplexe Layouts erfordern
Die Animationsleistung sollte auf günstigeren Geräten getestet werden
Nicht geeignet für statischen Inhalt ohne Ladebedarf
Eingeschränkte Anpassungsmöglichkeiten außer grundlegenden Form- und Farboptionen
Am besten in Kombination mit tatsächlichen Ladeindikatoren für Barrierefreiheit verwendet

Original-README

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

skeleton_loader

A Flutter Package which provides a fully customizable loading skeleton for your app,

Installation

How to install it? Follow Instructions

Preview

Usage

import 'package:example/models/states.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

import 'screens/list.dart';
import 'screens/grid.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final String appTitle = "Flutter Skeleton Loader Demo";
  final List<StateCapital> sc = [
    StateCapital(name: "Abia", capital: "Umuahia"),
    StateCapital(name: "Adamawa", capital: "Yola"),
    StateCapital(name: "Akwa-Ibom", capital: "Uyo"),
    StateCapital(name: "Anambra", capital: "Awka"),
    StateCapital(name: "Bauchi", capital: "Bauchi"),
    StateCapital(name: "Bayelsa", capital: "Yenagoa"),
    StateCapital(name: "Benue", capital: "Makurdi"),
    StateCapital(name: "Borno", capital: "Maiduguri"),
    StateCapital(name: "Cross River", capital: "Calabar"),
    StateCapital(name: "Delta", capital: "Asaba"),
    StateCapital(name: "Ebonyi", capital: "Abakaliki"),
    StateCapital(name: "Edo", capital: "Benin"),
    StateCapital(name: "Ekiti", capital: "Ado-Ekiti"),
    StateCapital(name: "Enugu", capital: "Enugu"),
    // StateCapital(name: "FCT", capital: "Abuja"),
    StateCapital(name: "Gombe", capital: "Gombe"),
    StateCapital(name: "Imo", capital: "Owerri"),
    StateCapital(name: "Jigawa", capital: "Dutse"),
    StateCapital(name: "Kaduna", capital: "Kaduna"),
    StateCapital(name: "Kano", capital: "Kano"),
    StateCapital(name: "Katsina", capital: "Katsina"),
    StateCapital(name: "Kebbi", capital: "Birnin-Kebbi"),
    StateCapital(name: "Kogi", capital: "Lokoja"),
    StateCapital(name: "Kwara", capital: "Ilorin"),
    StateCapital(name: "Lagos", capital: "Ikeja"),
    StateCapital(name: "Nassarawa", capital: "Lafia"),
    StateCapital(name: "Niger", capital: "Mina"),
    StateCapital(name: "Ogun", capital: "Abeokuta"),
    StateCapital(name: "Ondo", capital: "Akure"),
    StateCapital(name: "Osun", capital: "Osogbo"),
    StateCapital(name: "Oyo", capital: "Ibadan"),
    StateCapital(name: "Plateau", capital: "Jos"),
    StateCapital(name: "Rivers", capital: "Port Harcourt"),
    StateCapital(name: "Sokoto", capital: "Sokoto"),
    StateCapital(name: "Taraba", capital: "Jalingo"),
    StateCapital(name: "Yobe", capital: "Damaturu"),
    StateCapital(name: "Zamfara", capital: "Gusau"),
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        textTheme: GoogleFonts.openSansTextTheme(),
        primaryTextTheme: GoogleFonts.openSansTextTheme().copyWith(
          headline6: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: 2,
        initialIndex: 1,
        child: Scaffold(
          appBar: AppBar(
            title: Text("Flutter Skeleton Loader Demo"),
            bottom: TabBar(
              labelColor: Colors.white,
              tabs: <Widget>[
                Tab(
                  text: "List",
                ),
                Tab(
                  text: "Grid",
                ),
              ],
            ),
          ),
          body: TabBarView(
            children: <Widget>[
              ListExample(stateCapitals: sc),
              GridExample(stateCapitals: sc),
            ],
          ),
        ),
      ),
    );
  }
}