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

As of url_launcher: ^6.3.1 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) } 

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.

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.

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.

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

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

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

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

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

I found that if you navigate from Flutter for web to a new browser tab, and if you then go back to the Flutter tab itself, then the widget stack is refreshed (by using the url_launcher plugin). This is unwanted behavior for me

dart:html is deprecated.

Import the "web" package (https://pub.dev/packages/web) :

import "package:web/web.dart"; void navigate(String url, {String target = "_self"}) { if (target == "_blank") { window.open(url, "_blank")?.focus(); } else { window.location.href = url; } } // In the current tab: navigate("https://stackoverflow.com/questions/ask"); // In another tab: navigate("https://stackoverflow.com/questions/ask", target: "_blank"); 

I'm new to Flutter, so here's a solution that worked in my project; it may not be the only way. I just wanted to provide my own version for new users like me.

Notes:

• This uses package:web, which replaces the now-deprecated dart:html.

• window.open(url, '_blank') attempts to open in a new tab, but if the browser blocks it (due to pop-up blockers or the Google App on iOS), it falls back to navigating in the current tab.

• Calling openUrl(answerUrl, newTab: false) opens in the same tab.

import 'package:web/web.dart' as web; // link to open const answerUrl = 'https://stackoverflow.com/questions/ask'; // function to open link in new tab or same page void openUrl(String url, {bool newTab = true}) { try { if (newTab) { // opens new tab final newWindow = web.window.open(url, '_blank'); if (newWindow == null) { // Fallback if browser blocks the popup web.window.location.href = url; } } else { // Open directly in the same tab web.window.location.href = url; } } catch (_) { // Fallback for cases like Google App on iPhone web.window.location.href = url; } } // ... passing the link to the function inside onPressed ElevatedButton( onPressed: () => openUrl(answerUrl), child: const Text("Go to questions"), )