• Use package open source software packages

      • Pubspec file management
      • Introduce the changed dependencies in lib/main.dart
      • Use the English Words package to generate text to replace strings

    • Add a Stateful Widget

      • Create a State class
      • Add a stateful RandomWords widget to main.dart
      • Modify MyApp to generate text code:

    • Create an infinite scrolling ListView

    • Code structure directory

You can fiddle with the Flutter controls when your Flutter project is running…

Use package open source software packages

We started with an open source package called English_words, which contains thousands of the most commonly used English words and some useful features. You can find the English_Words package at pub.dartlang.org as well as many other open source packages.

Pubspec file management

  • Pubspec files manage assets (such as images, packages, etc.) of the Flutter application. In pubspec.yaml, add english_words (version 3.1.0 or later) to the dependency list, as shown in the line shown in the comment below, taking care of alignment
dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS Style ICONS. Cupertino_icons: ^0.1.0 english_words: ^3.1.0 # added this new line, here there is a format limit, better align with the topCopy the code
  • When viewing PubSpec in the Editor view of Android Studio, click the Packages Get in the upper right corner, which will install the dependency Packages into your project. You can see the following in the console:

  • If the installation fails, check the alignment format of the dependencies you added. The IDE will automatically determine the alignment format for you, as shown in the following illustration:

Introduce the changed dependencies in lib/main.dart

The import ‘package: english_words/english_words dart “; // Add this line

.

  • As you type, Android Studio provides you with suggestions for library imports. It then renders a gray import string to let you know that the imported library is not currently in use.

Use the English Words package to generate text to replace strings

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final wordPair = new WordPair.random(); Return new MaterialApp(title: 'Welcome to Flutter', home: New Scaffold(// Uses the Scaffold class to implement the basic Material Design layout Const Text('Welcome to Flutter'),), // body: const Center(//conset means constant // child: Const Text('Hello World'), body: new Center(// replace "new" with "const". Child: New Text(wordpair.aspascalcase),),); }}Copy the code
  • If you do not change the modifier in front of Center from const to new, an error will be reported, because the child object is no longer a constant, so you can no longer use const, so you need to create new instances of Center and Text.
  • Tip: “Big camel nomenclature”, also known as upper Camel case or Pascal case, means that every word in the string (including the first word) begins with a capital letter. So upperCamelcase will become upperCamelcase.
  • If the application is running, update the running application using the hot reload button (). Each time you click hot reload or save an item, a different pair of words is randomly selected in the running application. This is because word pairs are generated within the build method. Build runs every time the MaterialApp needs to render or switch platforms in the Flutter Inspector.

Add a Stateful Widget

  • Stateless widgets are immutable, which means their properties cannot change — all values are final.
  • To implement a StatefulWidget, at least two classes were required: 1) a StatefulWidget class; 2) A State class. The StatefulWidget class itself is unchanged, but the State class is always present throughout the widget’s life cycle.
  • In this step, you add a stateful widget called RandomWords, which creates its own state class, RandomWordsState, Then you need to embed RandomWords into your existing stateless MyApp widget.

Create a State class

  • This class can be created anywhere and it doesn’t have to be in MyApp, so here it is in MyApp:
