This programme logo

ListView is a commonly used control in development. The goal of this lesson is to achieve a wireless sliding ListView, which automatically generates 10 pieces of data whenever it slides to the bottom, so that it can never be finished.

Complete implementation code

Because the code in this section is slightly more than the code in the previous sections, we can see the code and annotate it first, then explain some doubtful and difficult points later. It will not be said that directly talking about code fragments will be a bit confused and a bit confusing.

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Startup Name Generator',
      home: RandomWords(),
    );
  }
}

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => new RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[]; // Data source for ListView
  final _biggerFont = const TextStyle(fontSize: 18.0); // font size

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(), // body is a ListView
    );
  }

  Widget _buildSuggestions() {
    return ListView.builder(
        padding: const EdgeInsets.all(16.0), // Setting padding
        itemBuilder: (context, i) {
          if (i.isOdd) return Divider(); // If it is a cardinal number, return the partition line

          final index = i ~/ 2; // Since divider also occupies a position, you need to divide it by 2 to calculate the actual index.
          // If the data source is not enough, 10 pieces of data can be generated at one time, so that the effect of infinite sliding of ListView can be achieved.
          if (index >= _suggestions.length) {
            _suggestions.addAll(generateWordPairs().take(10));
          }
          // Generate each item layout
          return _buildRow(_suggestions[index]);
        });
  }

  // Create Item for ListView
  Widget _buildRow(WordPair pair) {
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }
}

Code parsing

• Random WordsState instead returns Scaffold, whose body content is ListView returned by method _buildSuggestions().
• ListView is generated by the ListView.builder() class, where the itemBuilder property sets Item
• Note that the dividing line here is also called item. The even number positions of 0, 2, 4, 6 are the actual item, and the odd number positions of 1, 3, 5, 7 are the dividing line.
• if (i.isOdd) return Divider(); judge if it is odd, return to the partition line
• final index = i ~/ 2; is used to calculate the actual item position after dividing the dividing line, such as 0, 1, 2, 3, 4, 5 divided by 2, and the result is 0, 0, 1, 1, 2, 2, and 2. The display content is obtained from _suggestions according to the calculated index.

• Index >= _suggestions. length judges whether the data is insufficient or not. If not, 10 pieces of data are generated by generateWordPairs().take(10) and added to _suggestions.

• _ BuilRow (WordPair pair) returns a ListTile control based on the incoming WordPair, which is actually a Text control that displays the contents of WordPair.

Operation results