Flutter如何加载嵌套md链接及HTTP远程地址的md文件

1、是否可以从HTTP链接加载md文件 #

可以。你之前用的DefaultAssetBundle.loadString仅支持读取应用内打包的asset资源，要加载网络md文件，直接通过网络请求拉取文本内容传给Markdown组件即可。
实现步骤：

• 项目中引入网络请求依赖（比如官方维护的http包），同时记得配置对应平台的网络权限：Android需声明INTERNET权限，iOS如果要加载HTTP非HTTPS链接需配置ATS白名单
• 替换原来的asset加载逻辑，通过GET请求拿到md文件的文本内容，请求成功后传给Markdown组件渲染即可

示例代码：

import 'package:http/http.dart' as http;

// FutureBuilder 对应future部分替换为如下逻辑
future: http.get(Uri.parse("http://mdlink.co.id/data.md")).then((response) {
  if (response.statusCode == 200) {
    return response.body;
  }
  throw Exception("Markdown文件加载失败，状态码：${response.statusCode}");
}),

注意：生产环境请补充异常捕获、加载中状态、错误提示逻辑，避免网络异常导致组件崩溃。

2、如何加载嵌套在md链接内部的md链接 #

flutter_markdown默认点击链接会触发系统浏览器打开，要实现应用内直接加载嵌套md的效果，需要自定义链接点击拦截逻辑，步骤如下：

• 为Markdown组件配置onTapLink回调，拦截所有链接点击事件
• 点击事件触发时，判断当前点击的链接是否为md格式链接（可通过后缀.md、自有链接规则判断）
• 如果是md链接，根据链接类型（本地asset/网络地址）调用对应加载逻辑拉取md内容，更新组件当前渲染的md数据源，触发重绘即可；非md链接可保留原有逻辑，调用系统浏览器打开
• 如果需要支持多级嵌套返回，可以维护一个md内容栈，每次加载新md时把旧内容压入栈，点击返回时弹出栈顶内容渲染上一级即可

示例核心代码：

// 用状态变量维护当前渲染的md内容
String currentMarkdown = "";

@override
Widget build(BuildContext context) {
  return Markdown(
    data: currentMarkdown,
    onTapLink: (linkText, linkHref, linkTitle) async {
      if (linkHref == null) return;
      // 拦截md类型链接
      if (linkHref.endsWith('.md')) {
        try {
          String newMdContent;
          if (linkHref.startsWith('http')) {
            // 加载网络md
            final res = await http.get(Uri.parse(linkHref));
            if (res.statusCode != 200) throw '加载失败';
            newMdContent = res.body;
          } else {
            // 加载本地asset下的md
            newMdContent = await DefaultAssetBundle.of(context)
                .loadString('assets/manual/$linkHref');
          }
          // 更新状态渲染新的md内容
          setState(() {
            currentMarkdown = newMdContent;
          });
        } catch (e) {
          // 可在此处添加加载失败的toast提示
          debugPrint('嵌套md加载失败：$e');
        }
      } else {
        // 普通网页链接走系统浏览器打开逻辑
        // 可搭配url_launcher包实现跳转
      }
    },
  );
}

内容的提问来源于stack exchange，提问作者wahyu