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

Ullage

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']);
  },
)

Glyptography

lib/pages/home_page.dart:2:8: Error: Not found: 'dart:js' import 'dart:js' as js; – Transduction

@AyushGupta what version of flutter are you using to help you out? I tried this it works as of flutter v1.12.1 on channel master. – Lajoie

Even i am on master channel. But now i guess url_launcher_web is available, so might not needing this. But i haven't tried – Transduction

Heres how to open in new tab or same tab js.context.callMethod('open', ['$url', isNewTab ? '_blank' : '_self']); source: w3schools.com/jsref/met_win_open.asp – Lajoie

@MaheshJamdade your url should start with https:// – Shevat

Thanks ! easy to use without install any third-party package – Mirk

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.

Abm

How to prevent this from failing if I have an Android version too? – Worldlywise

It doesn't work with the mobile browser? I vaguely remember testing it on the emulator, but I'm not sure. – Abm

My flutter application has both the web and android target, but "import 'dart:html' as html;" will not work when building the Android version. So how could I prevent that part from being compiled for the Android target? – Worldlywise

That's still strange, I thought dart:html would work an Android. My emulator is usually Android. At any rate, maybe you're gonna have to resort to conditional imports? – Abm

Yes, conditional import it is! – Worldlywise

To prevent this from failing on mobile instead of html package you can use universal_html – Dystopia

universal_html's window.open doesn't work unfortunately – Hyams

Answer 3

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)
}

Lajoie

Answer 4

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.

Endoscope

I am sorry, it does not say there how to use it. Could you please show me the code? I add import 'package:flutter/url_launcher.dart'; not even that works, there is no example – Doby

You can find documentation here pub.dev/packages/url_launcher – Endoscope

url_launcher can only open in new tabs/new window. The OP asked for "same tab" eventually. – Worldlywise

Facing problem with Android 11 – Ahlgren

@Worldlywise webOnlyWindowName:'_self', do this. – Rubella

Answer 5

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.

Memorialist

This is the correct answer! The marked as solved answer does still open in a new tab and is therefore not a complete answer to the authors question. – Weaponless

Answer 6

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

Redemption

I have tried and It does not seem to work for me on flutter web – Ullage

The _launchURL() code works. All that's needed here is to follow the instructions at github.com/flutter/plugins/tree/master/packages/url_launcher/…. Basically add the dependencies for both url_launcher and url_launcher_web in pubspec.yaml. Example: url_launcher: ^5.2.5 url_launcher_web: ^0.1.0 – Squamous

Answer 7

Answered here https://mcmap.net/q/340365/-how-do-i-link-http-url-to-flutter-web

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);

Sundial

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';

Trichomonad

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);
} 

Heliostat

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 !!

Quadrivial