Métodos de gerenciamento de estado de flutuação: uma visão geral

O gerenciamento de estado é um dos principais recursos que uma estrutura de IU deve implementar-e bem implementar. É por esse motivo que muitos desenvolvedores acabaram criando bibliotecas de gerenciamento de estado dedicadas; a solução integrada não era suficiente para eles, ou eles queriam ajustá-la ao seu gosto.

Desde então, as estruturas de interface do usuário aprimoraram seu jogo para nivelar o campo de jogo. Suas soluções de gerenciamento de estado integradas agora podem corresponder ao desempenho de soluções externas existentes. React, por exemplo, introduziu Ganchos e Contexto para competir com React-Redux.

O mesmo aconteceu no Flutter: ele oferece vários métodos integrados para gerenciar o estado do aplicativo. Neste artigo, veremos algumas maneiras básicas, porém poderosas, de gerenciar o estado em nossos aplicativos Flutter.

Usando setState no Flutter

Se você vier do React, descobrirá que este método de gerenciamento de estado no Flutter é semelhante ao uso do gancho useState .

setState gerencia apenas o estado no widget em que foi declarado-assim como no React, em que o gancho useState gerencia o estado local apenas no componente em que foi criado. Este tipo de gerenciamento de estado é denominado e estado temporário . Aqui, este estado é controlado usando StatefulWidget e o método setState () .

Usando o próprio widget para gerenciar o estado

Vamos verificar alguns exemplos de como o setState funciona criando um aplicativo de contador simples. O aplicativo terá um número de contador que podemos aumentar e diminuir clicando nos botões.

Primeiro, crie o scaffold de um projeto Flutter executando o seguinte comando:

 vibração criar meuaplicativo

Isso cria uma pasta de projeto Flutter com o nome myapp . Agora vamos executar o projeto em um servidor:

 vibração execute meu aplicativo

Em nossa pasta de projeto, devemos ver um arquivo main.dart . Este é o arquivo principal do aplicativo Flutter. Limpe o conteúdo do arquivo e adicione o código abaixo:

 import'package: flutter/material.dart';
void main () { runApp (MyApp ());
}
class MyApp extends StatelessWidget { @sobrepor Construção de widget (contexto BuildContext) { return MaterialApp ( título:'Demonstração do Flutter', tema: ThemeData ( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), casa: Scaffold ( appBar: AppBar ( título: Texto ("Demonstração de gerenciamento de estado"), ), body: CounterPage (title:'Flutter Demo')), ); }
}

Tudo no Flutter é um widget. MyApp é o widget de entrada/raiz de nosso aplicativo. No prop body , observe que estamos renderizando um widget CounterPage . Este é um widget com estado que estende a classe StatefulWidget .

StatefulWidgets são usados ​​para gerenciar estados locais em widgets. Eles criam um objeto State associado e também contêm variáveis ​​imutáveis.

Aqui está um exemplo:

 class NotificationCounter extends StatefulWidget { nome final da string; NotificationCounter ({this.name}); @sobrepor _NotificationCounterState createState ()=& amp; gt; _NotificationCounterState ();
}

A variável name acima é uma variável imutável. StatefulWidget contém apenas variáveis ​​imutáveis ​​e o objeto State .

Vamos ver nosso código CounterPage :

 class CounterPage extends StatefulWidget { CounterPage ({Key key, this.title}): super (key: key); título final da string; @sobrepor CounterPageState createState ()=& amp; gt; CounterPageState ();
}

O método createState cria um objeto de CounterPageState e o retorna. O método createState é chamado quando o widget é construído.

