Keframe list smoothness optimization

This is a general-purpose fluency optimization solution that optimizes scenarios where construction causes lag, such as page transitions or complex lists scrolling quickly, by framing.

Monitoring tool from: fPS_monitor

Metrics Details: Page fluency is no longer a mystery! Debug magic out of the box, Flutter FPS detection tool

Unoptimized code

import 'package:flutter/material.dart'; class ListViewPage2 extends StatefulWidget { @override _ListViewState2 createState() => _ListViewState2(); } class _ListViewState2 extends State { List<String> goodsList = []; @override void initState() { super.initState(); for (int i = 0; i < 40; i++) { goodsList.add('${i}'); } } @override Widget build(BuildContext context) { return ListView.builder( itemCount: goodsList.length, itemBuilder: (BuildContext context, int index) { String model = goodsList[index]; return Container( height: 40, color: Colors.greenAccent, padding: EdgeInsets.only(left: 16, top: 16), child: Text(' child ListView entry $model'); }); }}Copy the code

Optimized code

import 'package:flutter/material.dart'; import 'package:keframe/frame_separate_widget.dart'; class ListViewPage extends StatefulWidget { @override _ListViewState createState() => _ListViewState(); } class _ListViewState extends State { ScrollController _scrollController = ScrollController(); bool _atEdge = false; List<String> goodsList = []; @override void initState() { super.initState(); for (int i = 0; i < 40; i++) { goodsList.add('${i}'); } } @override Widget build(BuildContext context) { return ListView.builder( itemCount: goodsList.length, itemBuilder: (context, index) { String model = goodsList[index]; return FrameSeparateWidget( index: index, placeHolder: Container( height: 40, color: Colors.greenAccent, padding: EdgeInsets.only(left: 16, top: 16), ), child: Container( height: 40, color: Colors.greenAccent, padding: EdgeInsets. Only (left: 16, top: 16), child: Text(' child ListView entry $model')); }); }}Copy the code

Effect of contrast

Before optimization

The optimized

Reference github.com/LianjiaTech…

Use the documentation github.com/LianjiaTech…

Reference juejin. Cn/user / 430969…