Playlist: Curso Grátis de FLUTTER e DART Completo
Etapa 3: adicionar um widget com estado
Os widgets sem estado são imutáveis, o que significa que suas propriedades não podem mudar. Todos os valores são finais.
Os widgets com estado mantêm o estado que pode mudar durante a vida útil do widget. A implementação de um widget com estado requer pelo menos duas classes: 1) uma classe StatefulWidget que cria uma instância de 2) uma classe State. A classe StatefulWidget é, ela mesma, imutável, mas a classe State persiste durante o tempo de vida do widget.
Nesta etapa, você adicionará um widget com estado, RandomWords, que cria sua classe State, RandomWordsState. Você usará o RandomWords como filho dentro do widget stateless existente do MyApp.
Crie uma classe de estado mínima. Adicione o seguinte à parte inferior do main.dart:
lib / main.dart (RandomWordsState)
content_copy
classe RandomWordsState estende estado MENOR RandomWords MAIOR
// TODO Adicionar o método build ()
Observe a declaração State MENOR RandomWords MAIOR . Isso indica que estamos usando a classe State genérica especializada para uso com o RandomWords. A maior parte da lógica e do estado do aplicativo reside aqui: ele mantém o estado do widget RandomWords. Essa classe salva os pares de palavras gerados, que crescem infinitamente à medida que o usuário rola e os pares de palavras favoritos (na parte 2), à medida que o usuário os adiciona ou remove da lista, alternando o ícone de coração.
RandomWordsState depende da classe RandomWords. Você vai adicionar isso em seguida.
Adicione o widget Stateful RandomWords ao main.dart. O widget RandomWords faz pouco mais além de criar sua classe State:
lib / main.dart (RandomWords)
content_copy
classe RandomWords estende StatefulWidget
@sobrepor
RandomWordsState createState () = MAIOR RandomWordsState ();
Depois de adicionar a classe state, o IDE reclama que a classe não possui um método de compilação. Em seguida, você adicionará um método básico de criação que gera os pares de palavras movendo o código de geração de palavra de MyApp para RandomWordsState.
Adicione o método build () a RandomWordsState:
lib / main.dart (RandomWordsState)
content_copy
classe RandomWordsState estende estado MENOR RandomWords MAIOR
@sobrepor
Construção de Widget (contexto BuildContext)
final wordPair = WordPair.random ();
texto de retorno (wordPair.asPascalCase);
Remova o código de geração de palavra do MyApp, fazendo as alterações mostradas no seguinte diff:
step2_use_package → step3_stateful_widget /lib/main.dart
@@ -6,7 +6,6 @@
66 class MyApp extends StatelessWidget {
77 @override
88 Construção de Widget (Contexto BuildContext)
9 – final wordPair = WordPair.random ();
109 retorno MaterialApp (
1110 título: “Welcome to Flutter”,
1211 home: Andaime (
@@ -14,8 +13,8 @@
1413 título: Texto (‘Welcome to Flutter’),
1514),
1615 corpo: Centro (
17 – criança: Texto (wordPair.asPascalCase),
16 + filho: RandomWords (),
1817),
1918),
2019);
2120
Reinicie o aplicativo. O aplicativo deve se comportar como antes, exibindo um par de palavras cada vez que você recarregar ou salvar o aplicativo.
Dica: se você vir o seguinte aviso em um recarregamento quente, considere reiniciar o aplicativo:
Recarregando…
Alguns elementos do programa foram alterados durante o recarregamento, mas não foram executados quando a vista foi reagrupada; talvez seja necessário reiniciar o aplicativo (pressionando “R”) para que as alterações tenham efeito.
Pode ser um falso positivo, mas a reinicialização garante que suas alterações sejam refletidas na interface do usuário do aplicativo.