Curso de FLUTTER e DART - 091 - ListView com Interação em FLUTTER

Playlist: Curso Grátis de FLUTTER e DART Completo https://www.youtube.com/playlist?list=PL5EmR7zuTn_aX0pG4oWTyKKQT25Hkq2XG 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}