Buscar pacotes, repositórios e categorias de apps

ducafecatGuia do ecossistema Flutter
Capa de skeleton_text
Detalhes do pacotev3.0.1

skeleton_text

Um pacote que fornece uma maneira fácil de adicionar animação de carregamento de texto esqueleto em projetos Flutter. Este projeto faz parte da comunidade 101Loop.

AndroidiOSWebmacOSWindowsLinux
pub.dev Documentação da API Código-fonte
Downloads em 30 dias
27,3 mil
Curtidas
350
Pontos Pub
150

Instalar pacote

flutter pub add skeleton_text

Visão geral do pacote

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

Um pacote Flutter que simplifica a adição de animações de carregamento de texto esqueleto para melhorar a experiência do usuário durante o carregamento de dados. Oferece uma maneira limpa e personalizável de exibir conteúdo de espaço reservado com efeitos de brilho animados, imitando o layout real do texto. Parte da comunidade 101Loop, suporta todas as principais plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux. Ideal para desenvolvedores que buscam uma solução leve para melhorar a responsividade da IU.

Casos de uso

  • Espaços reservados da tela de carregamento
  • Espaços reservados do cartão de produto
  • esqueletos de itens da lista
  • Estados de carregamento da página do perfil
  • Pré-visualizações de conteúdo dinâmico

Principais recursos

  • Efeito de brilho animado
  • Largura e altura personalizáveis
  • Suporta múltiplas linhas
  • Integração fácil com widgets existentes
  • Leve e eficiente

Indicado para

  • designers de UI/UX
  • Iniciantes do Flutter
  • Desenvolvedores de aplicativos que precisam de estados de carregamento
  • Projetos com conteúdo dinâmico
  • Aplicativos conscientes de desempenho

Considerações

  • Limitado a espaços reservados somente de texto
  • Sem suporte embutido para imagens
  • Requer estilização manual para layouts complexos
  • Não adequado para cenários de carregamento não-textuais
  • Depende do renderização específica da plataforma

README original

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

skeleton_text

A package provides an easy way to add skeleton text loading animation in Flutter project

Dependency

dependencies:
  skeleton_text:

How To Use

import 'package:skeleton_text/skeleton_text.dart';

To achieve the above example animation use the following code :

 ListView.builder(
   scrollDirection: Axis.vertical,
   physics: BouncingScrollPhysics(),
   itemCount: 5,
   itemBuilder: (BuildContext context, int index) {
     return Container(
       height: 240,
       margin: EdgeInsets.symmetric(horizontal: 20),
       child: Row(
         children: [
           Expanded(
             child: SkeletonAnimation(
               shimmerColor: Colors.grey,
               borderRadius: BorderRadius.circular(20),
               shimmerDuration: 1000,
               child: Container(
                 decoration: BoxDecoration(
                   color: Colors.grey[300],
                   borderRadius: BorderRadius.circular(20),
                   boxShadow: shadowList,
                 ),
                 margin: EdgeInsets.only(top: 40),
               ),
             ),
           ),
           Expanded(
             child: Container(
               margin: EdgeInsets.only(top: 60, bottom: 20),
               decoration: BoxDecoration(
                 color: Colors.grey,
                 boxShadow: shadowList,
                 borderRadius: BorderRadius.only(
                   topRight: Radius.circular(20),
                   bottomRight: Radius.circular(20),
                 ),
               ),
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                 crossAxisAlignment: CrossAxisAlignment.start,
                 mainAxisSize: MainAxisSize.max,
                 children: <Widget>[
                   Padding(
                     padding: const EdgeInsets.only(left: 15.0, bottom: 5.0),
                     child: SkeletonAnimation(
                       borderRadius: BorderRadius.circular(10.0),
                       shimmerColor: index % 2 != 0 ? Colors.grey : Colors.white54,
                       child: Container(
                         height: 30,
                         width: MediaQuery.of(context).size.width * 0.35,
                         decoration: BoxDecoration(
                             borderRadius: BorderRadius.circular(10.0),
                             color: Colors.grey[300]),
                       ),
                     ),
                   ),
                   Padding(
                     padding: const EdgeInsets.only(left: 15.0),
                     child: Padding(
                       padding: const EdgeInsets.only(right: 5.0),
                       child: SkeletonAnimation(
                         borderRadius: BorderRadius.circular(10.0),
                         shimmerColor: index % 2 != 0 ? Colors.grey : Colors.white54,
                         child: Container(
                           width: 60,
                           height: 30,
                           decoration: BoxDecoration(
                               borderRadius: BorderRadius.circular(10.0),
                               color: Colors.grey[300]),
                         ),
                       ),
                     ),
                   ),
                 ],
               ),
             ),
           ),
         ],
       ),
     );
   },
 )

Explanation

I have created a List builder of 5 Containers. Wrapping any widget by SkeletonAnimation would give a beautiful loading animation.

SkeletonAnimation Constructor :

  SkeletonAnimation({
      @required this.child,
      this.shimmerColor = Colors.white54,
      this.gradientColor = const Color.fromARGB(0, 244, 244, 244),
      this.curve = Curves.fastOutSlowIn,
      this.borderRadius = const BorderRadius.all(Radius.circular(0)),
      this.shimmerDuration = 1000,
      Key key,
    })

Categorias

Espaço reservado

Repositório-fonte

Projetos que usam este pacote