How to open Page Route in New Tab in Flutter Web
Limited Time Offer!
For Less Than the Cost of a Starbucks Coffee, Access All DevOpsSchool Videos on YouTube Unlimitedly.
Master DevOps, SRE, DevSecOps Skills!
To open a new tab or browser window in a Flutter application, you can make use of the url_launcher
package. This package allows you to launch URLs and open them in the default browser on the device.
First, make sure you have added the url_launcher
package to your pubspec.yaml
file:
dependencies:
flutter:
sdk: flutter
url_launcher: ^6.0.0
Then, you can use the url_launcher
package to open the URL in a new tab or browser window. Here’s an example of how you can achieve this:
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class MyWidget extends StatelessWidget {
final List<Map<String, dynamic>> list;
final int i;
MyWidget(this.list, this.i);
void _openUrlInBrowser() async {
var noOfBids = list[i]['no_of_bids'];
var url = 'https://www.example.com/?no_of_bids=$noOfBids';
if (await canLaunch(url)) {
await launch(url, forceSafariVC: false, forceWebView: false);
} else {
throw 'Could not launch $url';
}
}
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: _openUrlInBrowser,
child: Text('Open in New Tab'),
);
}
}
In this example, the _openUrlInBrowser
method constructs the URL with the value of 'no_of_bids'
and then uses launch
from the url_launcher
package to open the URL. The canLaunch
method is used to check if the URL can be launched, and then launch
is called with forceSafariVC
and forceWebView
set to false
to open the URL in the default browser on the device.
You can use this MyWidget
in your Flutter application by passing the list
and i
values as parameters, and it will display a button labeled “Open in New Tab” that, when pressed, will open the URL in a new tab or browser window.