The Problem

The client required a hybrid app for internal use, designed to integrate with various web applications within the organization. These integrations needed to be dynamically updated and displayed in the Flutter app, allowing users to access essential web components and pages seamlessly.

At the time of development, WebView support in Flutter was limited, lacking some methods available in native implementations. This limitation made it challenging to incorporate the diverse web components required for the application. It necessitated a solution that could effectively bridge the gap between Flutter and existing web technologies while ensuring a smooth user experience. However, it’s worth noting that recent versions of Flutter have significantly improved WebView support, enhancing performance and functionality.

Proposed Solution

To address these challenges, we proposed utilizing WebViews to handle the dynamic aspects of the application. This approach allowed us to display web pages and components directly within the Flutter app. We implemented hybrid compositions and platform views to integrate WebViews into the Flutter framework effectively.

Key Implementation Details

• WebView Integration: By leveraging WebViews, we enabled the app to render existing web applications and components seamlessly. However, due to the lack of certain methods in Flutter's WebView compared to native implementations, we implemented our own custom solutions to fill these gaps.
• Hybrid Compositions: We adopted a hybrid composition approach to improve performance and responsiveness. This method allowed Flutter to render native UI elements alongside web content, creating a cohesive user experience.
• Platform Views: Utilizing platform views enabled us to embed WebViews directly into the Flutter widget tree. This integration facilitated smooth communication between Flutter and web components, ensuring that users could navigate between different parts of the app effortlessly.
• JavaScript Interface: To enhance interactivity, we implemented a JavaScript interface provided by Android and other platforms. This interface allowed the Flutter app to communicate with the web content, enabling dynamic updates and interactions between the two environments.

By leveraging WebViews, hybrid compositions, platform views, and a JavaScript interface, we successfully developed a hybrid app that seamlessly integrated with existing web applications. This solution provided the client with a robust internal tool that met their needs for dynamic content display while delivering a smooth user experience across platforms