在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("加载中..."),
      
     
    

     

      

     
     

      

                   );
      
     
    

     

      

     
     

      

                 }
      
     
    

     

      

     
     

      

               },
      
     
    

     

      

     
     

      

             ),
      
     
    

     

      

     
     

      

           );
      
     
   
  

   
  
  

最终效果