091 – ListView com Interação em FLUTTER

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