ProgrammingTech Assist

Add Links To Your Text In Flutter i.e Hyperlinks Widget

Flutter makes app development more easy and flexible. Here’s a step by step guide on how you can add links to your text in Flutter. i.e whenever your user clicks on that particular part of the text, it redirects them to that link page. In HTML, You use the HREF Attribute to implement such for a website. In Flutter, we use the Linkable widget & URL launcher package, as it is a wrapper over RichText which simply allows you to make a link that can be clicked to redirect to the URL that you’ve specified.

Have in mind that, unlike HTML, You don’t need to specify the URL scheme i.e (mailto, tel, etc). This widget will simply do the work for you.

At the moment, Linking Texts in flutter support the types below;

Flutter Packages Needed

Visit pub.dev to get these packages.

  • Linkable Package
  • URL Launcher Package
linkable package in PUB.DEV
URL_Launcher Package in PUB.DEV

Install the Packages in Pubspec.yaml

Go to your pubspec.yaml file in your project and add the linkable and url_launcher package below your dependency, the same way it is shown below.

dependencies:
  linkable: recent version
  url_launcher: recent version

Import the linkable package & Apply the code

import 'package:flutter/material.dart';
import 'package:linkable/linkable.dart';


class Homepage extends StatefulWidget {
  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Text Link"),
      ),

      body: Center(
        child: Linkable(
	                text:
	              "Hi!\nI'm Collins Nkem.\n\nYou can email me at [email protected]\nOr just whatsapp me @ +2347055055426.\n\nFor more info visit: \ngithub.com/kemswizz \nor\nhttps://www.linkedin.com/in/techllyn/",
                  ),
        ),
      
    );
  }
}

Output;

Useful Characteristics

KEYDESCRIPTION
textThe main text you display
textColorThe default color of the text without links
linkColorThe preferred color of the text with links
styleTextStyle to be applied on the widget.
textAlignTextAlign value. (default: TextAlign.start)
textDirectionDetermines the order to lay children out horizontally.
maxLinesMaximum number of lines to be displayed.
overflowHandles text that crosses maxLines. (default: TextOverflow.clip)
textScaleFactorThe number of font pixels for each logical pixel.
localeSets text locale.
Tags

Related Articles

Leave a Reply

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

Close