web-dev-qa-db-ja.com

Flutter-将来のビルダー：いつ使用すべきか

私は将来のビルダーをいつ使うべきか疑問に思っていました。たとえば、httpリクエストを作成してリストビューに結果を表示したい場合、ビューを開くとすぐに、将来のビルダーを使用するか、次のようにListViewBuilderをビルドする必要がありますか？

new ListView.builder(
        itemCount: _features.length,
        itemBuilder: (BuildContext context, int position) {
...stuff here...
}

さらに、リストビューを作成したくないが、円グラフなどのより複雑なものを作成したい場合は、将来のビルダーを使用する必要がありますか？

それが十分に明確であることを願っています！

dartflutterfuturebuilder
15
Little Monkey

FutureBuilder削除定型コードの一部。

ページの起動時に_fetch data from backend_を使用して、データが来るまでローダーを表示するとします。

ListBuilderのタスク：

  • 2つの状態変数がある1 .dataFromBackend 2 .isLoadingFlag
  • 起動時に_isLoadingFlag = true_を設定し、それに基づいてloaderを表示します。
  • データが到着したら、backendから取得したデータでデータを設定し、_isLoadingFlag = false_を設定します（setState内にあることは明らかです）
  • widgetの作成には_if-else_が必要です。 isLoadingFlagがtrueの場合はloaderを表示し、それ以外の場合はdataを表示します。失敗した場合は、_error message_を表示します。

FutureBuilderのタスク：

  • future Builderのfutureに非同期タスクを与える
  • connectionStateに基づいて、表示message（loading、active(streams)、done）
  • data(snapshot.hasError)に基づいてビューを表示

FutureBuilderの長所

  • _two flags_およびsetStateなし
  • リアクティブプログラミング（FutureBuilderはデータの到着時にビューを更新します）

例：

_    new FutureBuilder<String>(
        future: _fetchNetworkCall, // async work
        builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
           switch (snapshot.connectionState) {
             case ConnectionState.waiting: return new Text('Loading....');
             default:
               if (snapshot.hasError)
                  return new Text('Error: ${snapshot.error}');
               else
              return new Text('Result: ${snapshot.data}');
            }
         },
        )
_

パフォーマンスへの影響：

これを使用することによるperformanceの影響を理解するためにFutureBuilderコードを調べたところです。

  • FutureBuilderはStatefulWidgetであり、そのstate変数は__snapshot_です
  • 初期状態は_snapshot = new AsyncSnapshot<T>.withData(ConnectionState.none, widget.initialData);です

  • コンストラクターで送信するfutureをサブスクライブし、それに基づいてstateを更新しています。

    _widget.future.then<void>((T data) {
    if (_activeCallbackIdentity == callbackIdentity) {
  setState(() {
    _snapshot = new AsyncSnapshot<T>.withData(ConnectionState.done, data);
   });
 }
}, onError: (Object error) {
if (_activeCallbackIdentity == callbackIdentity) {
  setState(() {
    _snapshot = new AsyncSnapshot<T>.withError(ConnectionState.done, error);
  });
 }
});
_

したがって、FutureBuilderは、私たちが通常行うことのラッパー/ボイラープレートです。したがって、パフォーマンスへの影響はありません。

30
Dinesh Balasubramanian