Vamos ver o código para CounterPageState :

 a classe CounterPageState estende State & amp; lt; CounterPage & amp; gt; { int _contador=0; void _incrementCounter () { setState (() { _counter ++; }); } @sobrepor Construção de widget (contexto BuildContext) { return Scaffold ( appBar: AppBar ( título: Texto (widget.title), ), corpo: Centro ( filho: coluna ( mainAxisAlignment: MainAxisAlignment.center, filhos: & amp; lt; Widget & amp; gt; [ Fileira( mainAxisAlignment: MainAxisAlignment.center, crianças: [ Texto( 'Balcão:', style: Theme.of (context).textTheme.headline4, ), Texto( '$ _counter', style: Theme.of (context).textTheme.headline4, ), ], ), FlatButton ( cor: Colors.orange, child: Text ('Increment Counter', style: TextStyle (color: Colors.white)), onPressed: _incrementCounter, ) ], ), ) ); }
}

CounterPageState tem uma variável mutável _counter , que armazena o número do contador e pode ser alterada durante a vida útil do widget.

O método build é chamado quando o widget deve ser construído. Ele retorna a IU do widget e appBar -> title define o que será exibido na barra de aplicativos da página. O corpo define a IU do corpo do widget.

Geralmente, este widget exibirá o texto Contador: , a variável _counter em uma linha e um botão na próxima linha. O botão tem um evento onPressed definido, semelhante ao evento onclick em HTML.

A função _incrementCounter chama setState quando o botão é pressionado. Essa chamada de método informa ao Flutter que um estado dentro de um widget foi alterado e o widget deve ser redesenhado. O argumento da função para setState incrementa a variável _counter .

 void _incrementCounter () { setState (() { _counter ++; }); }

Portanto, sempre que clicamos no botão Incrementar contador , o _counter é incrementado e setState é chamado, o que diz ao Flutter para reconstruir o widget árvore. O método build do CounterPageState é chamado, e a árvore do widget no widget é então reconstruída e re-renderizada na IU (NB, apenas as partes que mudaram são refeitas-render).

Se lançarmos nosso aplicativo em um emulador, ele deverá se parecer com isto:

O número aumenta à medida que o botão é pressionado:

Agora vamos adicionar um botão de decremento. Este botão diminuirá o contador e refletirá a atualização na tela. Como fazemos isso?

Simples: vamos adicionar um novo FlatButton com o texto Decrement Counter e definir um evento onPressed nele. Vamos criar um método _decrementCounter e defini-lo como um manipulador para o evento onPressed .

Este método _decrementCounter diminuirá o _counter em 1 quando chamado e chamará o setState para atualizar a IU:

 a classe CounterPageState estende State & amp; lt; CounterPage & amp; gt; { int _contador=0; void _incrementCounter () { setState (() { _counter ++; }); } void _decrementCounter () { setState (() { _balcão--; }); } @sobrepor Construção de widget (contexto BuildContext) { return Scaffold ( appBar: AppBar ( título: Texto (widget.title), ), corpo: Centro ( filho: coluna ( mainAxisAlignment: MainAxisAlignment.center, filhos: & amp; lt; Widget & amp; gt; [ Fileira( mainAxisAlignment: MainAxisAlignment.center, crianças: [ Texto( 'Balcão:', style: Theme.of (context).textTheme.headline4, ), Texto( '$ _counter', style: Theme.of (context).textTheme.headline4, ), ], ), FlatButton ( cor: Colors.orange, filho: Texto ('Contador de incrementos', style: TextStyle (color: Colors.white)), onPressed: _incrementCounter, ), FlatButton ( color: Colors.red, filho: Texto ('Decrementar Contador', style: TextStyle (color: Colors.white)), onPressed: _decrementCounter, ) ], ), )); }
}

Damos ao botão de decremento um fundo vermelho e coloque-o abaixo do botão de incremento . O método _decrementCounter é definido como seu evento onPressed . O método _decrementCounter diminui _counter cada vez que é chamado e chama o setState para acionar as atualizações da IU.

Veja a demonstração abaixo:

Agora que vimos como usar o próprio widget para gerenciar o estado, vamos examinar duas outras opções: usar o widget pai para gerenciar o estado e usar um método de combinação e correspondência.

