Flutter 如何在flatter小部件中创建超链接？

我想创建一个超链接以显示在我的颤振应用程序中

超链接应嵌入

文本

或类似文本视图中，如：

最后一本书是

---

有什么提示吗？

flatter没有内置的超链接支持，但您可以自己伪造它。这本书中有一个例子。他们使用一个包含彩色

TextSpan

的

RichText

小部件，该小部件具有一个

识别器

属性来处理点击：

        RichText(
          text: TextSpan(
            children: [
              TextSpan(
                style: bodyTextStyle,
                text: seeSourceFirst,
              ),
              TextSpan(
                style: bodyTextStyle.copyWith(
                  color: colorScheme.primary,
                ),
                text: repoText,
                recognizer: TapGestureRecognizer()
                  ..onTap = () async {
                    final url = 'https://github.com/flutter/gallery/';
                    if (await canLaunch(url)) {
                      await launch(
                        url,
                        forceSafariVC: false,
                      );
                    }
                  },
              ),
              TextSpan(
                style: bodyTextStyle,
                text: seeSourceSecond,
              ),
            ],
          ),

---

只需在文本小部件周围包装一个墨水池，并向onTap属性提供一个UrlLauncher（来自服务库）。在下面使用之前，将其作为颤振包安装

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')
          ),
        ),
      ),
    );
  }
}

您可以向文本小部件提供样式，使其看起来像链接

更新 在研究了一下这个问题之后，我找到了一个不同的解决方案来实现您要求的“在线”超链接。您可以使用随附的

---

这样，您实际上可以突出显示一个单词，并将其制作成超链接；）

如果您想让它看起来更像一个链接，可以添加下划线：

new Text("Hello Flutter!", style: new TextStyle(color: Colors.blue, decoration: TextDecoration.underline),)

结果是：

---

您可以将

文本

包装在

手势检测器

中，然后在

onTap（）中单击手柄

在应用程序中放置可点击链接的另一种（或非）方式（对我来说，就是这样）：

1-在pubspec.yaml文件中添加url_启动程序包

（软件包版本5.0对我来说不太合适，所以我使用的是4.2.0+3）

2-导入它并按如下方式使用

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

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: MyUrl(),
  ));
}

class MyUrl extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Url Launcher'),
      ),
      body: Center(
        child: FlatButton(
          onPressed: _launchURL,
          child: Text('Launch Google!',
              style: TextStyle(fontSize: 17.0)),
        ),
      ),
    );
  }

  _launchURL() async {
    const url = 'https://google.com.br';
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }
}

---

您可以使用包颤振链接

只是想提供另一种选择
软件包将自动分割文本并突出显示http/https
组合插件url\u启动器您可以启动url
您可以查看下面的示例：

下面的完整代码

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: "Made by https://cretezy.com \n\nMail: example@gmail.com \n\n  this is test http://pub.dev/ ",
          ),
        ),
      ),
    );
  }

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

导入“包装：颤振/材料.省道”；
进口“包装：颤振链接/颤振链接.dart”；
导入“dart:async”；
导入“package:url_launcher/url_launcher.dart”；
void main（）=>runApp（新的LinkifyExample（））；
类LinkifyExample扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回新材料PP(
标题：“颤振链接示例”，
家：脚手架(
appBar:appBar(
标题：文本（“颤振链接示例”），
),
正文：中(
孩子：Linkify(
onOpen:_onOpen，
正文：“由……制造”https://cretezy.com \n\n邮件：example@gmail.com\n\n这是测试http://pub.dev/ ",
),
),
),
);
}
Future\u onOpen（LinkableElement-link）异步{
if（等待canLaunch（link.url））{
等待启动（link.url）；
}否则{
抛出“无法启动$link”；
}
}
}

您可以使用链接文本 像这样使用它

final String\u text='Lorem ipsumhttps://flutter.dev\nhttps://pub.dev'; 
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：中(
子：链接文本(
文本：_text，
textAlign:textAlign.center，
),
),
);
}

谢谢。但这并不是我真正想要的东西：我正在查看应用程序内导航以外的内容。我不确定你所说的“查看应用程序内导航以外的内容”是什么意思。是否希望该链接打开浏览器？是的，可以单击以在浏览中打开的链接或类似链接。我链接的示例就是这样做的。我在答案中添加了一些图片来展示它。回购链接是BrokerNurlLauncher不再是Flitter的一部分，它被移动到了。此外，我们还需要添加导入：import“package:flatter/signatures.dart”；导入“package:url_launcher/url_launcher.dart”；您没有正确处理

TapGestureRecognitor

的生命周期。当不再使用

RichText

时，必须调用

dispose（）

方法。请看这里：@AlexSemeniuk在您的示例中，他们使用的是StatefulWidget，在上面的答案中，它是一个无状态widget。您确定我们需要处理无状态小部件的情况吗？@CoreyCole

无状态小部件

不会神奇地为您处理您的

TapGestureRecognitizer

。事实上，在这个场景中使用

无状态widget

是不正确的，因为您不能这样处理您的资源。是的，您绝对需要调用

TapGestureRecognitizer

的

dispose（）

方法，因为它运行需要停止的内部计时器。如果某些文本之间需要超链接，您可以使用与其他文本具有相同背景和文本颜色的

FlatButton

，因此，用TextDecoration.underline格式化它，正如上面的bartektartanus所示……你是对的，你的解决方案比其他解决方案的行数少’，但Inkwell是这个特殊工作的小部件，所以从语义上来说，我认为它是最好的solution@dmarquina对您可以使用

InkWell

而不是

GestureDetector

。它不可单击！然后用按钮小部件将其包裹起来。：）这不是问题的答案，而是对某人答案的评论。另外，该按钮不是内联文本超链接。在Linux下，

flatter pub get

失败，因为它无法找到插件。vcxproj用于插件“url\u launcher\u windows”如何在同一个小部件上有2个链接？比如“点击这里，你就可以接受使用条款和隐私政策”，我们需要把它们放在一起。节省了大量的锅炉板code@Dani您可以添加任意数量的链接，因为flatterlinkify包对每个链接都有不同的处理。我已经对上面的代码片段进行了不止一个链接的测试，它工作得非常好

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^4.2.0+3

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

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: MyUrl(),
  ));
}

class MyUrl extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Url Launcher'),
      ),
      body: Center(
        child: FlatButton(
          onPressed: _launchURL,
          child: Text('Launch Google!',
              style: TextStyle(fontSize: 17.0)),
        ),
      ),
    );
  }

  _launchURL() async {
    const url = 'https://google.com.br';
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }
}

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: "Made by https://cretezy.com \n\nMail: example@gmail.com \n\n  this is test http://pub.dev/ ",
          ),
        ),
      ),
    );
  }

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