Buscar pacotes, repositórios e categorias de apps

Capa de flutter_progress_hud
Detalhes do pacotev2.0.2

flutter_progress_hud

Indicador de progresso modal altamente personalizável com animação de desvanecimento.

AndroidiOSWebmacOSWindowsLinux
Downloads em 30 dias
28,9 mil
Curtidas
131
Pontos Pub
150

Instalar pacote

flutter pub add flutter_progress_hud

Visão geral do pacote

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

Um indicador de progresso modal altamente personalizável para Flutter que exibe uma sobreposição de carregamento com animações suaves de desvanecimento. Oferece uma maneira fácil de mostrar e ocultar estados de carregamento durante operações assíncronas, melhorando a experiência do usuário ao indicar processos em andamento. O HUD pode ser personalizado com mensagens diferentes, cores e formas, e é compatível com várias plataformas, incluindo móvel, web e desktop. Ideal para uso em formulários, chamadas à API ou qualquer operação que exija feedback visual.

Casos de uso

  • Exibindo estado de carregamento durante solicitações de API
  • Mostrando progresso nas submissões de formulários
  • Melhorando a experiência do usuário durante a busca de dados
  • Fornecendo feedback durante tarefas em segundo plano
  • Indicando o status de processamento em operações de longa duração

Principais recursos

  • Animações de desvanecimento para dentro e para fora
  • Mensagem e aparência personalizáveis
  • Suporta múltiplas plataformas
  • Métodos fáceis de exibir/esconder
  • Cor e opacidade de sobreposição configuráveis
  • Design responsivo em dispositivos

Indicado para

  • Desenvolvedores criando aplicativos com operações assíncronas frequentes
  • Equipes priorizando a experiência do usuário
  • Projetos que exigem indicadores de carregamento consistentes
  • Aplicativos direcionados a múltiplas plataformas
  • aplicações com foco em interface que precisam de feedback refinado

Considerações

  • Pode exigir gerenciamento cuidadoso para evitar sobreposição com outros elementos da interface
  • Opções de personalização podem aumentar a complexidade para casos de uso simples
  • Impacto no desempenho em ciclos muito frequentes de exibição/escondimento
  • Não adequado para cenários de carregamento não modais
  • Temas internos limitados em comparação com alternativas de terceiros

README original

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

pub package

Flutter Progress HUD

Highly customizable modal progress indicator with fade animation.

Preview

Usage

Wrap with ProgressHUD the widget on top of which you want to show the modal indicator.

ProgressHUD(
  child: HomePage(),
)

Get a reference of ProgressHUD

final progress = ProgressHUD.of(context);

Show indeterminate progress

progress.show();

Or a progress with text

progress.showWithText('Loading...');

Then dismiss

progress.dismiss();

Example (full)

ProgressHUD(
        child: Builder(
          builder: (context) => Center(
                child: Column(
                  children: <Widget>[
                    RaisedButton(
                      child: Text('Show for a second'),
                      onPressed: () {
                        final progress = ProgressHUD.of(context);
                        progress.show();
                        Future.delayed(Duration(seconds: 1), () {
                          progress.dismiss();
                        });
                      },
                    ),
                    RaisedButton(
                      child: Text('Show with text'),
                      onPressed: () {
                        final progress = ProgressHUD.of(context);
                        progress.showWithText('Loading...');
                        Future.delayed(Duration(seconds: 1), () {
                          progress.dismiss();
                        });
                      },
                    ),
                  ],
                ),
              ),
        ),
      ),

Customization

Attribute Name Default Value Description
indicatorColor Colors.white When using the default indicator widget, this is how you set its color
indicatorWidget A basic CircularProgressIndicator Custom indicator widget
backgroundColor Colors.black54 Indicator background color
backgroundRadius Radius.circular(8.0) Indicator background radius
borderColor Colors.white Indicator background border color
borderWidth 0.0 Indicator background border width
barrierEnabled true You can disable the modal barrier if you want to allow touches while the progress is shown
barrierColor Colors.black12 Color of the Barrier displayed behind the indicator
textStyle TextStyle(color: Colors.white, fontSize: 14.0) TextStyle for the Text displayed below the indicator
padding EdgeInsets.all(16.0)} Indicator content padding

Categorias

Repositório-fonte

Projetos que usam este pacote