Usando um widget pai para gerenciar o estado

Nesta abordagem, o pai do widget mantém as variáveis ​​de estado e gerencia o estado. O pai informa ao widget quando atualizar, passando as variáveis ​​de estado para o widget filho. Os métodos usados ​​para alterar o estado também são passados ​​para o widget filho, que o widget pode chamar para alterar o estado e se atualizar.

Podemos reescrever nosso exemplo de contador acima para usar essa abordagem. Teremos um widget sem estado cujo trabalho é renderizar a IU. Crie uma classe Counter e preencha como abaixo:

 class Counter extends StatelessWidget { contador final; final decrementCounter; final incrementCounter; Balcão( {Chave chave, this.contador: 0, @required this.decrementCounter, @required this.incrementCounter}) : super (tecla: tecla); @sobrepor Construção de widget (contexto BuildContext) { return Scaffold ( corpo: coluna ( mainAxisAlignment: MainAxisAlignment.center, filhos: & amp; lt; Widget & amp; gt; [ Fileira( mainAxisAlignment: MainAxisAlignment.center, crianças: [ Texto( 'Balcão:', style: Theme.of (context).textTheme.headline4, ), Texto( '$ counter', style: Theme.of (context).textTheme.headline4, ), ], ), FlatButton ( cor: Colors.orange, filho: Text ('Increment Counter', style: TextStyle (color: Colors.white)), onPressed: () { incrementCounter (); }, ), FlatButton ( color: Colors.red, filho: Texto ('Decrementar contador', estilo: TextStyle (color: Colors.white)), onPressed: () { decrementCounter (); }, ) ], )); }
}

Novamente, este é um widget sem estado, portanto, não tem estado; ele apenas renderiza o que é passado para ele.

Observe que movemos o trabalho de renderização do contador para este widget. O contador é passado para ele via this.counter , e as funções de decremento e incremento via this.decrementCounter e this.incrementCounter , respectivamente. Todos eles são passados ​​do widget pai, CounterPageState .

Agora, o widget CounterPageState ficará assim:

 a classe CounterPageState estende State & amp; lt; CounterPage & amp; gt; { //... @sobrepor Construção de widget (contexto BuildContext) { return Scaffold ( //... corpo: Centro ( criança: Contador ( contador: _counter, decrementCounter: _decrementCounter, incrementCounter: _incrementCounter ) ) ); }
}

O Contador é renderizado agora por CounterPageState , a IU que ele renderizou anteriormente agora está sendo tratada pelo novo widget Contador .

Aqui, o estado _counter é passado para o widget Counter no counter prop. O widget Contador acessará o contador por meio do contador em seu corpo.

Além disso, os métodos _decrementCounter e _incrementCounter são passados ​​para o widget Contador . Eles são chamados a partir do widget Counter para atualizar o estado _counter no widget CounterPageState , o que fará com que o CounterPageState para reconstruir e renderizar novamente o Contador para exibir o estado recém-alterado.

Gerenciamento de estado mix-and-match

Nesta abordagem, o widget pai gerencia alguns estados, enquanto o widget filho gerencia outro aspecto do estado. Para demonstrar isso, faremos nosso widget Counter manter um estado, o que o torna um StatefulWidget .

Rastrearemos o número de vezes que o botão de incremento e o botão de diminuição são clicados e mantêm o número em dois estados.

Agora, vamos transformar o widget Contador em um widget com estado:

 class Counter extends StatefulWidget { contador final; final decrementCounter; final incrementCounter; Balcão( {Chave chave, this.contador: 0, @required this.decrementCounter, @required this.incrementCounter}) : super (tecla: tecla); @sobrepor CounterState createState ()=& amp; gt; CounterState ();
}

