Search code examples
flutterdownloadflutter-webflutter-html

How to direct download file from google drive to local in flutter web?


How can I direct download the file in flutter web? I used the anchor method to download the local file by giving the asset path, it works fine in debug mode but when I hoisted the flutter web project in GitHub pages it was downloading a .html file.

const String resume = "assets/docs/resume.pdf";

download(url) {
  html.AnchorElement anchorElement = html.AnchorElement(href: url);
  anchorElement.download = "resume";
  anchorElement.click();
}

TextButton(
                        onPressed: () => download(resume),
                        child: FittedBox(
                          child: Row(
                            children: [
                              Text(
                                "Download CV",
                                style: TextStyle(
                                  color: Theme.of(context).textTheme.bodyText1!.color,
                                ),
                              ),
                              const SizedBox(
                                width: defaultPadding / 2,
                              ),
                              SvgPicture.asset("assets/icons/download.svg")
                            ],
                          ),
                        ),
                      ),

So I tried to download the file which is in google drive by giving the file link instead of the local asset path, in this case, it just redirects and previews the file in a new tab.

But I wanted to download the file directly with just one click.


Solution

  • I have been searching for 2 days since I didn't get any direct proper answer to download files using flutter web However I found some way to make it possible.

    step1: Get a shareable link of your google file and make it public it may look like this below drive.google.com/file/d/1Q7MB6smDEFd-PzpqK-3cC2_fAZc4yaXF/view?usp=sharing

    step2: copy the unique id of your sharable link, which I highlighted in above

    step3: Replace FILEID with your unique id

    https://drive.google.com/uc?export=download&id=FILEID ---> https://drive.google.com/uc?export=download&id=1Q7MB6smDEFd-PzpqK-3cC2_fAZc4yaXF that's it direct downloadable link is ready just replace constant with above link

    const String resume = "https://drive.google.com/uc?export=download&id=1Q7MB6smDEFd-PzpqK-3cC2_fAZc4yaXF";
    
    download(url) {
      html.AnchorElement anchorElement = html.AnchorElement(href: url);
      anchorElement.download = "resume";
      anchorElement.click();
    }
    
    TextButton(
                            onPressed: () => download(resume),
                            child: FittedBox(
                              child: Row(
                                children: [
                                  Text(
                                    "Download CV",
                                    style: TextStyle(
                                      color: Theme.of(context).textTheme.bodyText1!.color,
                                    ),
                                  ),
                                  const SizedBox(
                                    width: defaultPadding / 2,
                                  ),
                                  SvgPicture.asset("assets/icons/download.svg")
                                ],
                              ),
                            ),
                          ),
    

    I referred to these pages 1) https://www.howtogeek.com/747810/how-to-make-a-direct-download-link-for-google-drive-files/ 2) https://medium.com/vijay-r/flutter-web-local-file-downloader-5cf087929bc