Flutter开发中如何为BulaANVISA文本添加可跳转URL链接

报错核心原因 #

你当前代码里的“Bula ANVISA”是被const修饰的纯文本ListTile，没有绑定点击响应逻辑，直接插入跳转代码时大概率因为const约束、缺少跳转依赖、未配置平台权限三类问题触发报错。 #

实现步骤 #

1. 引入官方跳转依赖 #

在项目根目录的pubspec.yaml文件中添加官方维护的url跳转依赖：

dependencies:
  flutter:
    sdk: flutter
  #  链接跳转依赖，可替换为当前最新稳定版本
  url_launcher: ^6.2.5

保存后在终端执行flutter pub get完成依赖拉取。

2. 替换对应卡片代码 #

找到Epinefrina卡片下方第一个写着“Bula ANVISA”的Material组件，删掉原来的const修饰的静态代码，替换为以下带点击逻辑的代码：

Material(
  child: Card(
    color: Colors.white,
    child: ListTile(
      title: Text(
        'Bula ANVISA',
        //  可按需调整链接样式，这里加了蓝色+下划线做可点击提示
        style: TextStyle(
          color: Colors.blue,
          decoration: TextDecoration.underline,
        ),
      ),
      onTap: () async {
        final Uri targetUri = Uri.parse('https://consultas.anvisa.gov.br/#/bulario/q/?numeroRegistro=103870078');
        //  校验当前设备是否支持打开该链接
        if (await canLaunchUrl(targetUri)) {
          //  调用外部浏览器打开链接
          await launchUrl(targetUri, mode: LaunchMode.externalApplication);
        } else {
          //  跳转失败的兜底提示
          if (context.mounted) {
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(content: Text('无法打开链接，请检查设备网络设置'))
            );
          }
        }
      },
    ),
  ),
),

3. 平台权限配置（解决部分设备跳转无反应问题） #

• Android端：打开android/app/src/main/AndroidManifest.xml，在<manifest>根节点下添加以下配置：

<queries>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="https" />
  </intent>
</queries>

• iOS端：打开ios/Runner/Info.plist，在根节点下添加以下配置：

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>https</string>
</array>

避坑提示 #

• 所有带点击事件、动态逻辑的组件不要加const修饰，否则会触发常量构造函数不匹配的编译错误
• 不要在异步跳转逻辑执行完后直接操作context，必须加context.mounted校验，避免组件销毁时触发内存泄漏报错

内容的提问来源于stack exchange，提问作者Pedro Henrique Cesar