How to Create a Hyperlink In a Flutter?

· 4 min read
Create a Hyperlink In Flutter
Create a Hyperlink In Flutter

At the time of designing and developing a Flutter Mobile Application, some screen may contain a screen that has text which redirects the user to another screen. In this article, we will discuss How to Create a Hyperlink In a Flutter?

How to Create a Hyperlink in a Flutter?

Are you excited about the same?
If your answer is Yes then let’s dive into the same.

Just wrap an InkWell around a Text Widget and supply an UrlLauncher from the service library to the onTap attribute. Install UrlLauncher as a Flutter package before using it below.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:url_launcher/url_launcher.dart';


void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('UrlLauchner'),
        ),
        body: new Center(
          child: new InkWell(
              child: new Text('Open Browser'),
              onTap: () => launch('https://docs.flutter.io/flutter/services/UrlLauncher-class.html')
          ),
        ),
      ),
    );
  }
}

You can wrap your Text in GestureDetector and handle click in onTap(). Our Code Snippet will look like below:

GestureDetector(
  child: Text("Click here", style: TextStyle(decoration: TextDecoration.underline, color: Colors.blue)),
  onTap: () {
    // do what you need to do when "Click here" gets clicked
  }
)

We will get output like below:

"Create

  • If you want to make it look even more like a link, you can add underline:
Text("Hello Flutter!", 
style: new TextStyle(
color: Colors.blue, 
decoration: TextDecoration.underline
),
)

Our Output will look like below:

"<yoastmark

import 'package:link/link.dart';
 Link(
    child: Text('This is a link to Flutter', style: TextStyle(
       decoration: TextDecoration.underline, // add add underline in text
    ),),
   url: 'https://google.com',
   onError: _showErrorSnackBar,
 ),

 void _showErrorSnackBar() {
    Scaffold.of(context).showSnackBar(
      SnackBar(
        content: Text('Oops... the URL couldn\'t be opened!'),
      ),
    );
  }
...

Our Output will look like below:

"<yoastmark

Conclusion:

In this article, we have been through How to Create a Hyperlink In a Flutter?

Still, need support for Flutter? We are always there to serve you better.

Keep Fluttering !!!
Keep Learning !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply