Launch URL

The Launch URL Action lets you specify a URL that will be opened using an app supporting it. If there is more than one app that can handle the specified URL, the user will be presented with a dialog from where one of the apps can be selected.

This page will describe some common URL schemes that you can define using FlutterFlow.

Basic URL

You can trigger the Launch URL Action from any tappable component on FlutterFlow, typically they are defined as an Action of a Button or an IconButton widget.

Let's define a basic UI using FlutterFlow:

  1. Drag and drop the AppBar on the canvas.

  2. Now add a Column widget to the canvas, set its Horizontal Alignment to "0" and the Main Axis Alignment as Center.

  3. Place a Button widget inside the Column. You can set an appropriate Text to the Button and modify some of its properties as per your need.

  4. Select the Button and go to the Properties Panel (on the right), click on the Actions tab.

  5. Click + Add Action and select On Tap from the dropdown menu.

  6. Select the Action Type as Launch URL.

  7. In the URL Value Type property, select either Specify URL (to add the URL as a String) or From Variable (to use the value stored in a String variable).

  8. If using Specify URL, enter the URL that you want to use in the URL field. For example, you can enter "https://flutter.dev" to open the Flutter webpage.

  9. If using From Variable, select the Source from which to fetch the URL value. You can also specify a Default Value that will be used when the variable value is not set (i.e. null).

  10. (Optional) You can use the Set Conditional Execution property and define a condition if you want the action to run only if that condition satisfies.

The following are some common URL schemes that can be handled by an external app present on the user's device.

Open a webpage

This URL scheme for loading up a webpage can be defined in this format:

Scheme

http:<webpage URL link>

https:<webpage URL link>

Example

https://flutter.dev

Use a phone number

This URL scheme helps to handle phone numbers inside your app. Using this, you can easily initiate a phone call to the provided phone number from the user's device.

Scheme

tel:<phone-number>

Example

tel:2125551212

Compose a text message

This URL scheme lets you redirect users from your app to compose and send an SMS message to a specified phone number.

Scheme

sms:<phone_number>

Example

sms:2125551212

Create an email

This URL scheme helps you to launch an email app on the user's device. It allows you to pass the email to, subject, and body to the app so that you have these fields prefilled with details as the email app is opened.

Scheme

mailto:<email_address>?subject=<subject>&body=<body>

Example

mailto:name@example.org?subject=Welcome%20to%20FlutterFlow&body=Hey%20there

This will pass the following details to the email app:

mailto: name@example.org, subject: Welcome to FlutterFlow, body: Hey there

Code overview

You can view the code that is generated by FlutterFlow in the background by going to the Developer Menu > View Code from the Tool Bar.

NOTE: This section is for users who might want to make some additional modifications to the generated code, or want to understand the code that is generated by FlutterFlow behind the scenes.

The generated code for the Launch URL Action looks like this:

In the above code, the launchURL() method is used to pass the URL string to the url_launcher plugin for opening the URL with an appropriate app.

References

You can find some more URL schemes from the links below (some of the URL schemes are different for Android and iOS platforms):

Last updated