为什么在我的代码中滚动浏览SliverGrid时会出现滞后

Question

以SliverGrid为代表滚动浏览SliverChildBuilderDelegate时为什么会有帧掉落？ 构建该应用程序时，我认为这是由抖动诊断工具引起的，但随后构建了发布APK，仍然存在滞后性。

这是我使用SliverGrid，FutureBuilder编写的代码。我在这里缺少一些优化的东西吗？

import 'package:flutter/material.dart';
import 'dart:async';
import '../logic/image_model.dart';
import 'package:http/http.dart' show get;
import 'dart:convert';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:transparent_image/transparent_image.dart';

import '../utils.dart';

class FreshFinds extends StatefulWidget {
  @override
  State createState() => _FreshFinds();
}

class _FreshFinds extends State<FreshFinds> {

  bool isFav = false;

  Future<Imagemodel> fetchdata(int counter) async {
    var response =
        await get('https://jsonplaceholder.typicode.com/photos/${counter + 1}');
    Imagemodel imageModel = Imagemodel.fromJSON(json.decode(response.body));
    return imageModel;
  }

  Widget buildcard({Imagemodel data, int index, placeholder: false}) {
    return new Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(7.0),
      ),
      elevation: 1.0,
      color: Colors.white,
      child: new InkWell(
        highlightColor: Colors.redAccent[200],
        splashColor: Colors.red,
        child: new Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisSize: MainAxisSize.max,
            verticalDirection: VerticalDirection.down,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(top: 2, bottom: 2, left: 5),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    CircleAvatar(
                      backgroundColor: Colors.red[500],
                      radius: 15,
                    ),
                    SizedBox(width: 10),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          "Yunik Maharjan",
                          style: TextStyle(
                              fontWeight: FontWeight.bold, fontSize: 12),
                        ),
                        Text(
                          "1 day ago",
                          style:
                              TextStyle(fontSize: 9, color: Colors.grey[600]),
                        )
                      ],
                    ),
                    SizedBox(width: 40),
                    IconButton(
                      icon: Icon(Icons.more_horiz),
                      onPressed: () {},
                    )
                  ],
                ),
              ),
              // SizedBox(height: 4),
              Padding(
                  padding:
                      EdgeInsets.only(top: 2, bottom: 2, left: 8, right: 8),
                  child: placeholder
                      ? Container(
                          height: 200,
                          color: Colors.grey[200],
                          child: SpinKitRipple(color: Colors.red),
                        )
                      : ClipRRect(
                          borderRadius: new BorderRadius.only(
                              topLeft: Radius.circular(4),
                              topRight: Radius.circular(4)),
                          child: new FadeInImage.memoryNetwork(
                            image: data.url,
                            fadeInDuration: Duration(milliseconds: 300),
                            fadeOutDuration: Duration(milliseconds: 300),
                            fadeOutCurve: Curves.easeInOutCirc,
                            fadeInCurve: Curves.easeInOutCirc,
                            placeholder: kTransparentImage,
                            fit: BoxFit.fill,
                          ))),
              Padding(
                padding: EdgeInsets.all(10),
                child: Column(
                  children: <Widget>[
                    placeholder
                        ? Container(
                            height: 20,
                            width: 200,
                            color: Colors.grey[300],
                          )
                        : SizedBox(
                            height: 20,
                            child: Text(
                              data.title,
                              maxLines: 1,
                              style: TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 12),
                            ),
                          ),
                    SizedBox(height: 3),
                    placeholder
                        ? Container(
                            height: 15,
                            width: 200,
                            color: Colors.grey[300],
                          )
                        : SizedBox(
                            height: 25,
                            child: new Text(
                              data.title,
                              maxLines: 2,
                              style: TextStyle(
                                  fontSize: 10, color: Colors.grey[700]),
                            )),
                    Padding(
                      padding: EdgeInsets.only(left: 5, right: 5),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text('RS 500'),
                          likeButton(setFav, isFav)
                        ],
                      ),
                    )
                  ],
                ),
              )
            ]),
        onTap: () {
          // _tappedCategoryCell(item.routeName);
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 9 / 14.5,
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return FutureBuilder(
            future: fetchdata(index),
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              if (!snapshot.hasData)
                return buildcard(placeholder: true);
              else
                return buildcard(data: snapshot.data, index: index);
            },
          );
        },
        childCount: 20,
      ),
    );
  }

  void setFav() {
    setState(() {
      isFav = !isFav;
    });
  }
}

Here is the screenshot of the app