Podemos ver que o método createState retorna um objeto CounterState . Vamos dar uma olhada na classe CounterState :

 classe CounterState estende State & amp; lt; Counter & amp; gt; { var incrButtonClicked=0; var decreButtonClicked=0; @sobrepor Construção de widget (contexto BuildContext) { return Scaffold ( corpo: coluna ( mainAxisAlignment: MainAxisAlignment.center, filhos: & amp; lt; Widget & amp; gt; [ Fileira( mainAxisAlignment: MainAxisAlignment.center, crianças: [ Texto( 'Balcão:', style: Theme.of (context).textTheme.headline4, ), Texto( widget.contador.toString (), style: Theme.of (context).textTheme.headline4, ), ], ), Coluna( mainAxisAlignment: MainAxisAlignment.center, crianças: [ Texto ("'Botão de incremento'clicado $ incrButtonClicked times"), Texto ("'Botão de redução'clicado $ decreButtonClicked vezes") ], ), FlatButton ( cor: Colors.orange, filho: Text ('Increment Counter', style: TextStyle (color: Colors.white)), onPressed: () { widget.incrementCounter (); setState (() { incrButtonClicked ++; }); }, ), FlatButton ( color: Colors.red, filho: Texto ('Decrementar contador', estilo: TextStyle (color: Colors.white)), onPressed: () { widget.decrementCounter (); setState (() { decreButtonClicked ++; }); }, ) ], )); }
}

Observe que a IU anterior do widget Contador está aqui. Adicionamos os estados incrButtonClicked e decreButtonClicked para conter o número de vezes que os botões foram pressionados. Também adicionamos um widget de Coluna para exibir widgets de Texto em colunas centralizadas no eixo principal. Esses widgets Texto exibirão o número de vezes que cada botão foi clicado.

Agora, no manipulador de eventos onPressed de cada botão, chamamos o método incrementCounter ou decrementCounter por meio do widget objeto. Usamos o objeto widget para obter acesso às variáveis ​​pai em um widget com estado. Em seguida, chamamos o método setState , que aumenta ou diminui as variáveis ​​de estado incrButtonClicked e decreButtonClicked .

 MyApp | v
CounterPage | v
DummyContainer1 | v
DummmyContainer2 | v Balcão

 MyApp | v
CounterPage | v
MyInheritedWidget | v
DummyContainer1 | v
DummmyContainer2 | v Balcão

 class CounterPage extends StatefulWidget { CounterPage ({Key key, this.title}): super (key: key); título final da string; @sobrepor CounterPageState createState ()=& amp; gt; CounterPageState (); CounterPageState estático de (contexto BuildContext) { return context.dependOnInheritedWidgetOfExactType & amp; lt; MyInheritedWidget & amp; gt; (). data; }
}

 a classe CounterPageState estende State & amp; lt; CounterPage & amp; gt; { //... @sobrepor Construção de widget (contexto BuildContext) { return Scaffold ( appBar: AppBar ( título: Texto (widget.title), ), corpo: Centro ( filho: MyInheritedWidget ( filho: DummyContainer1 (), dados: este ) ) ); }
}

 class MyInheritedWidget extends InheritedWidget { dados finais do CounterPageState; MyInheritedWidget ({ Chave chave, @required Widget filho, @required this.data, }): super (chave: chave, filho: filho); @sobrepor bool updateShouldNotify (InheritedWidget oldWidget) { return true; }
}

 class DummyContainer1 extends StatelessWidget { const DummyContainer1 ({Key key}): super (key: key); @sobrepor Construção de widget (contexto BuildContext) { return DummyContainer2 (); }
}

 class DummyContainer2 extends StatelessWidget { const DummyContainer2 ({Key key}): super (key: key); @sobrepor Construção de widget (contexto BuildContext) { return Counter (); }
}

 class Counter extends StatefulWidget { @sobrepor CounterState createState ()=& amp; gt; CounterState ();
}

 classe CounterState estende State & amp; lt; Counter & amp; gt; { var incrButtonClicked=0; var decreButtonClicked=0; var counter; Dados CounterPageState; @sobrepor void didChangeDependencies () { super.didChangeDependencies (); dados=CounterPage.of (contexto); contador=dados._contador; } @sobrepor Construção de widget (contexto BuildContext) { return Scaffold ( corpo: coluna ( mainAxisAlignment: MainAxisAlignment.center, filhos: & amp; lt; Widget & amp; gt; [ Fileira( mainAxisAlignment: MainAxisAlignment.center, crianças: [ Texto( 'Balcão:', style: Theme.of (context).textTheme.headline4, ), Texto( counter.toString (), style: Theme.of (context).textTheme.headline4, ), ], ), Coluna( mainAxisAlignment: MainAxisAlignment.center, crianças: [ Texto ("'Botão de incremento'clicado $ incrButtonClicked times"), Texto ("'Botão de redução'clicado $ decreButtonClicked vezes") ], ), FlatButton ( cor: Colors.orange, filho: Text ('Increment Counter', style: TextStyle (color: Colors.white)), onPressed: () { data._incrementCounter (); setState (() { incrButtonClicked ++; }); }, ), FlatButton ( color: Colors.red, filho: Texto ('Decrementar contador', estilo: TextStyle (color: Colors.white)), onPressed: () { data._decrementCounter (); setState (() { decreButtonClicked ++; }); }, ) ], )); }
}

 class MyInheritedModel extends InheritedModel & amp; lt; String & amp; gt; { dados finais do CounterPageState; MyInheritedModel ({ Chave chave, @required Widget filho, @required this.data, }): super (chave: chave, filho: filho); @sobrepor bool updateShouldNotify (MyInheritedModel old) { return true; } @sobrepor bool updateShouldNotifyDependent (MyInheritedModel old, Set & amp; lt; String & amp; gt; aspect) { return true; } estático MyInheritedModel de (BuildContext context, String aspect) { return InheritedModel.inheritFrom & amp; lt; MyInheritedModel & amp; gt; (contexto, aspecto: aspecto); }
}

 classe CounterState estende State & amp; lt; Counter & amp; gt; { var incrButtonClicked=0; var decreButtonClicked=0; var counter; MyInheritedModel inheritedModel; @sobrepor Construção de widget (contexto BuildContext) { inheritedModel=MyInheritedModel.of (context,""); counter=inheritedModel.data._counter; return Scaffold ( corpo: coluna ( mainAxisAlignment: MainAxisAlignment.center, filhos: & amp; lt; Widget & amp; gt; [ Fileira( mainAxisAlignment: MainAxisAlignment.center, crianças: [ Texto( 'Balcão:', style: Theme.of (context).textTheme.headline4, ), Texto( counter.toString (), style: Theme.of (context).textTheme.headline4, ), ], ), Coluna( mainAxisAlignment: MainAxisAlignment.center, crianças: [ Texto ("'Botão de incremento'clicado $ incrButtonClicked times"), Texto ("'Botão de redução'clicado $ decreButtonClicked vezes") ], ), FlatButton ( cor: Colors.orange, filho: Text('Increment Counter', style: TextStyle(color: Colors.white)), onPressed: () { inheritedModel.data._incrementCounter(); setState(() { incrButtonClicked++; }); }, ), FlatButton( color: Colors.red, child: Text('Decrement Counter', style: TextStyle(color: Colors.white)), onPressed: () { inheritedModel.data._decrementCounter(); setState(() { decreButtonClicked++; }); }, ) ], )); }
}

class Counter extends StatefulWidget { @override CounterState createState()=> CounterState();
}

class CounterPageState extends State<CounterPage> { int _counter=0; void _incrementCounter() { setState(() { _counter++; }); } void _decrementCounter() { setState(() { _counter--; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: MyInheritedModel( child: DummyContainer1(), data: this ) ) ); }
}