Flutter Markdown渲染插件markdown_widget_builder的使用

markdown_widget_builder是一个用于将Markdown文件转换为交互式Flutter小部件的插件，特别适合用于构建调查问卷等场景。下面将详细介绍如何使用该插件，并提供一个完整的示例。

插件功能概览

• Survey Menu: 定义调查菜单。
• Slider Bar: 创建滑动条。
• Button: 添加按钮。
• Radio Button: 创建单选按钮。
• Checkbox: 创建复选框。
• Hidden Content: 隐藏内容，直到特定条件满足时显示。
• Input Box: 单行或多行输入框。
• Description Box: 描述框。
• Calendar: 日历选择器。
• Dropdown: 下拉菜单。
• Font Size and Text Alignment: 调整字体大小和文本对齐方式。
• Image, Video, Audio: 媒体元素。
• Countdown Timer: 倒计时器。
• Empty Line and Pagination: 空行和分页。

示例代码

项目结构

确保在你的Flutter项目中有一个Markdown文件位于assets/sample_markdown.md路径下，并在pubspec.yaml中添加相应的资源引用：

flutter:
  assets:
    - assets/sample_markdown.md

主程序代码

以下是从提供的示例代码改编而来的完整示例：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:markdown_widget_builder/markdown_widget_builder.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Markdown Widgets Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MarkdownExamplePage(),
    );
  }
}

class MarkdownExamplePage extends StatefulWidget {
  const MarkdownExamplePage({super.key});

  @override
  State<MarkdownExamplePage> createState() => _MarkdownExamplePageState();
}

class _MarkdownExamplePageState extends State<MarkdownExamplePage> {
  late Future<String> _markdownContentFuture;

  @override
  void initState() {
    super.initState();
    _markdownContentFuture = _loadMarkdownContent();
  }

  Future<String> _loadMarkdownContent() async {
    return await rootBundle.loadString('assets/sample_markdown.md');
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: _markdownContentFuture,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          final markdownContent = snapshot.data!;
          return Scaffold(
            appBar: AppBar(title: const Text('Markdown Widgets Example')),
            body: SingleChildScrollView(
              child: MarkdownWidgetBuilder(
                content: markdownContent,
                title: 'Sample Markdown',
                onMenuItemSelected: (selectedTitle, selectedContent) {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => MarkdownDetailPage(
                        title: selectedTitle,
                        content: selectedContent,
                      ),
                    ),
                  );
                },
              ),
            ),
          );
        } else if (snapshot.hasError) {
          return Scaffold(
            appBar: AppBar(title: const Text('Markdown Widgets Example')),
            body: const Center(child: Text('Error loading markdown content')),
          );
        } else {
          return Scaffold(
            appBar: AppBar(title: const Text('Markdown Widgets Example')),
            body: const Center(child: CircularProgressIndicator()),
          );
        }
      },
    );
  }
}

class MarkdownDetailPage extends StatelessWidget {
  final String title;
  final String content;

  const MarkdownDetailPage({
    super.key,
    required this.title,
    required this.content,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: SingleChildScrollView(
        child: MarkdownWidgetBuilder(
          content: content,
          title: title,
          onMenuItemSelected: (selectedTitle, selectedContent) {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => MarkdownDetailPage(
                  title: selectedTitle,
                  content: selectedContent,
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

Markdown文件示例 (sample_markdown.md)

%% Menu-Begin

• GAD-7 Survey
• PHQ-9 Survey %% Menu-End

GAD-7 Survey

Description: The Generalized Anxiety Disorder 7 (GAD-7) is a self-report questionnaire used to assess the severity of generalized anxiety disorder (GAD).

Your name: %% InputSL(Name) Your feedback: %% InputML(Feedback)

%% Slider(Question 1,1,4,1,1)

PHQ-9 Survey

Description: The Patient Health Questionnaire 9 (PHQ-9) is a self-report questionnaire used to assess the severity of depression.

%% Radio(Radio1,1,“Option 1”) %% Radio(Radio1,2,“Option 2 (Recommended)”)