Hello friends, This is our another tutorial on url_launcher 6.0.20 pub package of Flutter. This tutorial is so much helpful in my other project, So I thought why not make more tutorials on it. As we all know Hyperlinking is one of the most usable thing in web development and no website can make without hyperlinking. So in flutter application sometimes we need to open a Link from our flutter app to mobile device default browser, Same as hyperlink. This can be possible via url_launcher package of flutter. So in this tutorial we would learn about Open Link URL Hyperlink in Flutter App to Default Browser.
Contents in this project Open Link URL Hyperlink in Flutter App to Default Browser :-
1. First of all we have to install the url_launcher package in our flutter application. So open your flutter project Root directory in CMD or Terminal and execute below command to install it.
|
1 |
flutter pub add url_launcher |
Screenshot Before Installing :-
2. Now we have add https Web intent in our AndroidManifest.xml file. So open Your_Flutter_Project -> android -> app -> src -> main -> AndroidManifest.xml file. and put below Intent code inside it.
|
1 2 3 4 5 6 7 |
<queries> <!-- If your app opens https URLs --> <intent> <action android:name="android.intent.action.VIEW" /> <data android:scheme="https" /> </intent> <queries> |
Source Code of my AndroidManifest.xml file after adding above code :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.app2"> <application android:label="app2" android:name="${applicationName}" android:icon="@mipmap/ic_launcher"> <activity android:name=".MainActivity" android:exported="true" android:launchMode="singleTop" android:theme="@style/LaunchTheme" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize"> <!-- Specifies an Android theme to apply to this Activity as soon as the Android process has started. This theme is visible to the user while the Flutter UI initializes. After that, this theme continues to determine the Window background behind the Flutter UI. --> <meta-data android:name="io.flutter.embedding.android.NormalTheme" android:resource="@style/NormalTheme" /> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> <!-- Don't delete the meta-data below. This is used by the Flutter tool to generate GeneratedPluginRegistrant.java --> <meta-data android:name="flutterEmbedding" android:value="2" /> </application> <queries> <intent> <action android:name="android.intent.action.VIEW" /> <data android:scheme="https" /> </intent> </queries> </manifest> |
3. Open your project’s main.dart file and import material.dart, url_launcher.dart and gestures.dart package.
|
1 2 3 |
import 'package:flutter/material.dart'; import 'package:url_launcher/url_launcher.dart'; import 'package:flutter/gestures.dart'; |
4. Creating void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
5. Creating a Constant String variable named as _url. We would assing our HTTPS URL here.
|
1 |
const String _url = 'https://flutter-examples.com'; |
6. Creating our main class MyApp extends StatelessWidget.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
7. Creating a ASYNC type of function named as _launchURL(). In this function we would simply open the given string URL in device default web browser.
|
1 2 3 |
void _launchURL() async { if (!await launch(_url)) throw 'Could not launch $_url'; } |
8. Creating Widget Build area -> SafeArea -> Center -> RichText -> TextSpan widget to make text looks like Hyperlink text in flutter.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text("Open Hyperlink From Flutter App"), ), body: SafeArea( child: Center( child: RichText( textAlign: TextAlign.center, text: TextSpan(children: [ const TextSpan( text: "To Learn More About Flutter ", style: TextStyle(fontSize: 20, color: Colors.black), ), TextSpan( text: "Click Here", style: const TextStyle( fontSize: 20, color: Colors.blue, decoration: TextDecoration.underline, ), recognizer: TapGestureRecognizer() ..onTap = () async { _launchURL(); }), ]))), )), ); } |
9. Complete source code for main.dart file :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
import 'package:flutter/material.dart'; import 'package:url_launcher/url_launcher.dart'; import 'package:flutter/gestures.dart'; void main() => runApp(MyApp()); const String _url = 'https://flutter-examples.com'; class MyApp extends StatelessWidget { void _launchURL() async { if (!await launch(_url)) throw 'Could not launch $_url'; } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text("Open Hyperlink From Flutter App"), ), body: SafeArea( child: Center( child: RichText( textAlign: TextAlign.center, text: TextSpan(children: [ const TextSpan( text: "To Learn More About Flutter ", style: TextStyle(fontSize: 20, color: Colors.black), ), TextSpan( text: "Click Here", style: const TextStyle( fontSize: 20, color: Colors.blue, decoration: TextDecoration.underline, ), recognizer: TapGestureRecognizer() ..onTap = () async { _launchURL(); }), ]))), )), ); } } |
Screenshots :-
