Playlist: Curso Grátis de FLUTTER e DART Completo
Etapa 4: criar um ListView de rolagem infinito
Nesta etapa, você expandirá RandomWordsState para gerar e exibir uma lista de pares de palavras. Conforme o usuário rola, a lista exibida em um widget ListView cresce infinitamente. O construtor de fábrica do construtor ListView permite que você crie uma exibição de lista preguiçosamente, sob demanda.
Adicione uma lista de sugestões à classe RandomWordsState para salvar os pares de palavras sugeridos. Além disso, adicione uma variável _biggerFont para aumentar o tamanho da fonte.
lib / main.dart
content_copy
classe RandomWordsState estende estado MENOR RandomWords MAIOR
final _suggestions = MENOR WordPair MAIOR [];
final _biggerFont = const TextStyle (fontSize: 18.0);
// ···
Nota: O prefixo de um identificador com um sublinhado impõe a privacidade na linguagem Dart.
Em seguida, você adicionará uma função _buildSuggestions () à classe RandomWordsState. Este método cria o ListView que exibe o pareamento de palavras sugerido.
A classe ListView fornece uma propriedade de construtor, itemBuilder, que é um construtor de fábrica e uma função de retorno de chamada especificada como uma função anônima. Dois parâmetros são passados para a função – o BuildContext e o iterador de linha, i. O iterador começa em 0 e incrementa cada vez que a função é chamada. Ele é incrementado duas vezes para cada par de palavras sugeridas: uma para o ListTile e uma para o Divider. Esse modelo permite que a lista sugerida cresça infinitamente à medida que o usuário rola.
Adicione uma função _buildSuggestions () à classe RandomWordsState:
lib / main.dart (_buildSuggestions)
content_copy
Widget _buildSuggestions ()
retornar ListView.builder (
preenchimento: const EdgeInsets.all (16.0),
itemBuilder: / * 1 * / (contexto, i)
if (i.isOdd) retorna Divider (); / * 2 * /
índice final = i ~ / 2; / * 3 * /
if (index MAIOR = _suggestions.length)
_suggestions.addAll (generateWordPairs (). take (10)); / * 4 * /
return _buildRow (_suggestions [index]);
);
O callback itemBuilder é chamado uma vez por pareamento de palavras sugerido e coloca cada sugestão em uma linha ListTile. Para linhas pares, a função adiciona uma linha ListTile para o pareamento de palavras. Para linhas ímpares, a função adiciona um widget de divisão para separar visualmente as entradas. Observe que o divisor pode ser difícil de ver em dispositivos menores.
Adicione um widget divisor de um pixel de altura antes de cada linha no ListView.
A expressão i ~ / 2 divide i por 2 e retorna um resultado inteiro. Por exemplo: 1, 2, 3, 4, 5 se torna 0, 1, 1, 2, 2. Isso calcula o número real de pares de palavras no ListView, menos os widgets do divisor.
Se você alcançou o final dos pares de palavras disponíveis, gere mais 10 e adicione-os à lista de sugestões.
A função _buildSuggestions () chama _buildRow () uma vez por par de palavras. Essa função exibe cada novo par em um ListTile, que permite tornar as linhas mais atraentes na próxima etapa.
Adicione uma função _buildRow () a RandomWordsState:
lib / main.dart (_buildRow)
content_copy
Widget _buildRow (par do WordPair)
return ListTile (
título: Texto (
pair.asPascalCase,
style: _biggerFont,
)
);
Na classe RandomWordsState, atualize o método build () para usar _buildSuggestions (), em vez de chamar diretamente a biblioteca de geração de palavras. (O Scaffold implementa o layout visual básico do Material Design.) Substitua o corpo do método pelo código destacado:
lib / main.dart (compilação)
content_copy
@sobrepor
Construção de Widget (contexto BuildContext)
Andaime de retorno (
appBar: AppBar (
title: Text (‘Gerador de nome de inicialização’),
)
body: _buildSuggestions (),
);
Na classe MyApp, atualize o método build () alterando o título e alterando o widget home para ser RandomWords:
step3_stateful_widget → step4_infinite_list /lib/main.dart
@@ -6,15 +6,8 @@
66 class MyApp extends StatelessWidget {
77 @override
88 Construção de Widget (Contexto BuildContext)
99 retornar MaterialApp (
10 – título: ‘Welcome to Flutter’,
11 – casa: Andaime (
10 + título: ‘Gerador de nome de inicialização’,
11 + home: RandomWords (),
12 – appBar: AppBar (
13 – título: Texto (‘Welcome to Flutter’),
14 -),
15 – corpo: Centro (
16 – criança: RandomWords (),
17 -),
18 -),
1912);
2013