套件詳情v2.0.0+4

skeleton_loader

一個 Flutter 套件，為您的應用程式提供完全可自訂的載入骨架。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文件原始碼

近 30 天下載: 17
喜歡數: 235
Pub 分數: 140

安裝套件

flutter pub add skeleton_loader

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

一個 Flutter 套件，提供完全可自訂的載入骨架，以在資料載入期間提升使用者體驗。它提供模擬最終內容版面的佔位符動畫，減少感知載入時間並改善應用程式回應速度。支援所有主要平台，非常適合建立流暢、專業外觀的介面。此套件輕量且易於整合，讓開發者能根據其設計系統客製化骨架的外觀與行為。

適用情境

加載列表或網格時使用佔位符內容
在資料到達之前顯示卡片版面
在異步操作期間提升感知性能
在取得遠端資料時建立一致的使用者介面
透過動態欄位增強表單的使用者體驗

主要特色

完全可自定義的骨架外觀
支援多種動畫類型
與現有小部件的輕鬆整合
跨平台相容性
輕量且高效
可設定的閃爍效果

適合對象

開發人員在載入狀態期間尋求改進的使用者體驗
希望保持視覺一致性的設計師
具有動態或網路依賴內容的應用程式
需要精煉、可投入生產的佔位符的項目
使用 Material 或 Cupertino 設計系統的團隊

使用建議

可能需要額外的樣式才能實現複雜的佈局
應在低階設備上測試動畫效能
不適合沒有加載需求的靜態內容
除了基本的形狀和顏色選項外，自訂功能有限
最佳搭配實際的載入指示器使用，以提升可存取性

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

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),
            ],
          ),
        ),
      ),
    );
  }
}