Flutter文本链接识别插件 native_linkify 的使用

native_linkify 是一个用于Flutter的插件，专门用于在纯文本中识别链接。它利用了iOS和macOS上的NSDataDetector以及Android上的Linkify来实现链接识别功能。这使得该插件能够以与大多数原生应用程序相同的方式找到链接，从而提供比现有的纯Dart包更准确的结果。

尽管此插件本身不提供任何可以直接显示内联链接的小部件，但它提供了所有必要的工具，让你可以根据自己的喜好创建这些小部件。

示例Demo

以下是一个完整的示例，展示了如何将文本中的URL、电子邮件和电话号码转换为可点击的链接：

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:native_linkify/native_linkify.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final entries = await NativeLinkify.linkify(
      'text link.com some@mail.com and +79990000000');
  runApp(MyApp(entries: entries));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key, required this.entries}) : super(key: key);

  final List<LinkifyEntry> entries;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Text.rich(
            TextSpan(
              children: [
                for (final l in entries)
                  if (l is LinkifyText)
                    // Regular text, text without links
                    TextSpan(
                      text: l.text,
                    )
                  else if (l is LinkifyUrl)
                    // Link
                    TextSpan(
                      text: l.text,
                      style: const TextStyle(color: Colors.blue),
                      recognizer: TapGestureRecognizer()
                        ..onTap = () => launch(l.url),
                    )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

完整的交互式示例

如果你希望有一个更加互动的应用程序，可以考虑下面这个例子。这个例子包括了一个文本输入框，用户可以在其中输入文本，并实时看到被识别为链接的部分变为可点击状态。

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:url_launcher/url_launcher.dart';
import 'package:native_linkify/native_linkify.dart';

const String defaultText = '''
regular text => regular text
link without https:// => google.com
link with https:// => https://google.com
link with subdomain => mail.google.com
e-mail => mail@gmail.com
phone number => +79990000000
cyrillic link => москва.рф
localhost link => https://localhost/
link with non-existing top-level domain => link.cet
link with rare top-level domain => map.yandex
(at the time of writing the example it's recognized well in Android, but not recognized in iOS)
''';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<LinkifyEntry> _links = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    linkify(defaultText);
  }

  Future<void> linkify(String text) async {
    final links = await NativeLinkify.linkify(text);
    if (!mounted) return;
    setState(() {
      _links = links;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Native Linkify',
      home: Scaffold(
        body: SafeArea(
          child: ListView(
            children: [
              TextFormField(
                initialValue: defaultText,
                maxLines: null,
                onChanged: linkify,
                style: const TextStyle(fontSize: 14),
                decoration: const InputDecoration(
                  contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
                child: Text.rich(
                  TextSpan(
                    children: [
                      for (final l in _links)
                        if (l is LinkifyText)
                          TextSpan(text: l.text)
                        else if (l is LinkifyUrl)
                          TextSpan(
                            text: l.text,
                            recognizer: TapGestureRecognizer()..onTap = () => launch(l.url),
                            style: const TextStyle(color: Colors.blue),
                          )
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}