Introdução
Para construir qualquer aplicativo no Flutter, devemos criar uma classe de widget, que é o bloco de construção de um aplicativo Flutter. Flutter usa widgets para criar aplicativos móveis modernos.
Os widgets no Flutter são classificados em dois tipos: widgets sem estado e widgets com estado. Tendo isso em mente, veremos quais widgets sem estado e com estado existem no Flutter e explicaremos suas diferenças.
Vamos começar com esta pergunta: Qual é o estado de um widget no Flutter?
O estado de um widget
Um estado é quando as informações de uma classe de widget são lidas de forma síncrona durante o tempo de construção-ou seja, quando o widget é exibido na tela e pode mudar se as informações forem alteradas durante sua vida útil.
O Flutter tem vários widgets integrados e todos eles são classificados em widgets com e sem estado.
Widgets sem estado
Um widget sem estado não pode alterar seu estado durante o tempo de execução de um aplicativo Flutter. Isso significa que um widget sem estado não pode ser redesenhado enquanto o aplicativo está em ação. Por esse motivo, a aparência e as propriedades permanecem inalteradas durante a vida útil do widget.
Os widgets sem estado podem ser úteis quando a parte da IU que estamos descrevendo não depende de nenhum outro widget. Exemplos de widgets sem estado são texto, ícones, botões de ícone e botões em relevo.
Este é um exemplo de widget sem estado:
class StatelessScreen extends StatelessWidget { @sobrepor Construção de widget (contexto BuildContext) { return MaterialApp ( casa: Scaffold ( appBar: AppBar ( título: Texto ('LogRockets'), backgroundColor: Colors.blueGrey [600], ), backgroundColor: Colors.white, corpo: Container (), ), ); }
}
Podemos ver que no código, o nome do widget sem estado é StatelessScreen e está substituindo o método build . O método build usa o BuildContext como parâmetro e retorna um widget.
Usamos um widget sem estado quando criamos um aplicativo que não é necessário para redesenhar um widget repetidamente. Por exemplo, quando estamos criando uma AppBar , um widget sem estado pode ser um andaime ou ícones que não precisam ser alterados.
Uma classe de widget sem estado é chamada uma vez, apenas quando é inicializada. Mesmo que uma força externa atue sobre ele, ele não será atualizado.
Sempre que o widget StatelessScreen é inicializado, o método build é chamado. Depois disso, o widget será impresso na tela.
Mas se quisermos que ele seja atualizado assim que houver uma ação, temos que fazer um widget com estado.
Widgets com estado
Um widget com estado é usado quando alguma parte da IU deve ser alterada dinamicamente durante o tempo de execução. Widgets com estado podem se redesenhar várias vezes enquanto o aplicativo está em execução.
Widgets com estado são úteis quando a parte da interface do usuário que estamos descrevendo mudanças dinamicamente. Se criarmos um widget de botão que se atualiza cada vez que um usuário clica nesse botão, esse widget tem estado.
É assim que você pode usar um widget com estado:
class StatefulScreen extends StatefulWidget { @sobrepor _StatefulScreenState createState ()=> _StatefulScreenState ();
}
classe _StatefulScreenState extends State { String title='Título original'; @sobrepor Construção de widget (contexto BuildContext) { return Column (filhos: [ Texto (título), RaisedButton ( filho: Texto ('Clique'), onPressed: () { setState (() { title='Título alterado'; }); }) ]); }
}
Criamos um campo de texto e um widget de botão.
Assim que chamarmos esse widget e pressionarmos o botão, deixamos o valor do campo de texto mudar automaticamente.
Nesse tipo de aplicativo, podemos fazer isso pela implementação de setState () . setState () é um método que é chamado dentro de classes de widget com estado. Este método altera o valor de um widget com estado cada vez que ele é chamado.
A diferença entre sem estado e com estado
Para recapitular o que ilustramos nos exemplos acima, esta tabela descreve as diferenças entre um widget sem estado e com estado:
| Widget sem estado | Widget com estado |
|---|---|
| Atualiza apenas quando é inicializado | Muda dinamicamente |
Texto, ícones e RaisedButtons |
Caixas de seleção, botões de opção e controles deslizantes |
Não tem um setState () . Ele será renderizado uma vez e não se atualizará |
Possui um setState () interno e pode renderizar novamente se os dados de entrada mudarem |
| Widget estático | Widget dinâmico |
| Não é possível atualizar durante o tempo de execução, a menos que ocorra um evento externo | Pode atualizar durante o tempo de execução com base na ação do usuário ou alterações de dados |
Observe que para os dois widgets serem criados, eles precisam do BuildContext como um parâmetro que retorna o widget.
Conclusão
Cobrimos as diferenças entre widgets com e sem estado para ajudá-lo a criar aplicativos Flutter melhores. Com os exemplos, aprendemos o que os widgets sem estado e com estado fazem e como saber qual classe é necessária para o seu caso de uso.
Agora, você pode criar uma IU melhor com widgets para diferentes casos de uso.
A postagem A diferença entre widgets sem estado e com estado no Flutter apareceu primeiro no LogRocket Blog .
