How to Download Output file In Flutter Web ?

How to Download Output file In Flutter Web ?

Sometimes when building a web application using a flutter web app that should generate a file from user data and have the option to download the output file. So in this article, we will go through how to Download Output File in Flutter Web. Before starting the article, check out the articles on HIPPA compliance for telemedicine and healthcare apps.

How to Download Output file in Flutter Web?

A good workaround is to open the hosted file in a new tab using the below code snippet

import 'dart:html' as html;

void openInANewTab(String url){

  html.window.open(url, 'PlaceholderName');
}

One way to trigger download is the adapt a common pattern used in “native” javascript, create an anchor element with the download attribute and trigger a click.

import 'dart:convert';
import 'dart:html';

main() {
  File file = // generated somewhere
  final rawData = file.readAsBytesSync();
  final content = base64Encode(rawData);
  final anchor = AnchorElement(
      href: "data:application/octet-stream;charset=utf-16le;base64,$content")
    ..setAttribute("download", "file.txt")
    ..click();
}

Simple Code for redirecting to download URL

import 'dart:html' as html;
void downloadFile(String url){
   html.AnchorElement anchorElement =  new html.AnchorElement(href: url);
   anchorElement.download = url;
   anchorElement.click();
}

you can use package url_launcher with url_launcher_web

then you can do as shown below:

launch("data:application/octet-stream;base64,${base64Encode(yourFileBytes)}")

download.dart will have a code snippet like the below:

import 'dart:convert';
// ignore: avoid_web_libraries_in_flutter
import 'dart:html';

void download(
  List<int> bytes, {
  String downloadName,
}) {
  // Encode our file in base64
  final _base64 = base64Encode(bytes);
  // Create the link with the file
  final anchor =
      AnchorElement(href: 'data:application/octet-stream;base64,$_base64')
        ..target = 'blank';
  // add the name
  if (downloadName != null) {
    anchor.download = downloadName;
  }
  // trigger download
  document.body.append(anchor);
  anchor.click();
  anchor.remove();
  return;
}

empty_download.dart:

void download(
  List<int> bytes, {
  String downloadName,
}) {
  print('I do nothing');
}

import and use this as given below:

import 'empty_download.dart'
if (dart.library.html) 'download.dart';

void main () {
  download('I am a test file'.codeUnits, // takes bytes
      downloadName: 'test.txt');
}

Conclusion:

Thanks for being with us on a Flutter Journey !!! stay Connected !!!

Also, tell us what methods you have used for this problem in the past!!

So in this article, we have been through how to Download the Output file in Flutter Web.

Keep Learning !!! Keep Fluttering !!!

Don’t forget to drop your valuable feedback in the comments right below!!! It keeps the enthusiasm going 🙂

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.