Flutter UI Jank on iOS with Platform Views: Diagnosing and Fixing AdMob Performance Issues

If you’ve ever integrated an AdMob banner into your Flutter app for iOS and noticed the UI suddenly stutters—especially during scrolling or animations—you’re not alone. This frustrating phenomenon, often called “UI jank,” is a common pain point when using platform views on iOS. While banners and other native UI components are essential, they can introduce performance bottlenecks that degrade the user experience. In this post, we’ll diagnose why this happens and walk through practical strategies to smooth things out.

Why Platform Views Cause Jank on iOS

To understand the issue, we need to peek under Flutter’s hood. On iOS, Flutter traditionally runs the UI rendering on a dedicated thread. However, when you embed a native iOS view (like a UIKit component) into the Flutter hierarchy—which is exactly what happens with an AdMobBanner widget—something changes. The Flutter engine merges the platform thread with the UI thread. This architectural decision reduces complexity but introduces a critical problem: thread contention.

Now, both Flutter’s UI tasks (building widgets, painting, handling gestures) and the native platform view operations (rendering the ad, responding to its events) are competing for the same thread. When the ad network performs work—such as loading a new ad or updating its content—it can block the UI thread, causing dropped frames. This is especially noticeable in dynamic interfaces with lists, animations, or frequent rebuilds.

Diagnosing the Problem

Before applying fixes, confirm that platform views are the culprit. A simple diagnostic approach is to temporarily remove the ad banner and observe if the jank disappears. For a more technical assessment, you can use the Dart DevTools Performance view. Look for long-running tasks on the main thread that coincide with frame drops. Often, you’ll see spikes in “UI Thread” activity when the platform view is active.

Another telltale sign is that jank is most severe during interactions like scrolling a ListView that shares the screen with the banner. The combined workload of building list items and servicing the native view overwhelms the merged thread.

Actionable Strategies to Mitigate Jank

1. Isolate the Platform View with RepaintBoundary

A RepaintBoundary tells Flutter to paint the widget subtree in a separate layer. This can sometimes reduce the repaint cost of the surrounding UI when the platform view is updated. Wrap your ad widget, but note that this isn’t a silver bullet—it helps most when the ad is static and the rest of the UI is complex.

class AdBannerSection extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RepaintBoundary(
      child: SizedBox(
        width: 320,
        height: 50,
        child: AdWidget(ad: myBannerAd),
      ),
    );
  }
}

2. Minimize Rebuilds Around the Ad

Optimize your widget tree to prevent unnecessary rebuilds near the platform view. Use const constructors, const widgets, and state management that updates only the necessary parts of the UI. For example, if your screen has a scrolling list and a sticky banner at the bottom, ensure the banner isn’t rebuilt with every list item scroll.

// Instead of placing the banner inside the scrollable area,
// position it as a separate widget in a Stack or Column.
Column(
  children: [
    Expanded(
      child: MyLongListView(), // This rebuilds independently
    ),
    const AdBannerSection(), // This stays stable
  ],
);

3. Throttle Ad Interactions During High-Frequency UI Events

If your app has intense animations or rapid scrolling, consider temporarily pausing ad refreshes or interactions during those periods. You can listen to scroll controllers and ad lifecycle events to coordinate this.

ScrollController _scrollController = ScrollController();
bool _isScrolling = false;

@override
void initState() {
  super.initState();
  _scrollController.addListener(() {
    final isScrollingNow = _scrollController.position.isScrollingNotifier.value;
    if (isScrollingNow != _isScrolling) {
      _isScrolling = isScrollingNow;
      // Potentially pause ad updates while scrolling
      if (_isScrolling) {
        myBannerAd.pause();
      } else {
        myBannerAd.resume();
      }
    }
  });
}

Note: The pause() and resume() methods are illustrative; check the AdMob plugin documentation for actual methods to control ad refresh.

4. Simplify the Surrounding UI

If a screen must host a platform view, reduce the complexity of other elements on that screen. Avoid deeply nested layouts, expensive animations, or heavy widgets that rebuild frequently. Sometimes, the most effective fix is design-level optimization—keeping ad screens visually simple.

5. Consider Alternative Ad Placement

If jank persists and severely impacts UX, evaluate whether the banner must be on the same screen as the main interactive content. Could it be moved to a separate, static screen? For example, place the banner on a settings page or a dedicated “sponsor” screen instead of the primary scrolling dashboard.

Common Mistakes to Avoid

• Placing the banner inside a scrolling container: This forces the platform view to be repeatedly laid out and painted during scroll, exacerbating contention. Keep it outside scrollables when possible.
• Forgetting to dispose ad resources: Always dispose your ad objects properly to prevent memory leaks and background work that might affect performance.
• Overlooking ad network settings: Some ad networks allow configuration of refresh rates. Lower the refresh interval to reduce how often the native view does work.

Final Thoughts

Dealing with UI jank from iOS platform views requires a blend of architectural awareness and practical widget-level optimizations. While the merged thread model presents a constraint, careful design—isolating the ad, minimizing rebuilds, and simplifying UI—can restore smooth performance. Always profile before and after your changes to measure impact. By treating the platform view as a sensitive component, you can maintain both monetization and a polished user experience.