第一個Flutter demo——實現無限循環列表

第一個Flutter demo（一）

參照flutter官網，實現第一個Flutter應用。第一部分：實現無限循環列表

第一部分功能介紹：

從零開始創建了一個 Flutter 應用；

1. 編寫 Dart 代碼；
2. 使用外部的第三方庫（package）；
3. 在開發過程中試用了熱重載 (hot reload)；
4. 實現了一個有狀態的 widget；
5. 創建了一個懶加載的，無限滾動的列表。

效果圖:

全部代碼都在main.dart中，
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) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: RandomWords(),
    );
  }
}

// #docregion RandomWordsState, RWS-class-only
class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);

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

  /*構造器：此方法構建顯示建議單詞對的 ListView*/
  Widget _buildSuggestions() {
    return ListView.builder(
        padding: const EdgeInsets.all(16.0),
        itemBuilder: (context, i) {
          /*1 偶數行會執行_buildRow添加單詞；奇數行會添加分割線*/
          if (i.isOdd) {
            return Divider();
          }
          /*2*/
          final index = i ~/ 2; /*3*/
          if (index >= _suggestions.length) {
            _suggestions.addAll(generateWordPairs().take(10)); /*4*/
          }
          return _buildRow(_suggestions[index]);
        });
  }

  /*每行listview樣式*/
  Widget _buildRow(WordPair pair) {
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }
}

// #docregion RandomWords
class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => RandomWordsState();
}

完整工程下載鏈接：
點擊下載