Example 010-ListView Scrolling-(Learning Flutter Day 3)

Web page address: Web page demo
(the web page is slower)

Reference: Original

1. Create a project

flutter create example010_listview2

2. AS opens

Three. Add dependencies, put in resource files

pubspec.yaml

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: ^1.0.2
  english_words: ^3.1.5

Four. Writing code

main.dart

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) {
    
    
    // final WordPair wordPair = new WordPair.random();  // 删掉本行
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home:RandomWords()
      // new Scaffold(
      //   appBar: new AppBar(
      //     title: new Text('Welcome to Flutter'),
      //   ),
      //   body: new Center(
      //     //child: new Text(wordPair.asPascalCase), 
      //     child: new RandomWords(),                 
      //   ),
      // ),
    );
  }
}

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

class _RandomWordsState extends State<RandomWords> {
    
    

  final List<WordPair> _suggestions = <WordPair>[];
  final TextStyle _biggerFont = const TextStyle(fontSize: 18.0);

  Widget _buildRow(WordPair pair) {
    
    
    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }

  Widget _buildSuggestions() {
    
    
    return new ListView.builder(
        padding: const EdgeInsets.all(16.0),
        itemBuilder: (BuildContext _context, int i) {
    
    
          if (i.isOdd) {
    
    
            return new Divider();
          }
          final int index = i ~/ 2;
          if (index >= _suggestions.length) {
    
    
            _suggestions.addAll(generateWordPairs().take(10));
          }
          return _buildRow(_suggestions[index]);
        }
    );
  }

  @override                                  
  Widget build(BuildContext context) {
    
    
    // final WordPair wordPair = new WordPair.random();
    // return new Text(wordPair.asPascalCase);

    return new Scaffold (                   
      appBar: new AppBar(
        title: new Text('名字生成'),
      ),
      body: _buildSuggestions(),
    );                                      

  }                                          
}

5. Debugging and running

Open the Android or iOS simulator in AS first, and click the run button.
Or run in the command line:

flutter run

6. Package the web

flutter build web

Source code

https://gitee.com/ruik2080/example-flutter