Hyperlinks In Flutter
As hyperlinks are a fundamental piece of the web stage, this is one of the main things you figure out how to carry out as a developer and to utilize as a user. Flutter being a UI structure is less associated with hyperlinks. Beyond web sees.
In this article, we will explore the Hyperlinks In Flutter. We see how to execute a demo program. We will tell you the two best ways to create hyperlinks utilizing the url_launcher package, and flutter_inappwebview package, and how to work it in your Flutter applications.
- For URL Launcher:
url_launcher | Flutter Package
Flutter plugin for launching a URL. Supports web, phone, SMS, and email schemes.pub.dev
- For Flutter InAppWebView:
flutter_inappwebview 5.8.0 | Flutter Package
A Flutter plugin allows you to add an inline webview, use a headless webview, and open an in-app browser…pub.dev
If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
Table Of Contents::
Introduction:
The below demo video shows how to create hyperlinks in Flutter and how hyperlinks will work using the url_launcher plugin and flutter_inappwebview plugin in your Flutter applications. We will show you how to create and open a link. We will create two methods, first open the link on the web browser using the url_launcher plugin, and second open the link on the bottom sheet using the flutter_inappwebview plugin. It will be shown on your device.
Demo Module::
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
url_launcher: ^6.2.3
flutter_inappwebview: ^5.8.0Step 2: Import
import 'package:url_launcher/url_launcher.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';Step 3: Run flutter packages get in the root directory of your app.
Step 4: For the Url launcher
Add the <queries> in android/app/src/main/AndroidManifest.xml:
<queries>
<intent>
<action android:name="android.intent.action.VIEW" />
<data android:scheme="https" />
</intent>
</queries>How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In the main .dart file. We will create a new class MyHomePage(). In this class, we will add the Column widget on the body part. In this widget, we will add an image and two elevated buttons. The first button was to open a link on a web browser and the other was to open a link on a ModalBottomSheet. We will define both buttons below.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/logo.png',
height: heightSize * 0.15,
),
SizedBox(
height: heightSize * 0.08,
),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
padding: EdgeInsets.only(
left: widthSize * 0.1, right: widthSize * 0.1),
textStyle:
const TextStyle(fontSize: 19, fontStyle: FontStyle.normal),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(30))),
),
child: const Text('Open in Browser'),
),
SizedBox(
height: heightSize * 0.05,
),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
padding: EdgeInsets.only(
left: widthSize * 0.1, right: widthSize * 0.1),
textStyle:
const TextStyle(fontSize: 19, fontStyle: FontStyle.normal),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(30))),
),
child: const Text('Open in ModalBottomSheet'),
),
],
),When we run the application, we ought to get the screen’s output like the underneath screen capture.
Now, we will define Open in Browser Button:
In this button, when the user taps the button, then the link opens on a default web browser using the url_launcher plugin. This button navigates a launchUrlString (‘https://flutterdevs.com/’) on the onPressed function.onPressed: () => launchUrlString(‘https://flutterdevs.com/’),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Now, we will define Open in ModalBottomSheet Button:
In this button, when the user taps the button, then the link opens on a bottom sheet using the flutter_inappwebview plugin. This button navigates a showModalBottomSheet() method on the onPressed function.
onPressed: () => showModalBottomSheet(
context: context,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
top: Radius.circular(20),
),
),
clipBehavior: Clip.antiAliasWithSaveLayer,
builder: (BuildContext context) {
return InAppWebView(
initialUrlRequest: URLRequest(
url: Uri.parse('https://flutterdevs.com/'),
),
);
},
),
In the showModalBottomSheet() method, we will add context, shape, clipBehavior, and builder. Inside the builder, we will return an InAppWebView() method. In this method, we will add our URL.
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_hyperlink_demo/splash_screen.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:url_launcher/url_launcher_string.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
useMaterial3: true,
),
home: const Splash(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
var heightSize = MediaQuery.of(context).size.height;
var widthSize = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
centerTitle: true,
automaticallyImplyLeading: false,
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/logo.png',
height: heightSize * 0.15,
),
SizedBox(
height: heightSize * 0.08,
),
ElevatedButton(
onPressed: () => launchUrlString('https://flutterdevs.com/'),
style: ElevatedButton.styleFrom(
padding: EdgeInsets.only(
left: widthSize * 0.1, right: widthSize * 0.1),
textStyle:
const TextStyle(fontSize: 19, fontStyle: FontStyle.normal),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(30))),
),
child: const Text('Open in Browser'),
),
SizedBox(
height: heightSize * 0.05,
),
ElevatedButton(
onPressed: () => showModalBottomSheet(
context: context,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
top: Radius.circular(20),
),
),
clipBehavior: Clip.antiAliasWithSaveLayer,
builder: (BuildContext context) {
return InAppWebView(
initialUrlRequest: URLRequest(
url: Uri.parse('https://flutterdevs.com/'),
),
);
},
),
style: ElevatedButton.styleFrom(
padding: EdgeInsets.only(
left: widthSize * 0.1, right: widthSize * 0.1),
textStyle:
const TextStyle(fontSize: 19, fontStyle: FontStyle.normal),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(30))),
),
child: const Text('Open in ModalBottomSheet'),
),
],
),
),
);
}
}
Conclusion:
In the article, I have explained the Hyperlinks in Flutter; you can modify this code according to your choice. This was a small introduction to the Hyperlinks in Flutter User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying Hyperlinks in your Flutter projects. We will show you what the Introduction is. Make a demo program for working on Hyperlinks using the url_launcher plugin and flutter_inappwebview pugin in your Flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I need to correct something? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally rich apps. Hire a Flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
