modal_progress_hud_nsn

Visão geral do pacote

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

Um pacote Flutter que fornece um widget de indicador de progresso modal com Sound Null Safety, projetado para exibir uma sobreposição de carregamento sobre elementos de interface existentes. É um fork mantido do original modal_progress_hud, otimizado para práticas modernas do Dart. O widget bloqueia a interação do usuário durante o carregamento e pode ser facilmente controlado por meio de uma bandeira booleana. Ideal para mostrar estados de carregamento durante solicitações de rede ou operações demoradas em múltiplas plataformas.

Casos de uso

Mostrando estado de carregamento durante chamadas da API
Bloqueando a IU durante o envio do formulário
Exibindo progresso em tarefas em segundo plano
Melhorando a experiência do usuário durante a busca de dados
Fornecendo feedback visual em fluxos de login

Principais recursos

Suporte a Null Safety segura
Controle booleano simples para visibilidade
Sobreposição modal que desativa a IU subjacente
Compatibilidade multiplataforma
Integração fácil com widgets existentes
Indicador de carregamento personalizável

Indicado para

Desenvolvedores usando o Flutter com segurança nula
Aplicativos que exigem feedback claro de carregamento
Projetos que precisam de indicadores de progresso leves
Equipes mantendo bases de código legadas com dependências atualizadas
aplicações com interface pesada e operações assíncronas frequentes

Considerações

Pode exigir manipulação manual de sobreposições aninhadas
Não adequado para cenários de carregamento não modais
Personalização limitada além da estilização básica
Depende das restrições de layout do widget pai
Melhor usado com um único estado de carregamento ativo por vez

README original

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

A simple widget wrapper to enable modal progress HUD (a modal progress indicator, HUD = Heads Up Display)

A fork of the original modal_progress_hud by mmcc007 with Null Safety and additional features.

Usage

Add the modal_progress_hud_nsn to dependencies in pubspec.yaml.

dependencies:
    modal_progress_hud_nsn: ^0.5.1

Next, import the library into your app.

import 'package:modal_progress_hud_nsn/modal_progress_hud_nsn.dart';

Now, wrap your widget as a child of ModalProgressHUD, typically a form, together with a boolean variable that is maintained in local state.

...
bool _saving = false
...

@override
Widget build(BuildContext context) {
  return Scaffold(
     body: ModalProgressHUD(child: Container(
       Form(...)
     ), inAsyncCall: _saving),
  );
}

Options

Below parameters can be customised accordingly.

ModalProgressHUD(
  @required inAsyncCall: bool,
  @required child: Widget,
  opacity: double,
  color: Color,
  progressIndicator: CircularProgressIndicator,
  offset: double
  dismissible: bool,
  blur: double,
);

Example

An example app that demonstrates the usage.

On initial load, _saving defaults to false which causes your child widget to display.
When the form is submitted, _saving is set to true, which will display the modal.
Once the async call is complete, _saving is set back to false, hiding the modal.

Example Code

class SettingsPage extends StatefulWidget {
  @override
  _SettingsPageState createState() => new _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  bool _saving = false;

  void _submit() {

    setState(() {
      _saving = true;
    });

    //Simulate a service call
    print('submitting to backend...');
    new Future.delayed(new Duration(seconds: 4), () {
      setState(() {
        _saving = false;
      });
    });
  }

  Widget _buildWidget() {
    return new Form(
      child: new Column(
        children: [
          new SwitchListTile(
            title: const Text('Bedroom'),
            value: _bedroom,
            onChanged: (bool value) {
              setState(() {
                _bedroom = value;
              });
            },
            secondary: const Icon(Icons.hotel),
          ),
          new RaisedButton(
            onPressed: _submit,
            child: new Text('Save'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Flutter Progress Indicator Demo'),
        backgroundColor: Colors.blue,
      ),
      body: ModalProgressHUD(child: _buildWidget(), inAsyncCall: _saving),
    );
  }
}

Similar Alternatives

modal_progress_hud : Original
modal_progress_hud_alt : Alternative
blurry_modal_progress_hud : With blur
flutter_progress_hud : Light weight and with fade
loading_overlay : Another fork of original with fade

Useful Resources

See this article on Medium about async form validation

See the example application source for a complete sample app using the modal progress HUD. Included in the example is a method for using a form's validators while making async calls (see flutter/issues/9688 for details).

Issues and feedback

Please file issues to send feedback, request features or report a bug. Thank you!

Buscar pacotes, repositórios e categorias de apps