How do I open an external url in flutter web in new tab or in same tab

Question

I have a simple web app I have created with flutter web. I would like to know how I can open new an external url either in a new tab or in the same tab in my flutter web app. say I want to open the url https://stackoverflow.com/questions/ask

Answer 1

I think you want this — dart:js enables interoperability between Dart and JS —:

import 'dart:js' as js;

// ...

FlatButton(
  child: Text('Button'),
  onPressed: () {
    js.context.callMethod('open', ['https://stackoverflow.com/questions/ask']);
  },
)

Answer 2

One simple way is to just create a button and use dart:html's window.open() method:

import 'dart:html' as html;

// ...

html.window.open('https://stackoverflow.com/questions/ask', 'new tab');

The name parameter — which I left as 'new tab' — refers to the new tab's window name, about which you can learn more from MDN's documentation.

Answer 3

https://github.com/flutter/plugins/tree/master/packages/url_launcher/url_launcher_web

url_launcher has been the solution for android and ios, recently it added support for web.

Answer 4

As of url_launcher: ^6.1.0 The plugin has support for webOnlyWindowName property, You can declare a wrapper function below

Future<void> launch(String url, {bool isNewTab = true}) async {
    await launchUrl(
      Uri.parse(url),
      webOnlyWindowName: isNewTab ? '_blank' : '_self',
    );
  }

and use it like this

onTap:(){
   launch('https://stackoverflow.com/questions/ask', isNewTab: true)
}

Answer 5

You can use the url_launcher plugin

Then in your code

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher_string.dart';

void main() {
  runApp(Scaffold(
    body: Center(
      child: RaisedButton(
        onPressed: _launchURL,
        child: Text('Show Flutter homepage'),
      ),
    ),
  ));
}

_launchURL() async {
  const url = 'https://flutter.io';
  if (await canLaunchUrlString(url)) {
    await launchUrlString(url);
  } else {
    throw 'Could not launch $url';
  }
}

Example taken from the package site

Answer 6

Answered here https://stackoverflow.com/a/56656885/361832

Flutter Web does not support plugins (yet), so you have to use replacements from dart:html

https://api.dartlang.org/stable/2.4.0/dart-html/Window/open.html window.open(url, 'tab');

or

https://api.dartlang.org/stable/2.4.0/dart-html/Window/location.html window.location.assign(url);

Answer 7

Extending the answer of @xuyanjun which works fine when to want to open an external link from flutter web to a new tab. But if you want to open an external link to the website in the same tab in which the flutter web app is currently running.

then you can do it like this.

import 'dart:js' as js;
// ...

FlatButton(
  child: Text('Button'),
  onPressed: () {
    js.context.callMethod('open', ['https://blup.in/','_self']); //<= find explanation below
  },
)

Explanation :- dart:js package from flutter provide the functionality to call web-specific functions like open function from flutter and all the strings in the list are parameter which are passed to the function refer this.

So if you want to open new tab then not need to pass seconds parameter but if you wan to open in same tab then pass _self as second parameter.

Answer 8

You can use the below code to launch the URL in the same tab.

window.top.location.href = '<your url>'

Must import

import 'dart:html';

Answer 9

package url_launcher now has web support.

just import url_launcher_web, and url_launcher to your pubspec.yaml

import 'package:url_launcher/url_launcher.dart';
const String _url = 'https://flutter.dev';

void _launchURL()   {
   launch(_url);
} 

Answer 10

To launch URL you need to import url_launcher with latest version and you are good to launch URL through following code:

//Launch Github

_launchGithub() async {
const url = 'https://github.com/Pranav2918'; //Paste your URL string here
if (await canLaunchUrlString(url)) {
   await launchUrlString(url);
 } else {
   throw 'Could not launch $url';
  }
}

• For non string URLs:

Another approach :

final Uri _url = Uri.parse('https://flutter.dev');
 Future<void> _launchUrl() async {
  if (!await launchUrl(_url)) {
   throw 'Could not launch $_url';
  }
}

Happy Fluttering !!