flutter如何实现markdown渲染

在Flutter中如何实现Markdown内容的渲染？有没有推荐的插件或库可以方便地将Markdown文本转换为Widget？希望能支持基本的标题、列表、代码块等常见语法，最好能兼容图片和链接的解析。性能方面是否有需要注意的地方？

2 回复

使用flutter_markdown包，在pubspec.yaml添加依赖后，用MarkdownBody组件渲染markdown文本即可。

更多关于flutter如何实现markdown渲染的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现Markdown渲染可以使用官方提供的flutter_markdown包，以下是具体实现方法：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  flutter_markdown: ^0.6.18

运行 flutter pub get 安装包。

2. 基本使用

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

class MarkdownPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Markdown渲染')),
      body: Markdown(
        data: '''
# 标题
这是**粗体**和*斜体*文本

- 列表项1
- 列表项2

`行内代码`

```dart
void main() {
  print('代码块');
}

    ''',
  ),
);

} }


## 3. 高级配置
```dart
Markdown(
  data: markdownText,
  styleSheet: MarkdownStyleSheet(
    h1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    p: TextStyle(fontSize: 16, height: 1.5),
  ),
  onTapLink: (text, href, title) {
    // 处理链接点击
    print('点击链接: $href');
  },
  imageBuilder: (uri, title, alt) {
    // 自定义图片渲染
    return Image.network(uri.toString());
  },
)

4. 从文件加载

FutureBuilder<String>(
  future: rootBundle.loadString('assets/document.md'),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Markdown(data: snapshot.data!);
    }
    return CircularProgressIndicator();
  },
)

主要特性

  • 支持标准Markdown语法
  • 可自定义样式
  • 支持链接和图片处理
  • 代码高亮显示
  • 响应式设计

这样就实现了完整的Markdown渲染功能。

回到顶部