Скачать или смотреть How to Open External Links from Flutter Webview in a Browser or New Window

Discover how to configure Flutter Webview to open external links in a browser or a new window, ensuring a seamless user experience for your app.
---
This video is based on the question https://stackoverflow.com/q/65292270/ asked by the user 'akif' ( https://stackoverflow.com/u/13063137/ ) and on the answer https://stackoverflow.com/a/67551364/ provided by the user 'Thiago Henrique' ( https://stackoverflow.com/u/2751465/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Flutter Webview - Opening External Links in Browser or Window

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Opening External Links from Flutter Webview in a Browser or New Window

If you're developing a Flutter app using the Webview package, you might find yourself facing a common challenge: how to handle external links. Specifically, you may want links clicked by the user to open in an external browser or a new window, enhancing user experience similar to popular applications like Instagram.

In this guide, we'll walk you through a step-by-step guide on how to implement this feature seamlessly in your Flutter app.

Problem Statement

When a user clicks on an external link within a Webview, the default behavior is for the app to try to navigate within the Webview itself. This can be problematic, especially if you want to maintain your app's homepage but also allow users to explore external content easily. Let's break down how to solve this issue effectively.

Solution Overview

We will leverage both the webview_flutter package and the url_launcher package to allow external links to open in the device's default browser. Here's how to do it:

Step 1: Add Dependencies

First, you need to add the required packages to your Flutter project's pubspec.yaml file. Make sure you include both webview_flutter and url_launcher as shown below:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Implement Navigation Logic

Next, adjust your Webview implementation to include a navigation delegate that will handle whether to open a link in the Webview or redirect it to the browser. Here's an example of how your Dart code would look:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

WebView Initialization: The WebView is initialized with a starting URL — your app's homepage.

Navigation Delegate: This crucial component intercepts navigation changes:

If the URL starts with your specified homepage (https://website.com), the app allows navigation within the Webview.

If the URL is external, it calls the _launchURL method to open that link in the user's default browser.

URL Launcher: The _launchURL method checks if the URL can be launched before attempting to open it.

Conclusion

By following the steps outlined above, you can effectively enable your Flutter app to handle external links seamlessly. This not only improves the user experience but also keeps your users within the context of your app while allowing them to explore external content effortlessly.

Remember, implementing such features can greatly enhance the functionality of your application, keeping your users engaged and satisfied. Happy coding!