Integrating Flutter with Native Android Using ViewPager: Handling Scroll Conflicts and Engine Switching

Flutter’s high rendering performance has led many teams, including the author’s, to adopt it for hybrid app development, mixing native Android pages (such as maps) with Flutter screens inside a single ViewPager.

The initial approach uses ViewPager2 with vertical paging, creating a FlutterFragment for Flutter pages and a NativeFragment for native pages, then assembling them in the ViewPager.

Four main problems are identified:

Vertical swipe conflicts between a scrollable native page and the ViewPager.

Scroll conflicts when a Flutter page is scrollable.

Non‑scrollable Flutter pages not emitting scroll notifications, causing ViewPager to retain touch events.

Flickering when switching between adjacent Flutter pages that share the same FlutterEngine .

For problem 1, because ViewPager2 is final and cannot be subclassed, the solution rewrites the outer scrolling container in the fragment to adjust touch interception.

For problem 2, the same principle applies: the native ViewPager intercepts gestures, preventing Flutter scrolling. The article proposes using a custom NotificationListener in Flutter to monitor scroll events.

Problem 3 is solved by wrapping non‑scrollable Flutter pages with a gesture detector that manually forwards touch events to the ViewPager.

Problem 4’s flicker originates from detaching and re‑attaching the FlutterView when the same engine is used for multiple tabs. The proposed fix is to place adjacent Flutter pages inside a Flutter PageView , giving each tab its own logical page while sharing a single engine, thus avoiding engine rebinding.

The article concludes that this hybrid ViewPager approach, combined with the described conflict‑resolution techniques, has been successfully applied in the author’s PAD project, providing a stable foundation for future development.