/
5
(
21
votes
)
Vimos aqui no blog a importância dos widgets para a criação de aplicativos com o Flutter, além de suas duas categorias (widgets de interface e widgets de layout). Essa categoria de widgets fornece meios para a construção de interfaces, porém, para que o app consiga “conversar” com o usuário, ele precisa ter seu estado alterado. Por isso, há dois tipos de widgets no Flutter, os widgets stateful e stateless . Neste artigo veremos cada um deles e qual a sua finalidade.
O que são estados?
Como vimos anteriormente, para que um app consiga “conversar” com o usuário, ele precisa ter seu estado alterado… Mas o que é este “estado”?
Basicamente, um estado é uma informação que é alterada em tempo de execução. Imagine que você está no app do Youtube e clica sobre o botão “like” de um vídeo. Neste momento, este botão altera a cor e incrementa em uma unidade o contador de likes, certo? Esta alteração das informações em tempo de execução é chamado de estado:
Em um app, esta alteração de estado ocorre sempre que uma informação tenha que ser alterada, seja por uma interação do usuário ou uma nova informação vinda de um servidor. Para este tipo de tela, o Flutter utiliza widgets do tipo Stateful.
Porém, nem toda tela deverá ter sua informação alterada em tempo de execução. Imagine uma tela para exibir um texto de boas vindas para o usuário. Esta tela apenas exibirá uma mensagem, não tendo seu estado alterado. Para este tipo de tela, o Flutter utiliza widgets do tipo Stateless.
Widgets Stateful
Como dito anteriormente, os widgets statefulsão responsáveis por alterar o estado de um componente durante a execução de um aplicativo sem a necessidade do redirecionamento para outra tela.
Para isso, os widgets statefulpossuem a seguinte estrutura:
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _MyAppState();
}
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Container(color: const Color(0xFFFFE306));
}
}
A classe MyAppirá retornar uma nova instância da classe MyAppStatesempre que um estado for alterado na aplicação. Este comportamento permite que um aplicativo em Flutter possa atualizar suas informações em tempo de execução sem a necessidade de um reload.
Para esta atualização de estado, o Flutter possui um método especial chamado setState(), como veremos abaixo.
Método setState()
Sempre que precisamos alterar um determinado valor em um aplicativo Flutter, devemos adicionar esta instrução no método setState(). É ele quem vai alterar o estado desta informação e atualizar a página para que o novo valor seja exibido.
Basicamente, o método setState()irá alterar o estado de uma variável e chamar o método build()para que a interface do aplicativo seja renderizada novamente:
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Primeira App"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Você pressionou o botão:',
),
Text(
'$_counter vezes',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
Sempre que o floatActionButtonfor pressionado, o método _incrementCounterserá invocado. Nele, o método setState()irá incrementar o valor da variável _countere executar o método build()para que a interface seja renderizada novamente com o novo valor a ser exibido.
Widgets Stateless
Há casos em que precisamos criar uma página apenas para exibir uma informação estática, seja uma mensagem de boas vindas, um formulário de cadastro, uma imagem, etc. Nestes casos, não há a necessidade de criar um widget Stateful, já que o estado da tela possuirá o mesmo valor em todo o seu ciclo de vida.
Nestes casos, o Flutter possibilita a criação de widgets Stateless:
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Primeira App"),
),
body: Container(
child: Text("Olá, mundo!"),
),
);
}
}
Este tipo de widget criará uma página estática apenas com o texto “Olá, mundo!”:
Widgets Stateful e Stateless
Como vimos neste artigo, é muito importante entendermos o funcionamento e o objetivo de cada tipo de widget no Flutter. Sempre que precisarmos de uma página que terá algum tipo de alteração em tempo de execução, precisamos utilizar um widget do tipo stateful. Caso precisemos de uma página que não terá seu estado alterado, o correto é utilizar um widget stateless.
Esta escolha deve ser feita com muito cuidado, já que um widget do tipo statefulconsome muito mais memória que um widget do tipo stateless.
Fonte Fagner Pinheiro
Data da Publicação Original: 21 May 2020 | 2:47 pm
Iniciamos nossas atividades em 2002, na criação de sites, lojas virtuais, site gerenciáveis, manutenção e campanhas digitais.
Desejamos proporcionar aos clientes um retorno que reflita em sua jornada de sucesso na internet com a divulgação de sua empresa ou negócio.
Atuando no mercado de desenvolvimento e criação de sites a Charles Corrêa – Soluções Web & SMS Marketing vem agregando as últimas tendências em tecnologia em design e programação, a equipe pensa sempre em transmitir a essência de sua empresa para que mais do que ser encontrada na internet ela possa realmente mostrar seus produtos e ou serviços de forma agradável e direta aos seus clientes em potencial.
