Ciclo de vida dos widgets

Entender como os Widgets nascem, crescem, se reproduzem e morrem é fundamental para entender o comportamento do seu aplicativo.

Anteriormente vimos os 2 tipos de widgets e agora vamos entende o ciclo de vida de cada um deles.

Stateless

Por ser mais simples e não possui estado, não dá trabalho nenhum ao framework. Apenas é construído e pronto, permanece imutável.

Quandro criamos um Stateless widget, o Flutter executa o seu construtor e sem seguida o método build().

Ciclo de vida de um Stateless widget
class MeuWidgetImutavel extends StatelessWidget {
const MeuWidgetImutavel({Key key}) : super(key: key);
Widget build(BuildContext context) {
return Text('Eu não terei meu estado alterado');
}
}

A anatomia de um Stateless widget é esta: basicamente precisamos sobrescrever o método build() para indicarmos ao Flutter como deve ser o nosso MeuWidgetImutavel , (neste caso apenas um texto).

Não se preocupe em entender o construtor neste momento, teremos uma seção apenas para detalhá-lo, quando estudarmos Keys.

Stateful

Inicialmente, parece ser tão simples quando o Stateless widget, quando criamos nosso widget, o Flutter chama o seu construtor e em seguida o método createState().

Ciclo de vida de um Stateful widget
class MeuWidgetImutavel extends StatefulWidget {
const MeuWidgetImutavel({Key key}) : super(key: key);
_MeuWidgetImutavelState createState() => _MeuWidgetImutavelState();
}
class _MeuWidgetImutavelState extends State<MeuWidgetImutavel> {
Widget build(BuildContext context) {
return Text('Eu não terei meu estado alterado');
}
}
  • O uso do "_" torna o widget privado para o escopo da biblioteca em que ele se encontra;

  • O uso de => indica que este método executa apenas 1 função.

Mas não se engane, pois a diferença não é apenas no nome dos métodos. Lembra que ao criar um objeto do tipo State, um Stateful widget ganha poderes mutáveis?! Então, é dentro dele que a mágica acontece.

Nosso MeuWidgetImutavel ao ser construído pelo framework, executa o método createState() (linha 5) e este por sua vez, executa apenas 1 função, que é instanciar _MeuWidgetImutavelState. Ele é um filho de State, logo, herda algumas características e comportamentos (linha 8).

Vamos analisar com calma o ciclo de vida de um objeto State.

Pode parecer complicado, porém é mais simples do que você imagina. Todo este ciclo é necessário para que o método setState() cumpra o seu papel, que é notificar nosso widget que ele precisa ser reconstruído (ter seu método build() executado novamente).

Abordaremos apenas os métodos nas caixas em verde escuro. As caixas em verde claro tratam de estados de um State. Não é o nosso foco neste momento. Apenas entender o ciclo de vida dele já é suficiente.

initState: Chamado apenas 1 única vez. Quando o widget é inserido na widget tree.

build: Chamado em diferentes situações. Sempre que o widget precisar ser reconstruído ou após o initState() ou após a função setState() e até mesmo quando o widget for removido da widget tree para ser inserido em outro ponto (isto ficará mais claro quando construirmos nosso primeiro app).

dispose: Chamado quando o widget for removido da widget tree permanentemente.

setState: Responsável por notificar nosso widget que o estado interno foi alterado. Por exemplo, ao concluir uma requisição HTTP, queremos exibir estas informações na tela. Para isso, preenchemos nossa tela com as informações recebidas e invocamos a função setState().

didUpdateConfig: Sempre que o seu widget sofrer alterações, este método é chamado e executado antes do build(). Ou seja, sempre que chamar chamar o setState(), este método é executado. Pode ser útil ao lidar com animações e/ou quando precisar ter acesso ao estado antigo do widget.

O nome deste método mudou para didUpdateWidget e o diagrama oficial ainda está desatualizado

Como vimos, cada um dos métodos acima são executados em momentos diferentes. Cada um deles possui responsabilidades e comportamentos diferentes, logo, devemos utilizá-los da maneira correta.

Ficará mais simples compreender a real função de cada um destes métodos, o que fazer em cada um deles, quando utilizar um ou outro à medida em que formos progredindo no aprendizado e tivermos novas necessidades. Não se preocupe :)