Flutter ListView.Builder results in choppy scrolling. How do I make the scrolling smooth?

Question

I'm trying to build an app which has a list of bookings that loads. When the user scrolls through those bookings, the scrolling is very choppy. I've done the testing on all debug, profile and release modes but the issue with choppy scrolling still remains. This is true for both iOS and Android. Here's what I have already tried -

1. I've already tried using const AlwaysScrollableScrollPhysics(),
2. I've tried using without animation and with animation. The choppy scrolling is present in both the cases
3. I've tried the cached.network.image. Choppy scrolling present.

The ListView builder takes more than 16ms to build the ListTile even in profile mode

return ListView.builder(
      physics: const AlwaysScrollableScrollPhysics(),
      itemCount: widget.bookings.length,
      scrollDirection: Axis.vertical,
      itemBuilder: (context, int index) {
        var count = 10;
        var animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
            parent: animationController,
            curve: Interval((1 / count) * index, 1.0,
                curve: Curves.fastOutSlowIn)));
        animationController.forward();

        return BookingListCard(
          booking: widget.bookings[index],
          bookings: widget.bookings,
          animation: animation,
          animationController: animationController,
        );
      },
    );

AnimatedBuilder(
      animation: animationController,
      builder: (BuildContext context, Widget child) {
        return FadeTransition(
          opacity: animation,
          child: new Transform(
            transform: new Matrix4.translationValues(
                0.0, 50 * (1.0 - animation.value), 0.0),
            child: Padding(
              padding:
                  const EdgeInsets.only(left: 0, right: 0, top: 0, bottom: 0),
              child: InkWell(
                splashColor: Colors.transparent,
                onTap: () {
                  callback();
                },
                child: Padding(
                  padding: const EdgeInsets.only(top: 8.0),
                  child: Card(
                    color: AppTheme.halfWhite,
                    elevation: 0,
                    child: ListTile(
                      onTap: () {
                        Navigator.of(context)
                            .push(_createRoute(booking, booking.id));
                      },
                      leading: Container(
                        width: _size,
                        height: _size,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          image: DecorationImage(
                            image: NetworkImage(booking.guest.imageUrl),
                            fit: BoxFit.fill,
                          ),
                        ),
                      ),
                      title: Padding(
                        padding: const EdgeInsets.only(top: 10.0),
                        child: Text(
                          booking.guest.firstName,
                          style: AppTheme.title,
                        ),
                      ),
                      subtitle: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Row(
                            children: <Widget>[
                              Text(
                                '${(DateFormat("E, d MMM").format(DateTime.parse(booking.checkIn))).toUpperCase()}  ',
                                style: AppTheme.caption,
                              ),
                              Image.asset(
                                "assets/images/arrow.png",
                                width: 12,
                                height: 12,
                              ),
                              Text(
                                '  ${(DateFormat("E, d MMM").format(DateTime.parse(booking.checkOut))).toUpperCase()}',
                                style: AppTheme.caption,
                              )
                            ],
                          ),
                          Padding(
                            padding:
                                const EdgeInsets.only(top: 8.0, bottom: 8.0),
                            child: DashedDivider(
                                color: Colors.black.withOpacity(0.6),
                                dashWidth: 0.1),
                          ),
                          Text(
                            '${(booking.status).toUpperCase()}',
                            style: TextStyle(
                              color: statusColorFinder(booking.status),
                              fontFamily: AppTheme.fontName,
                              fontWeight: FontWeight.bold,
                              fontSize: 12,
                              letterSpacing: 0.4,
                              height: 0.9,
                            ),
                          ),
                        ],
                      ),
                      // trailing: Icon(Icons.more_vert),
                      trailing: booking.status == 'Pending' ? MyBullet() : null,
                      isThreeLine: false,
                    ),
                  ),
                ),
              ),
            ),
          ),
        );
      },
    );

Answer 1

Running on profile mode able to trace out the issue it was i generated dashe line using list builder rather than using contianer which was the cause for the lag replaced the following code

 DashedDivider(color: Colors.black.withOpacity(0.6),
dashWidth: 0.1)

with this one

Container(color: Colors.black45,
height: 1,
width: double.maxFinite,
)