May

Flutter Linkify

Flutter Linkify:

In this tutorial, we are learning to create clickable links as URLs using Flutter Linkify class. Using clickable hyperlink, or simply a link is a reference to data that the reader can be directed by clicking the given URL.

The clickable hyperlinks are used to redirect the user. we are using the clickable links to mention sometimes the app is developed by iflutter.in at the bottom of the app or sometimes we need to redirect the user of the app to the app store to download t

Creating the Clickable URLs in Flutter:

Add the dependency package:

To create clickable links or URLs we need to add the dependency package to pubspec.yaml file. use the below code to add dependency package. After adding the dependency package run the get package method to import all the required files to the app.

dependencies:
flutter_linkify: ^2.1.0

Install the package:

You can install the package from the command line using the below code with Flutter as shown.

$ flutter packages get

Importing the Package:

After, Adding the dependency package to the pubspec.yaml file, you can now import the package into the dart code by using the below code. without adding the dependency package to the pubspec.yaml file if you import it will show package not found an error.

import 'package:flutter_linkify/flutter_linkify.dart';

Creating the clickable URL or Links:

Use the below code to create a clickable link by providing the destination URL to it

import 'package:flutter_linkify/flutter_linkify.dart';

Linkify(
onOpen: (link) => print("Clicked ${link.url}!"),
text: "Created by https://www.iflutter.in",
);

Styling the non-clickable text in Flutter App:

Use the below code to style the non-clickable URL text links

import 'package:flutter_linkify/flutter_linkify.dart';
import 'package:url_launcher/url_launcher.dart';

Linkify(
onOpen: (link) async {
if (await canLaunch(link.url)) {
await launch(link.url);
} else {
throw 'Could not launch $link';
}
},
text: "Made by https://cretezy.com",
style: TextStyle(color: Colors.yellow),
linkStyle: TextStyle(color: Colors.red),
);

Humanizing the URL:

we can remove the https: or https from the beginning of the URL by using this humanize. as shown in below code.

Linkify(
text: "Created by https://www.iflutter.in",
humanize: true,
);

Complete Code to Create Clickable URLs In Flutter:

Copy and Paste below code into your main.dart file

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_linkify/flutter_linkify.dart';
import 'dart:async';

import 'package:url_launcher/url_launcher.dart';

void main() => runApp(new LinkifyExample());

class LinkifyExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'flutter_linkify example',
home: Scaffold(
appBar: AppBar(
title: Text('flutter_linkify example'),
),
body: Center(
child: Linkify(
onOpen: _onOpen,
text: "Created by https://www.iflutter.in",
),
),
),
);
}

Future _onOpen(LinkableElement link) async {
if (await canLaunch(link.url)) {
await launch(link.url);
} else {
throw 'Could not launch $link';
}
}
}

Congratulations You Have Learned Creating Clickable URLs in Flutter….!!!

If It Is Helpful Share It With Your Friends….!!!

PrevNext