Flutter Markdown渲染插件markdown_browser的使用

Flutter Markdown渲染插件markdown_browser的使用

本包用于简化浏览Markdown文件的过程。

该包在应用程序需要提供一套作为帮助内容或用户手册的Markdown文件，并且需要一个浏览器小部件在Flutter应用程序中显示时非常有用。

Markdown文件可以放在资源文件夹中，也可以从外部服务器获取。

截图

（由于没有提供截图，此处不显示）

特性

• 在同一文件夹/相同基URL下的Markdown文件之间浏览。
• 打开其他链接时在webview中打开。
• 支持头部浏览和历史记录。
• 支持Latex方程式（使用 $…$ 和 $$…$$）。
• 提供基本的导航菜单，阅读文档时自动隐藏。
• 作为一个小部件提供，因此可以嵌入到任何其他小部件中。它不必是一个独立页面。

为了渲染Markdown文件，使用了markdown_widget包。有关支持的功能和限制，请参阅markdown_widget演示。

开始使用

添加包到你的pubspec.yaml文件

flutter pub add markdown_browser

添加riverpod

此包使用Riverpod来管理状态。

flutter pub add flutter_riverpod

如Riverpod所要求的，将整个应用程序包裹在一个ProviderScope小部件中。

void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

调用小部件

import 'package:markdown_browser/markdown_browser.dart';

使用小部件：

MarkdownBrowser(
  urlBase: "http://127.0.0.1:5000",
  onExitCB: () {
    // 你的逻辑以移除Markdown浏览器
  },
  landingPage: "my_indexPage.md", // 默认为index.md
  onGetMarkDownCB: (String path) async {
    final String content = // 你的逻辑以下载/加载文件
    return content;
  }, // 默认为基于内部HTTP的逻辑
)

使用说明

参考提供的示例，了解如何使用此包处理离线和在线内容。

离线

将包含Markdown文件的文件夹存储在assets中，并将其添加到<Application>/pubspec.yaml文件中。不要忘记添加内容中的子文件夹。

flutter:
  assets:
  - assets/user_manual_1/
  - assets/user_manual_1/topic/

调用小部件并设置urlBase为assets/user_manual_1。

在线

确保链接<urlBase>/<landingPage>有效。

要测试此包的在线功能，在example/server文件夹下提供了一个测试服务器。确保已安装python3、python3-pip和python3-venv并运行提供的脚本。

在Linux机器上，可以这样做：

sudo apt install python3 python3-pip python3-venv -y
cd example/server
bash start_server.sh

这将启动Flask服务器并在本地和网络地址上提供服务。

 * Serving Flask app 'server.py'
 * Debug mode: off
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:5000
 * Running on http://x.x.x.x:5000

如果在同一台机器上进行测试，则无需更改即可使用http://127.0.0.1:5000的在线版本。

如果在移动设备或另一台机器上进行测试，请确保通过将BaseURL修改为http://x.x.x.x:5000后运行Flutter应用，使服务器在本地网络上提供服务。

额外信息

计划增强

• ❌ 如果在浏览过程中页面失败，提供返回上一个文件的按钮。
• ❌ 暴露更多由markdown_widget允许的应用程序定制。
• ❌ 测试更多的Markdown内容。

已知问题

• ❌ 无法导航到同一Markdown文件中的特定部分或另一个文件中的特定部分。这似乎不受markdown_widget包的支持。

支持

如果您遇到任何问题或有任何增强建议，请在GitHub上创建问题，或联系cloudonlanapps (at) gmail (dot) com。

您还可以发送您的pull请求，如果您想要贡献。

示例代码

example/lib/main.dart

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

import 'package:markdown_browser/markdown_browser.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';

void main() {
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Markdown Browser Demo',
      initialRoute: '/',
      home: const MainPage(),
      routes: {
        MainPage.routeName: (context) {
          return const MainPage();
        },
        MarkdownBrowserPage.routeName: (context) {
          return const MarkdownBrowserPage();
        },
      },
      debugShowCheckedModeBanner: false,
    );
  }
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});
  static const String routeName = '/main_page';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Markdown Browser Demo"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            OpenManual(
              urlBase: "assets/user_manual_1",
              label: "Open Offline Manual",
              icon: Icon(MdiIcons.cellphoneLink),
            ),
            const SizedBox(
              height: 16,
            ),
            OpenManual(
              urlBase: "http://127.0.0.1:5000",
              label: "Open Online Manual",
              icon: Icon(MdiIcons.cellphoneLink),
            ),
          ],
        ),
      ),
    );
  }
}

class OpenManual extends StatelessWidget {
  const OpenManual(
      {super.key,
      required this.urlBase,
      required this.label,
      required this.icon});
  final String urlBase;
  final String label;
  final Icon icon;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ElevatedButton.icon(
          onPressed: () => Navigator.pushNamed(
                context,
                MarkdownBrowserPage.routeName,
                arguments: {"urlBase": urlBase},
              ),
          icon: icon,
          label: Text(label,
              style: Theme.of(context).textTheme.bodyLarge!,
              textAlign: TextAlign.center)),
    );
  }
}

class MarkdownBrowserPage extends StatelessWidget {
  const MarkdownBrowserPage({super.key, this.arguments});
  final Map<String, String>? arguments;
  static const String routeName = '/markdown_browser_page';

  [@override](/user/override)
  Widget build(BuildContext context) {
    final args =
        ModalRoute.of(context)!.settings.arguments as Map<String, String>;
    if (args.containsKey("urlBase") && args["urlBase"] != null && args["urlBase"]!.isNotEmpty) {
      return Scaffold(
        body: MarkdownBrowser(
            urlBase: args["urlBase"]!,
            onExitCB: () {
              if (Navigator.canPop(context)) {
                Navigator.pop(context);
              }
            }),
      );
    } else {
      return const Scaffold(
        body: Center(
          child: Text("urlBase is not provided"),
        ),
      );
    }
  }
}