W3Schools Learner's Blog

W3Schools Programming knowledge summary website



Flutter url_launcher plugin tutorial

The Flutter url_launcher plugin is very simple to use. Before learning how to use it, I will introduce the role and usage of the url_launcher plugin and the difference between url_launcher and webView.
Why do I need to use the url_launcher plugin?
When we chat in the whats app, if someone sends us a mobile number, when we use the finger to point to the mobile number, the whats app will pop up the default phone dialing interface.

If the other party sends the message, the whats app will also call our phone's default mail function to send an email.

If the other party sends us a URL, when we open the URL in the whats app, the whats app will remind us whether to open the URL using the default browser, if confirmed, it will automatically call our phone's default browser.

Some software also provides a text message send button, when we click the button, it will automatically call the phone's SMS send function.

These in the native Android and IOS development, will provide the corresponding classes to solve these problems, then in our Flutter open source framework.

How to achieve these functions? At this time, Flutter provides us with the url_launcher plugin to implement the above functions. The following is the rule of url_launcher:
http:<URL> , https:<URL>, e.g. http://flutter.ioOpen URL in the default browser
mailto:<email address>?subject=<subject>&body=<body>, e.g. mailto:smith@example.org?subject=News&body=New%20pluginCreate email to <email address> in the default email app
tel:<phone number>, e.g. tel:+1 555 010 999Make a phone call to <phone number> using the default phone app
sms:<phone number>, e.g. sms:5550101234Send an SMS message to <phone number> using the default messaging app
How do I add the url_launcher plugin to our Flutter project?
First, you need to add the url_launcher plugin's dependency "url_launcher: ^3.0.2" to the dependencies element of our project's "pubspec.yaml" configuration file, as follows:
The complete code is as follows:
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

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

_launchURL() async {
  const url = 'https://flutter.io';
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
At the top, there is a URL rule. If I want to call a mobile phone, we can change const url = 'https://flutter.io'; to const url = 'tel://18620145489';
The difference between url_launcher and webView
The url_launcher plugin is used to evoke the default application of the mobile phone system, and to browse the web, send text messages, make phone calls, all work outside the app, and webview opens the web page inside the app, which is equivalent to the browser built into the app.

No comments:

Post a Comment

Note: only a member of this blog may post a comment.