How to load a web page in flutter Apps?

Muaaz Musthafa
Jan 20 · 2 min read

While developing apps you will want to open the website in your App itself, this can be done using url_launcher.

Let’s start….

Step 1: Add the dependencies to your pubspec.yaml under dependencies

url_launcher: ^4.0.3

Step 2: Install

You can install by clicking on packages get (on the top right-hand corner if you’re using android studio)

Or…

Use terminal

$ flutter packages get

Step 3: Import

Now import this package onto your dart code

import 'package:url_launcher/url_launcher.dart’;

Step 4: Create a button

Here I’m going to create the button using RaisedButton. In onPressed pass in _launchURL which will be created in the next Step.

RaisedButton(
onPressed: _launchURL,
child: Text('open'),
);

Step 5: Create _launchURL function

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

Step 6: Run the App

Additional Information:

In the Above mentioned way the web page is opened in you’re browser than inside your app.

To make it open inside the App use forceWebView: and set it to true in launch method.

like this…

_launchURL() async {
const url = "https://google.com";
if (await canLaunch(url)) {
await launch(url, forceWebView: true); //forceWebView
} else {
throw 'Could not launch $url';
}
}

Complete Example:

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
// url launchervoid main() {
runApp(MaterialApp(
home: Scaffold(
body: Center(
child: RaisedButton(
onPressed: _launchURL,
child: Text('open'),
),
),
),
));
}
_launchURL() async {
const url = "https://google.com";
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade