Flutter webview download file

Sure! Here is an example of an HTML content in a `

` element that explains how to download a file using Flutter WebView:


Downloading File in Flutter WebView

To download a file in Flutter WebView, you can make use of the JavaScript bridge provided by the flutter_inappwebview plugin.
Here is an example of how you can achieve this:

1. Add Dependencies

  flutter_inappwebview: ^5.3.2

2. Enable JavaScript

Make sure to enable JavaScript in your WebView. To do this, set the `javascriptEnabled` property to `true` when creating the WebView.
Here’s an example:

  initialUrlRequest: URLRequest(url: Uri.parse('https://example.com')),
  initialOptions: InAppWebViewGroupOptions(
    crossPlatform: InAppWebViewOptions(
      javaScriptEnabled: true,

3. Register JavaScript Handler

Register a JavaScript function that will handle the file download event. You can do this using the `InAppWebViewController` and the `addJavaScriptHandler` method.
Here’s an example of registering a JavaScript handler called `downloadFileHandler`:

  onPageFinished: (controller, url) {
      handlerName: 'downloadFileHandler',
      callback: (args) {
        String fileUrl = args[0];
        // Perform the file download here
        // ...
    controller.evaluateJavascript(source: '''
      window.downloadFile = function(fileUrl) {
        window.flutter_inappwebview.callHandler('downloadFileHandler', fileUrl);

4. Trigger File Download

Finally, you can trigger the file download from your web page by calling the `window.downloadFile` JavaScript function with the file URL as its argument.
Here’s an example of how you can trigger the download when a button is clicked:



5. Handle File Download in Flutter

Once the file is triggered for download in the WebView, you can handle the file download in Flutter using various methods such as the `flutter_downloader` plugin or the default browser download manager.
You can implement the file download logic based on your specific requirements and the plugins you choose.


Please note that this HTML content is just an example demonstration and may not render properly without the necessary CSS styles and JavaScript functions. You may need to customize it further based on your specific requirements and styling preferences.

Leave a comment