Using ListView to load items efficiently

[The-Redhat]

Hey I had some performance issues in my app so I looked into the Flutter Performance tab in Android Studio. Inside Rebuild Stats it shows some Performance tips, like in my case Using ListView to load items efficiently. But this tip is kind of weird because I already use a ListView.seperated. I also couldn't find any documentation about what exactly is meant. My code:

ListView.separated(
        itemBuilder: (context, index) => ImageListTile(
              onTap: () {
                controller.selectItem(state.requestData[index]);
              },
              isSelected: state.requestData[index] == selectedItem,
              news: state.requestData[index],
            ),
        itemCount: state.requestData.length,
        separatorBuilder: (_, __) => const Divider(),
      )

class ImageListTile extends StatelessWidget {
  final News news;
  final GestureTapCallback onTap;
  final bool isSelected;

  const ImageListTile({
    Key key,
    this.news,
    this.onTap,
    this.isSelected = false,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    bool isDarkTheme = Theme.of(context).brightness == Brightness.dark;
    Color selectedColor = isDarkTheme ? Colors.black12 : Colors.grey[200];

    return InkWell(
      onTap: onTap,
      child: DecoratedBox(
        decoration: BoxDecoration(
          color: isSelected ? selectedColor : Colors.transparent,
        ),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.only(right: 16.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        parseHtml(news.title ?? ''),
                        style: TextStyle(
                          fontSize: 20.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      const SizedBox(
                        height: 4,
                      ),
                      Text(
                        news.date,
                      ),
                    ],
                  ),
                ),
              ),
              news.imageUrl != null
                  ? ClipRRect(
                      borderRadius: BorderRadius.circular(2.0),
                      child: OKImage(
                        url: news.imageUrl,
                        width: 115.0,
                        height: 80.0,
                        fit: BoxFit.cover,
                        loadingWidget: Container(
                          color: Colors.grey[200],
                          width: 115.0,
                          height: 80.0,
                        ),
                      ),
                    )
                  : Container(
                      width: 100.0,
                      height: 100.0,
                    ),
            ],
          ),
        ),
      ),
    );
  }
}

Thanks for any help. And hoepfuly better docs.

[x4080]

@The-Redhat , do you have low fps when scrolling ? I have low fps problem in listview in the old devices (which when using native android app, scroll is very smooth)

[The-Redhat]

@x4080 I haven't noticed low fps while scrolling on older devices. But there were performance issues at other places, for example MaterialPageTransitions.

[darshankawar]

Hi @The-Redhat,
Can you please confirm if you still experience performance issues on latest Flutter version (eg: dev, master) ?

[The-Redhat]

No I didn't experience performance issues lately.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.