Detalhes do pacotev0.0.6

flutter_skeleton_ui

Um pacote Flutter para criar widgets de esqueleto personalizados para imitar o layout da página durante o carregamento.

AndroidiOSWebmacOSWindowsLinux

pub.dev Documentação da API Código-fonte

Downloads em 30 dias: 12,4 mil
Curtidas: 43
Pontos Pub: 150

Instalar pacote

flutter pub add flutter_skeleton_ui

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

flutter_skeleton_ui é um pacote Flutter que permite aos desenvolvedores criar espaços reservados personalizáveis para elementos da interface durante os estados de carregamento. Ele imita o layout do conteúdo real, proporcionando uma experiência do usuário suave ao mostrar a estrutura da página antes que os dados sejam totalmente carregados. O pacote oferece suporte a vários widgets como cartões, listas e espaços reservados de texto, com opções de animação e estilização. Ideal para melhorar o desempenho percebido e reduzir o travamento visual nos aplicativos.

Casos de uso

Espaços reservados da tela de carregamento
Evitando deslocamentos de layout durante a busca de dados
Melhorando a experiência do usuário durante atrasos de rede
Simulando a estrutura de conteúdo em protótipos
Melhorar a responsividade percebida do aplicativo
Criando estados de carregamento consistentes entre as telas

Principais recursos

Formas de esqueleto personalizáveis
Efeito de brilho animado embutido
Suporte para layouts de lista e grade
Integração fácil com widgets existentes
Cores e tamanhos configuráveis
Compatibilidade com design responsivo

Indicado para

Desenvolvedores procurando uma melhor experiência de carregamento
Aplicativos com busca frequente de dados
Prototipagem de interfaces de usuário interativas
Equipes priorizando acabamento visual
Projetos do Flutter com foco em frontend
Projetos que exigem design de espaço reservado consistente

Considerações

Pode aumentar levemente o tamanho inicial do pacote
Requer configuração manual para layouts complexos
O desempenho da animação depende do dispositivo
Não adequado para conteúdo estático
Personalização limitada além da estilização básica
Melhor usado com gerenciamento adequado do estado de carregamento

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

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.

Categorias

Espaço reservado

Repositório-fonte

jordanliu/flutter_skeleton_ui

flutter_skeleton_ui

☆ 6 Estrelas⑂ 1 Forks

DartSwift

Projetos que usam este pacote

Ainda não há dados.