Write your first Flutter app #2 - なんかすごいブログ

Flutterについて、公式のGet startedのPart1をテーマとし進めていきました。
前回記事はこちらです。(Part1のStep1〜3まで終了)

tanabebe.hatenablog.com

Step 4: Create an infinite scrolling ListView
あとがき
参考

リポジトリ管理するようなモノでもないのですが、完成したコードは以下に置いてあります。

Step 4: Create an infinite scrolling ListView

まずStep4の概要から説明です。
ここではFlutterでのLazy Loadのリスト作成方法について学びます。RandomWordsStateから単語の組み合わせのListViewを生成して表示していきます。ListViewをスクロールすると、ListView Widgetは無限に拡張されます。これはListView.builder()がLazy Loadを実装してくれており、必要に応じてリストビューを遅延的に構築する事が可能となっています。ロードされていないListViewまでユーザーがスクロールすると、データをロードしてリストを再レンダリングしてくれます。

1. ListViewに単語リストを表示させるための準備

ListViewに表示する文字フォントを大きくするために_biggerFontを追加します。
単語の組み合わせのリストを生成し保存するために_suggestionsを追加します。
※Dartでは_を付けることでprivateな意味を指します

class RandomWordsState extends State<RandomWords> { 
  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);
}

2. `_buildSuggestions()`関数をRandomWordsStateクラスに追加する

ここで急にプログラムのハードルが上がります。

Widget _buildSuggestions() {
  return ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: /*1*/ (context, i) {
        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]); /*5*/
      });
}

コメント部分の説明
/*1*/と/*2*/
itemBuilderが単語ペアを作成してくれています。偶数行に作成した単語ペアを配置し、奇数行の場合にはDividerを返します。よって奇数行には1pxの仕切り線が作成されることとなります。

/*3*/
単語ペアの数から、分割ウィジェットを引いた数を計算します。

/*4*/
単語のペアが終わりまで到達したら、さらに新しい単語ペアを10個作って_suggestionsに追加していきます。

/*5*/
単語のペアごとに_buildRow()を呼び出し、ListTileに新しい単語を表示します。

この処理がPart1の中では1番理解し難い所ではないでしょうか。

3. `_buildRow()`関数を追加する

単語ペアをListTileに追加して返す関数です。

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

4. RandomWordsStateで`_buildSuggestions()`を使用する

word_pairのライブラリを直接呼ぶことはせずbuild()メソッドを通し_buildSuggestions()を使用します。

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

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

これで無限に拡張されるListViewの完了です。

f:id:tanabebe:20190801032305g:plain

あとがき

Flutterでは覚悟は必要ですがWindows版やLinux版での開発も可能となっており、Flutterをモバイル用だけでなくウェブにも拡張する事は既にGoogleから発表されています。今後はDartのみでクロスプラットフォーム開発を完結出来る可能性を大いに感じています。初耳の方もこれを気に手を動かしてみてはいかがでしょう。また、今回のアプリを拡張したい場合は、CodelabsにPart2もありますので是非ともチェックしてみて下さい。

Write Your First Flutter App, part 2