Comparação entre BLoC, ScopedModel e Redux - Parte II

BLoC , ScopedModel , Redux … diferenças, quando usar, quando NÃO deve ser usado, vantagens, desvantagens…

ScopedModel

Introdução

ScopedModel é um conjunto de utilitários para permitir a passagem de um modelo de dados de um widget pai para baixo seus descendentes.

O ScopedModel é articulado em torno de 3 classes:

  • Modelo

    Um Modelo é uma classe que contém os dados e a lógica de negócios relacionados aos dados. Ele é implementado como um Listenable e pode notificar quem pode estar interessado em saber quando uma alteração se aplica.

  • ScopedModel

    ScopedModel é um Widget, similar a um Provedor, que ' mantém ' o Modelo e permite:

    • a recuperação do modelo, através da habitual ScopedModel.ofModel(context) chamada;
    • o registro do contexto como uma dependência do InheritedWidget subjacente, quando solicitado.

    ScopedModel é baseado em um AnimatedBuilder que escuta as notificações enviadas pelo Modelo e reconstrói um InheritedWidget que, por sua vez, solicitará que todas as dependências sejam reconstruídas.

  • ScopedModelDescendente

    ScopedModelDescendant é um widget que reage às variações do modelo; ele é reconstruído quando o Modelo notifica que uma mudança ocorreu.

Como funciona?

O extrato de código a seguir imita o aplicativo "contador ", usando o modelo com escopo.

@override
Widget build(BuildContext context) {
return Scaffold(
body: ScopedModelMyModel(
model: model,
child: Column(
children: Widget[
ScopedModelDescendantMyModel(
builder: (BuildContext context, Widget child, MYModel model){
return Text('${model.counter}');
},
),
ScopedModelDescendantMyModel(
builder: (BuildContext context, Widget child, MYModel model){
return RaisedButton(
OnPressed: (){
model.increment();
},
child: Text('Increment'),
);
},
),
],
),
),
);
}

A animação a seguir mostra o que acontece quando o usuário toca no botão .

 

Explicação:

  • Quando o usuário toca no RaisedButton, o método model.increment () é invocado;
  • Esse método simplesmente incrementa o valor do contador e, em seguida, chama a API notifyListeners() , disponível desde que o Modelo implementa a classe Listenable Abstracts;
  • Este notifyListeners() é interceptado pelo AnimatedBuilder , que reconstrói seu filho InheritedWidget;
  • InheritedWidget insere a coluna e seus filhos;
  • Um dos filhos é o ScopedModelDescendant que invoca seu construtor que se refere ao modelo que agora contém um novo valor de contador .

O próximo artigo iremos tratar sobre BLoC e tratar das conclusões. 

207 Visualizações
Awesome Flutter