Firebase存储Markdown数据后Flutter Markdown组件无法识别换行

问题描述 #

将Markdown格式的任务评价指南存入Firebase的String字段后，使用Flutter Markdown包渲染时，组件无法识别换行，导致所有内容挤在一起，排版混乱。

待渲染的Markdown内容（中文） #

### 无论你是发布任务还是完成任务，评价应该包含哪些内容？

优质的评价应提供关于你体验的建设性反馈，帮助社区成员做出更明智的决策。

### 撰写评价时，评价者需要考虑什么？

评价者应考虑是否愿意向其他社区成员推荐该任务执行者或发布者。评价中保持诚实和清晰非常重要。

### 评价中需要涵盖哪些方面？

以下是评价中可以考虑的几个方面：

- **沟通是否顺畅？**
- **指令是否清晰？**
- **任务描述是否准确？**
- **任务完成质量是否达标？**
- **任务全程是否获得支持？**
- **任务结果是否符合预期？**
- **任务进行中和完成后是否收到反馈？**

### 可以针对任务执行者的特定属性评分吗？

可以，任务执行者的特定属性（如守时性、沟通能力）可被评分。但建议附上书面评价来详细说明。

### 如果有人想匿名评分怎么办？

若想匿名，可跳过书面评价，仅给出1-5分的评分即可。

Flutter渲染代码 #

class ArticleDetail extends StatelessWidget {
  final String subCategoryDocumentId;
  final String parentCategoryDocumentId;
  final String articleDocumentId;
  final String title;

  const ArticleDetail({
    Key? key,
    required this.subCategoryDocumentId,
    required this.parentCategoryDocumentId,
    required this.articleDocumentId,
    required this.title,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: FutureBuilder<DocumentSnapshot>(
        future: FirebaseFirestore.instance
            .collection('helpCentre')
            .doc(parentCategoryDocumentId)
            .collection('subCategory')
            .doc(subCategoryDocumentId)
            .collection('articles')
            .doc(articleDocumentId)
            .get(),
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Text('Error: ${snapshot.error}');
          }

          if (snapshot.connectionState == ConnectionState.waiting) {
            return const CircularProgressIndicator();
          }

          var data = snapshot.data?.data() as Map<String, dynamic>;
          var articleBody = data['body'];

          return Markdown(
            data: articleBody,
            selectable: true,
          );
        },
      ),
    );
  }
}

异常渲染效果 #

解决方案 #

1. 统一换行符格式 #

Firebase存储字符串时可能将换行符转换为\r\n，而Flutter Markdown默认识别\n。读取数据后替换换行符：

var articleBody = data['body'].replaceAll('\r\n', '\n');

2. 启用软换行解析 #

Flutter Markdown默认要求两个空格+换行才会换行，开启softLineBreak参数可让单个换行生效：

return Markdown(
  data: articleBody,
  selectable: true,
  softLineBreak: true, // 启用单个换行解析
);

3. 规范原始Markdown格式 #

存入Firebase前，确认原始Markdown使用LF（\n）作为换行符，避免编辑器自动转换为CRLF格式。

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