sábado, 12 de outubro de 2019

Flutter: Stateless ou Statefull Widget?

Widgets são classes. Uma classe quando estende outra, recebe todos os seus atributos. Quando voce cria uma classe e estende um StatelessWidget, você está criando uma classe sem estado. O que é estado? De forma simples e não técnica, é a capacidade de uma classe de manter sua parte lógica ainda que a sua UI seja reconstruida. A mesma lógica que você usa para variáveis, que é como uma caixa que armazena dados, o estado vai armazenar o estado propriamente dito em que sua classe se encontra. Stateless não tem estado, e ele tem um método que é obrigatório você sobrescrever: o método build. Build como o nome já sugere, ele constrói o widget que é retornado dentro dele. Você nem precisaria de uma classe Stateless para isso, mas no Flutter usamos Stateless pela capacidade de criar um construtor e guardar ele em cachê (numa const). O StatelessWidget faz apenas uma coisa, ele pega a árvore de widget que está à frente do "Return" e repassa ao seu pai. Já o StatefulWidget é diferente. Ele não apenas repassa um widget, ele na verdade não faz isso. O StatefulWidget apenas cria um estado. Você então cria uma outra classe, e estende esse estado criado, e dentro dessa nova classe, você vai inserir seu widget. Isso permite que você armazene um estado da aplicação, e reconstrua apenas a UI (o que está dentro do método build da classe State). A classe State (e não a Stateful, a classe Stateful só serve pra criar um estado, não confunda) tem o método initState que é chamado juntamente com o método build, o método setState que reconstrói toda UI que está dentro do build, o dispose que é chamado quando que sua classe sair da árvore de widgets (quando você sai daquela screen, por exemplo), e mais alguns outros métodos não muitos usados, que não vou explicar aqui pra não me extender muito. No seu exemplo, vejo que há um erro porque você chamou a classe State sem ter criado o estado ainda. É preciso criar um Stateful, e criar o estado. Ae você cria uma classe e estende o estado que você criou. E finalmente: pra que serve o estado? Digamos que você tenha uma variável com um nome: var nome = "João"; E dentro do método build, você tenha um Text com essa variável: Text(name); Digamos que mais pra baixo você precise alterar o texto pra Pedro, você então faz: name= "Pedro"; Você vai perceber que você mudou a variável, mas o texto continua "João". E como você vai fazer isso? Caminho 1 e o que todo iniciante usa: setState. Como você fez a alteração em uma classe State, a chamada do setState que vai reconstruir a UI, não faz a sua variável name ser perdida, porque ela tá dentro da classe State que é permanente até que o dispose seja chamado. Então você chama o setState, e tudo que está dentro de build é reconstruido, e então o Text vai ser construído com a variável atualizada, ou seja, Text vai ser Pedro agora. O segundo caminho é usando uma lib que eu criei, o Easy, que armazena as variáveis numa Store, dando um UP no desempenho do app, pois ele só recontruirá o texto, e não sua classe inteira. Acredito que tenha esmiuçado máximo como funciona o framework. Bons estudos!

Nenhum comentário:

Postar um comentário

O que significa o erro "Execução de scripts foi desabilitada neste sistema"?

  O que significa o erro "Execução de scripts foi desabilitada neste sistema"? Execute Set-ExecutionPolicy -ExecutionPolicy Remote...