CODEWITHSUNDEEP
dartflutterflutter-web
Norbert
Norbert

Reputation: 7750

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

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

Upvotes: 56

Views: 85651

Answers (11)

Rudolf J
Rudolf J

Reputation: 517

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

Upvotes: 0

Mahesh Jamdade
Mahesh Jamdade

Reputation: 20369

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

Upvotes: 31

Pranav Dave
Pranav Dave

Reputation: 814

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

Upvotes: 1

Tinus Jackson
Tinus Jackson

Reputation: 3663

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

Upvotes: 8

Tejas Shukla
Tejas Shukla

Reputation: 144

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

Upvotes: 1

Wisdom Ekeh
Wisdom Ekeh

Reputation: 275

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

Upvotes: 0

Atul Chaudhary
Atul Chaudhary

Reputation: 1779

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.

Upvotes: 10

xuyanjun
xuyanjun

Reputation: 968

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

Upvotes: 78

psygo
psygo

Reputation: 7603

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.

Upvotes: 29

wz366
wz366

Reputation: 2940

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.

Upvotes: 15

Dariusz Bacinski
Dariusz Bacinski

Reputation: 8710

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

Upvotes: 7

Related Questions