Launch Website URL in Flutter Apps

216
SHARES
8.7k
VIEWS

In this tutorial, we’ll learn how we can launch a url in flutter mobile applications. Opening urls in any mobile app is more than necessary, like sometimes you need to make an app where user can click on the authors name and author’s profile is opened the the browser. For this scenario we can use a flutter package called url_launcher.

Creating a new Flutter project

First we need to create a new Flutter Project and then we will add our plugin into the pubspec.yaml file.

$ flutter create flutter_url_launcher_app
$ cd flutter_url_launcher_app .


Adding the Plugin into Pubspec.yaml

Now open pubspec.yaml file and add the following plugin. Remember your version number can be different, currently the latest version of url_launcher is 5.2.5.

dependencies:
  flutter:
    sdk: flutter
 
  url_launcher: ^5.2.5

And after that run flutter packages get in the terminal. This command will install the url_launcher package and make it available to us for use.

Loading Website Url in Flutter

To open website url in flutter we need to add the following code into our app. I’ve created a basic flutter button, when someone taps on the button, the given website url will open in our browser. Now in your Dart code:


import 'package:flutter/material.dart'; // Importing Material Package
// Importing url_launcher Package
import 'package:url_launcher/url_launcher.dart'; 

void main() {
  runApp(Scaffold(
    body: Center(
      child: RaisedButton(
        onPressed: _launchURL,
        child: Text('Show Flutter Homepage'),
      ),
    ),
  ));
}

_launchURL() async {
  const url = 'https://flutter.dev';
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

In the above code we are opening the flutter Official website when the user clicks on the button. we’ve created a method named _launchUrl and inside this method we’ve written the code for opening the web page in the browser. Now let’s take a look at another example.

Launching Google Maps and Apple Maps in Flutter

What if you want to open Google or Apple maps? Firstly, let’s define a lat and lng for wherever we want to open.

class HomePage extends StatelessWidget {
  final String lat = "47.3230";
  final String lng = "-142.0212";
  // ...
}

We can then create a new ListTile that takes advantage of this:

ListTile(
  title: Text("Open Maps"),
  onTap: () async {
    // Here we are supplying the variables that we've created above
    final String googleMapsUrl = "comgooglemaps://?center=$lat,$lng";
    final String appleMapsUrl = "https://maps.apple.com/?q=$lat,$lng";

    if (await canLaunch(googleMapsUrl)) {
      await launch(googleMapsUrl);
    }
    if (await canLaunch(appleMapsUrl)) {
      await launch(appleMapsUrl, forceSafariVC: false);
    } else {
      throw "Couldn't launch URL";
    }
  },
),

I am sure the process was easy and straigh forward. Happy Coding 🤓

Best resources to learn Flutter

Leave a Reply

Your email address will not be published. Required fields are marked *

Trending