flutter - CustomScrollView の GridView.builder はすべての項目を読み込みます

Question

初めての Flutter アプリを作成していますが、パフォーマンスに問題があります。

CustomScrollView特にカスタム AppBar を取得するために、ヒーロー画像を含む画面があります。次に、いくつかのフィールド/フィルターを用意してGridView.builderから、このリストに 25 から 400 の要素を含めることができ、ユーザーがスクロールしているときにのみそれらを構築したいので、自分の を作成します。

しかし、確認したところ、すべての要素 (400) がすぐにビルドされ、アプリが非常に遅くなることがわかりました。

私が間違ったことを教えてください。

編集: このペーストビンでテストできます: 新しいフラッター プロジェクトにコピーして貼り付けるだけですhttps://pastebin.com/xhd9CdUp

基本的に、これは私のコードの構造です:

CustomScrollView
  SliverAppBar
  SliverPadding
    SliverChildListDelegate
      SearchField
      SizedBox
      ValueListenableBuilder // hive package
        GridView.builder
          CardWithMenuWidget(index)

そして、ここに私のコードがあります:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      body: SafeArea(
        child: LayoutBuilder(builder: (context, constraints) {
          return CustomScrollView(
            slivers: [
              SliverAppBar(
                elevation: 0,
                backgroundColor: Colors.transparent,
                expandedHeight: 300,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                  titlePadding: EdgeInsets.symmetric(vertical: 4),
                  title: ConstrainedBox(
                    constraints:
                        BoxConstraints(maxWidth: constraints.maxWidth * 0.5),
                    child: Hero(
                      tag: "extension-logo-${extension.uuid}",
                      child: CachedImage(imageUrl: extension.logoMediumUrl!),
                    ),
                  ),
                  background: Align(
                    alignment: Alignment.topCenter,
                    child: Hero(
                      tag: "extension-spotlight-${extension.uuid}",
                      child: CachedImage(
                        imageUrl: extension.spotlightMediumUrl!,
                        fit: BoxFit.fitWidth,
                        height: 240,
                        width: double.infinity,
                        alignment: Alignment.topCenter,
                      ),
                    ),
                  ),
                ),
              ),

              SliverPadding(
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                sliver: SliverList(
                  delegate: SliverChildListDelegate(
                    [
                      SearchField(
                        controller: this._searchController,
                        labelText: "Search into ${extension.name}",
                        cancelText: 'Cancel',
                      ),
                      SizedBox(height: 32),
                      // Dynamic item list
                      ValueListenableBuilder(
                        valueListenable:
                            ExtensionBox.box.listenable(keys: [_uuid]),
                        builder: (context, Box<Extension> box, child) {
                          var cardUuidList = box.get(_uuid)!.cards?.keys;
                          return _buildCardListGrid(cardUuidList);
                        },
                      ),
                      FakeBottomBarPadding(),
                    ],
                  ),
                ),
              ),
            ],
          );
        }),
      ),
    );
  }

  Widget _buildCardListGrid(cardUuidList) {
    return LoadingContainer(
      isLoading: _isSyncing,
      child: cardUuidList == null
          ? Center(
              child: Text('No data.'),
            )
          : GridView.builder(
              addAutomaticKeepAlives: true,
              shrinkWrap: true,
              physics: ScrollPhysics(),
              itemCount: cardUuidList.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 16.0,
                crossAxisSpacing: 16.0,
                childAspectRatio: CardModel.ratio,
              ),
              itemBuilder: (context, cardIndex) {
                String cardUuid = cardUuidList.elementAt(cardIndex);

                return CardWithMenuWidget(
                  uuid: cardUuid,
                );
              },
            ),
    );
  }

ありがとうございました！