“

Last week, I had to review for the final exam. Fortunately, there are only three exams and it is not difficult to review. I feel I can pass the exam firmly. I went back to school this Sunday and could not go out of school again due to the rebound of the epidemic, so I felt I had more time to learn the knowledge system of FLUTTER. The Build of the Flutter development environment was actually completed after installing demo on the phone last week. In the process of using demo in the past, what impressed me most was the thermal reloading of Flutter. There is no need to wait for a long time to install APK package. The modification result will be directly displayed on the mobile phone interface. This interaction process is just too developer-friendly (especially since the Android development board is so slow these days that it’s a waste of time to wait until it’s installed).

Creation of dynamic lists

Anyway, the official Flutter tutorial teaches you how to write your first Flutter application after creating a default app. After seeing the official effect to come out, in fact, there is a general framework in mind, in fact, is the Android listView+ custom listAdapter can be implemented. After starting the code step by step in the official tutorial, I found that Dart language adopted by Flutter does a better job in structuring than Java. However, learning the object-oriented programming thought of Java also plays a good role in standardizing Dart code writing. For example, in the official code, we first define a State class RandomWordsState. I think the so-called State class is similar to the native Android component type that can interact with each other. It can have multiple component states, such as the State when clicked. The usual.setonClickListener () method defines what needs to be done in this state (native Android). In this case provided by Flutter, we call the bilder() method of listView, where we can create styles for the list, such as adding a separator line, the generated font style, and defining 10 random word pairs to be added to the list when the current list drops to the bottom and all the random word pairs are used up. The specific code is as follows:

class RandomWordsState extends State<RandomWords>{
  final _suggestions=<WordPair>[];// Create a suggestions list to hold suggested words
  final _biggerFont=const TextStyle(fontSize: 18.0);// Create a biggerFont variable to increase the font size
  @override
  Widget build(BuildContext context) {
    // The following two actions call the word library directly and are deprecated
   //final wordPair=new WordPair.random(); // This method generates the word by moving the generated word from the Myapp class to RandomWordState
   //return new Text(wordPair.asPascalCase); // Return the word
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Word list"),// Title of the interface (Appbar)
      ),
      body: __buildSuggestions(),// Interface layout
    );
  }
  Widget __buildSuggestions(){
    return new ListView.builder(
        padding: const EdgeInsets.all(16.0),ItemBuilder is called once for each random word, and the word is added to the ListTile row
                                            // For even rows, this function adds a ListTile row to the word
                                            // For an odd number of lines, the function adds a divider to separate adjacent pairs of words
        itemBuilder: (context,i){
          if(i.isOdd) return new Divider();// Before each column, add a 1 pixel high splitter widget
          final index=i ~/ 2;// The syntax "I ~/ 2" means I divided by 2, but the return value is a downward integer
          if(index >= _suggestions.length){// If it is the last word in the suggested list
          _suggestions.addAll(generateWordPairs().take(10)); // Generate 10 word pairs and add them to the suggested list
          }
          return _buildRow(_suggestions[index]);//_buildRow() is used to display each new word pair in the ListTile}); } Widget _buildRow(WordPair pair){return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,// The font style of the text)); }Copy the code

Managing the generated font styles is done by _buildRow(). Note that Dart recognizes variables that begin with _ as private, so be careful when naming them. Once this class is defined, we also need to use a StatefulWidget class to accept it. The main purpose of this class is to create a State class. However, the statefulWidget itself is immutable. What can change is the wrapped State class, the RandomWordsState class in this case. The specific code is as follows:

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

Once these two classes are defined, we run the program and find that it doesn’t work as we did. That’s because our Dart entry is the main() function, which is MyApp(), so we’ll add our StatefulWidget class to MyApp(). MyApp() is a StatelessWidget class, so you can only add StatelessWidget classes to MyApp(). The State change is implemented by the State class wrapped in the StatefulWidget class. The specific code is as follows:

class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget Build (BuildContext Context) {return MaterialApp(title: 'test 1', home:new RandomWords()// Create the interface using the build random word list class shown below); }Copy the code

Workflow:



Effect:

If there is something wrong, please correct it.