Flutter: Stateless e Stateful Widgets - Lição II

Existem dois tipos principais de widget, com estado e sem estado. Aqueles que não precisam acompanhar os dados são StatelessWidgets.

Criando um StatelessWidget

Existem dois tipos principais de widget, com estado e sem estado. Aqueles que não precisam acompanhar os dados são StatelessWidgets.

"Ao escrever um aplicativo, você geralmente cria novos widgets que são subclasses de StatelessWidget ou StatefulWidget, dependendo se o widget gerencia qualquer estado. A tarefa principal de um widget é implementar uma função de compilação, que descreve o widget, em outros termos widgets de nível inferior ".

"Widget stateless é útil quando a parte da interface do usuário que você está descrevendo não depende de nada além das informações de configuração no próprio objeto e do BuildContext no qual o widget é criado. Para composições que podem mudar dinamicamente, por exemplo um estado interno controlado pelo relógio ou, dependendo de algum estado do sistema, considere o uso de StatefulWidget, salvo no caso de utilização de streams.


Veja como você faz isso:

class MyWidgetName extends StatelessWidget {

@override
Widget build(BuildContext context) {
return SomeKindOfWidget();
}
}

Vamos dividir isso:
Primeiro de tudo, criamos uma nova classe que representa o nosso Widget. Estamos "estendendo" a classe StatelessWidget, que assumirá todas as propriedades e habilidades do StatelessWidget, mas nos permitirá adicionar nossas próprias propriedades e habilidades.

Cada widget tem uma função de construção, que "descreve a parte da interface do usuário representada por esse widget". (fonte). Vamos sobrescrever a função de construção do StatefulWidget com nossa própria lógica.

Além disso, temos uma anotação @override. Uma anotação em Dart é algo que simplesmente fornece ao compilador um pouco mais de informação sobre como tratar uma determinada função ou método. 

Então isso irá "substituir" o método de compilação do StatelessWidget pai.

Em seguida, temos o parâmetro de contexto para compilação. Você vai ver isso muito em Flutter. "O framework chama este método quando este widget é inserido na árvore ..."

O que queremos dizer com "árvore"? Simplificando, qualquer tela dada no Flutter é composta de Widgets que são representados por uma estrutura parecida com uma "árvore" invertida, onde cada nó da árvore é um Widget. Por exemplo, o nó raiz da árvore pode ser a tela da tela, seu filho é talvez o contêiner principal, como uma Coluna, e esse nó Coluna tem vários ramos de árvore ou nós "filhos", como um número de Container Widgets.

Agora, o que o parâmetro de context tem a ver com isso? Bem, quando Widgets na árvore são renderizados, é necessário um BuildContext que é essencialmente "um identificador para o local de um widget na árvore de widgets". Não se preocupe muito com isso por enquanto, apenas entenda que o contexto é o que diz: "contexto" obrigatório para o seu Widget - lembre-se, este é um "curso intensivo"!

É importante observar que a compilação pode ser chamada várias vezes a qualquer momento quando o aplicativo está em execução, pois partes da "árvore" do widget são reconstruídas conforme necessário. Por exemplo, se os dados forem alterados em uma parte da árvore, talvez com base em alguma interação do usuário ou algo seja buscado em um servidor em algum lugar, e esses dados precisarem ser refletidos em um determinado Widget e em quaisquer sub-Widgets, a função build será chamada para renderizar novamente.

Vamos terminar de refatorar nosso código:

import 'package:flutter/material.dart';

class LocationDetail extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Hello, World!")),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
_section("One!", Colors.red),
_section("Two!", Colors.green),
_section("Three!", Colors.blue),
],
)
);
}

Widget _section(String title, Color color) {
return Container(
decoration: BoxDecoration(
color: color,
),
child: Text(title),
);
}
}

Pronto, por hoje é só isso.

391 Visualizações