/** * Create a state class that can be created anywhere, not necessarily in MyApp. * Our sample code is placed at the bottom of MyApp. * Note the declaration of state <RandomWords>. * This indicates that we are using the State generic class specifically for RandomWords. * Most of the application's logic and state is here -- it maintains the state of the RandomWords control. * This class keeps the code generated word pairs, a list that grows as the user slides, as well as the user's favorite word pairs (Part 2), which are added or removed from the list when the user clicks on the love icon. * Rewrite the build method, which generates word pairs by moving the code from above MyApp to RandomWordsState. */ class RandomWordsState extends State<RandomWords> { @override Widget build(BuildContext context) { final WordPair wordPair=new WordPair.random(); return new Text(wordPair.asPascalCase);) ;Copy the code
  • Notice the declaration of State. This indicates that we are using the State generic class specifically for RandomWords. Most of the application’s logic and state is here — it maintains the state of the RandomWords control. This class keeps the code generated word pairs, a list that grows indefinitely as the user slides, as well as the user’s favorite word pairs (part 2), which are added or removed from the list when the user clicks on the love icon. RandomWordsState is derived from RandomWords, and we’ll create this class next

Add a stateful RandomWords widget to main.dart

  • The RandomWords widget has little more than a State class:
  • Rewrite the build method that generates word pairs by moving the code that generates them from MyApp to RandomWordsState.
/** * Add a stateful RandomWords widget to main.dart, * RandomWords Widget creates almost nothing else but the State class:  */ class RandomWords extends StatefulWidget { @override RandomWordsState createState() => new RandomWordsState(); }Copy the code

Modify MyApp to generate text code:

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final WordPair wordPair = new WordPair.random(); Return new MaterialApp(title: 'Welcome to Flutter', home: new Scaffold(appBar: new appBar (title: new appBar) New Text('Welcome to Flutter'),), body: new Center(//child: new Text(wordpair.aspascalcase), // Modify this line child: New RandomWords(), // change the cost line code),),); }}Copy the code

Create an infinite scrolling ListView

  • Extend (inherit) the RandomWordsState class to generate and display a list of word pairs. As the user scrolls, the list displayed in the ListView grows indefinitely. ListView’s builder factory constructor allows you to build a lazy-loaded ListView on demand
  • Add a _suggestions list to the RandomWordsState class to hold the suggested word pairs, and add a biggerFont variable to increase the font size
Class RandomWordsState extends State<RandomWords> {final List<WordPair> _suggestions = <WordPair>[]; Final TextStyle _biggerFont = const TextStyle(fontSize: 18.0); . }Copy the code
  • Add a _buildSuggestions() function to the RandomWordsState class, which builds a ListView that displays suggested word pairs.
  • The ListView class provides a Builder property. The itemBuilder value is an anonymous callback function that takes two arguments – BuildContext and line iterator I. The iterator starts at 0, and each time the function is called, I increments by one and is executed once for each suggested pair of words. This model allows the list of suggested word pairs to grow indefinitely as the user scrolls
/** * Add the _buildSuggestions() function to the RandomWordsState class * itemBuilder value is an anonymous callback function that takes two arguments - BuildContext and line iterator I. * The iterator starts at 0. Each time the function is called, I increments by one, and is executed once for each suggested pair of words. * This model allows the list of suggested word pairs to grow indefinitely as the user scrolls. */ Widget _buildSuggestions() { return new ListView.builder( padding: Const edgeinsets.all (16.0), // The itemBuilder is called once for each suggested word pair, and the word pair is then added to the ListTile line // on the even line, This function adds a ListTile row to the word pairs. // On odd rows, this function adds a separator widget to separate adjacent word pairs. // Note that on a small screen, the splitter line can look a bit labored. ItemBuilder: (BuildContext _content,int I){if(i.issodd){// Add a 1 pixel high Divider line before each column return const Divider(); } // The syntax "I ~/ 2" means I divided by 2, but returns an integer (rounded down) // for example: Final int index= I ~/2; final int index= I ~/2; final int index= I ~/2; Suggests.length){// suggests.length. Suggetions. AddAll (generateWordPairs().take(10))); } return _buildRow(_suggetions[index]); }); }Copy the code
  • The _buildSuggestions function calls _buildRow once for each word pair, so we create _buildRow
Widget _buildRow(WordPair pair){
    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );

  }
Copy the code
  • Update the Build method of RandomWordsState to use _buildSuggestions() instead of calling the word generator library directly
Class RandomWordsState extends State<RandomWords> {// Using the underscore prefix identifier in the Dart language forces it to be private. final List<WordPair> _suggetions = <WordPair>[]; Final TextStyle _biggerFont = const TextStyle(fontSize: 18.0); @override Widget build(BuildContext context) {return new Scaffold(appBar: new AppBar( title: const Text('Startup Name Generator'), ), body: _buildSuggestions(), ); // final WordPair wordPair=new WordPair.random(); // return new Text(wordPair.asPascalCase); }Copy the code
  • Update the build method of MyApp
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final wordPair = new WordPair.random(); Return new MaterialApp(title: 'List List under Flutter ', home: new RandomWords(), // title: 'Welcome to Flutter', // home: new Scaffold(// Uses scaffolds to implement the basic Material Design layout // appBar: new appBar (// title: Const Text('Welcome to Flutter'), //), body: const Center(// Const Text('Hello World'), // body: new Center(// //).child: New Text(wordpair.aspascalcase), // This is the new Text generation method // child: new RandomWords(), //), //); }}Copy the code
  • rendering

Code structure directory

  • For those of you who are new to Flutter, in order to make it easier to run your own demo, this is your first project after all.