auto detect link flutter

Question

i have an issue about the text widget not being able to detect that there is a link.

later I will get a text response from the server as shown. the response is in the form of text as well as a link.

the problem is the text widget on flutter can't detect it. How do I make the link in the text detectable and clickable?

I have read and searched about this but could not find it. because most of the link text must be typed by yourself. while my problem the text is automatically there because it is the response from the server

can anyone help me find an answer? Thank you in advance

Mccluskey

Have a look at this package - pub.dev/packages/flutter_linkify – Typeset

Answer 1

Text widget does not automatically recognise links.

You can, however insert actions to text using the TextSpan widget and url_launcher, somewhat like this:

RichText(
    text: TextSpan(
        children: [
            TextSpan(text: 'some text'),
            TextSpan(
                text: url,
                style: new TextStyle(
                    color: Colors.blue,
                    decoration: TextDecoration.underline
                ),
                recognizer: TapGestureRecognizer()
                ..onTap = () async {
                    if (await canLaunch(url)) {
                      await launch(url);
                    } else {
                      throw 'Could not launch $url';
                    }
                },
            ),
        ]
    ),
)

You can wrap this into a class and make a small LinkText widget for yourself.

What flutter_linkify does is that it automatically detects URLs & email IDs in text and links them. You can also do this using regex. For eg. for identifying url, you could have something like:

 bool _isLink(String input) {
     final matcher = new RegExp(
        r"(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)");
    return matcher.hasMatch(input);
}

You will have to, modify this a bit to get the substring and use that as url in text span!

Wrier

Answer 2

I just want to add one more solution, You can do it using the flutter_linkify package:

Enable the conversion of text URLs and email addresses into clickable inline links within your Flutter app.

Linkify(
              text:
                  "This is the URL to my profile: https://stackoverflow.com/users/19269162/pratik-lakhani",
              onOpen: (link) async {
                if (!await launchUrl(Uri.parse(link.url))) {
                  throw Exception('Could not launch ${link.url}');
                }
              },
              linkStyle: TextStyle(fontSize: 25),
              style: TextStyle(fontSize: 25),
            ),

Example:

Efflorescent

Answer 3

The Flutter Text widget does not automatically detect text links.

You can make use of the SmartTextFlutter plugin here: https://pub.dev/packages/smart_text_flutter

After importing the plugin, you simply need to use the SmartText widget instead of the Flutter Text widget as described below

import 'package:smart_text_flutter/smart_text_flutter.dart';

class SmartTextFlutterExample extends StatelessWidget {
  const SmartTextFlutterExample({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Smart Text Flutter'),
        ),
        body: const Center(
          child: SmartText('Replace this with your text'),
        ),
      ),
    );
  }
}

Centrosymmetric