在Flutter中使用markdown

最近在写flutter入门的项目，打算把常用的widgets和插件用法总结下，方便后期查找，项目大概是这个样子。

搜索页

widgets属性页面写的时候考虑排版，但是文字居多，如果设计下排版，用widgets把样式写好，后期如果需要修改，则改动比较大，所以考虑使用markdown，毕竟也是支持的。

1.安装依赖

根目录下pubspec.yaml文件增加 flutter_markdown: ^0.3.4

dependencies:
  flutter:
   sdk: flutter
  flutter_markdown: ^0.3.4

我使用的编辑器是VSCode，保存自动下载依赖，如果没有的话，执行

flutter pub get

2.创建markdown

我在lib目录下新建文件夹markdown，文件夹里新建container.md文件，在根目录下pubspec.yaml文件中增加

3.使用markdown

引入markdown

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

导入md文件，展示（重点是红圈中的）

return Container(
     child: FutureBuilder(
      future: rootBundle.loadString('lib/markdown/container.md'),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.hasData) {
         return Markdown(
           data: snapshot.data,
           selectable: true,
           styleSheet: MarkdownStyleSheet(
            // 支持修改样式
            h1: TextStyle(fontSize: 14),
           ),
         );
        } else {
         return Center(
           child: Text("加载中..."),
         );
        }
      },
     ),
   );

最终效果

原文地址：https://blog.csdn.net/NMGWAP/article/details/125066884?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168922773916800225598574%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168922773916800225598574&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-4-125066884-null-null.142^v88^control_2,239^v2^insert_chatgpt&utm_term=markdown