How Xianyu Optimized Flutter for Ultra‑Smooth Scrolling: Challenges, Tools, and Real‑World Solutions

Flutter Smoothness Optimization Challenges

Flutter is known for high performance, but the Xianyu app faces more complex list scenarios than the Flutter Gallery demo, including cards with rounded corners, dynamic layouts, and frequent activity updates. Maintaining a 16.6 ms frame budget for scrolling, especially when new cards appear, is a major challenge.

List Container and FlutterDx Component Optimization

To handle dynamic UI, Xianyu uses the self‑developed Flutter DynamicX component, which parses a DSL‑based layout file (dx) and generates a widget tree at runtime. While this provides powerful dynamic capabilities, it adds template loading and data‑binding overhead, and deeper widget hierarchies increase rendering cost.

PowerScrollView Optimizations

PowerScrollView is a custom list component built on the Sliver protocol. It adds local refresh, waterfall layout, card lifecycle events, and index‑based scrolling. Performance improvements include:

Waterfall layout with column caching and page‑based layout calculation to reduce the number of cards processed per frame.

Local refresh that reuses on‑screen cards, cutting UI thread time from ~34 ms to ~6 ms.

Card‑level frame splitting that builds placeholder widgets first and defers full widget creation to subsequent frames.

Flutter DynamicX Component Optimization

The component merges decoration and container render layers to reduce widget‑tree depth, caches DxWidgetNode and DxWidget objects, and runs heavy parsing in an isolated isolate. These changes lowered the average bad‑frame ratio from 2.21 % to 1.79 % in production A/B tests.

Performance Measurement and DevTools Extensions

Xianyu employs multiple measurement methods: a custom Flutter benchmark that records UI and raster thread timings, a screen‑recording based tool that detects frame stalls via hash comparison, and an extended devtools timeline that highlights stages exceeding 16.6 ms. Additionally, the FlutterBlockCanary library captures stack traces during stalls and detects over‑rendering by intercepting dirty element builds.

Scrolling Curve Optimization

Comparisons of Flutter's ClampingScrollSimulation and BouncingScrollSimulation with native Android RecyclerView and iOS scroll curves reveal mismatches that cause noticeable “magnet” effects and offset jumps during fast scrolls. Adjusting the curve formula or adopting a RecyclerView‑style curve reduces these artifacts.

Performance Optimization Recommendations

Key advice includes focusing on user‑perceived smoothness rather than raw FPS, monitoring both UI and raster thread costs, using appropriate tools for different scenarios, breaking heavy tasks across frames, staying up‑to‑date with Flutter engine releases, and leveraging community‑driven optimizations such as widget caching, itemExtent, selectors, and reduced saveLayer usage.