如何在Flutter中使用flutter_markdown

很多博客，論壇都支持markdown語法，flutter也有支持markdown語法的插件flutter_markdown

安裝依賴

dependencies:
  flutter:
    sdk: flutter
  flutter_markdown: ^0.3.4

保存后，編輯器自動下載依賴，或者執行 flutter pub get

創建markdown文件,放開pubspec.yaml 靜態文件路徑

 assets:
    - assets/markdown.md

加載本地markdown.md文件。

main.dart文件

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

void main() => runApp(MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Markdown Demo'),
          centerTitle: true,
        ),
        body: FlutterMarkdown(),
      ),
    );
  }
}

class FlutterMarkdown extends StatelessWidget {
  const FlutterMarkdown({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: FutureBuilder(
        future: rootBundle.loadString('assets/markdown.md'),
        builder: (BuildContext context,AsyncSnapshot snapshot){
          if(snapshot.hasData){
            return Markdown(data: snapshot.data);
          }else{
            return Center(
              child: Text("加載中..."),
            );
          }
        },
      ),
    );
  }
}

展示markdown效果

Markdown 組件有兩種Markdown(data: markdownSource) 和 MarkdownBody(data: markdownSource)

Markdown() 返回 ListView widget ，並且有默認padding：const EdgeInsets.all(16.0)

MarkdownBody() 返回 Column widget 沒有默認的padding並且不支持滾動

Markdown支持自定義樣式,監聽點擊超鏈

Markdown(
    data: snapshot.data,
    styleSheet: MarkdownStyleSheet(
        // 支持修改樣式
        h1: TextStyle(fontSize: 14),
    ),
    onTapLink: (url){
        // 獲取點擊鏈接，可以使用webview展示
        print(url);
    },
)

Markdown源碼

class Markdown extends MarkdownWidget {
  /// Creates a scrolling widget that parses and displays Markdown.
  const Markdown({
    Key key,
    @required String data,
    bool selectable = false,
    MarkdownStyleSheet styleSheet,
    MarkdownStyleSheetBaseTheme styleSheetTheme,
    SyntaxHighlighter syntaxHighlighter,
    MarkdownTapLinkCallback onTapLink,
    String imageDirectory,
    md.ExtensionSet extensionSet,
    MarkdownImageBuilder imageBuilder,
    MarkdownCheckboxBuilder checkboxBuilder,
    this.padding = const EdgeInsets.all(16.0),
    this.controller,
    this.physics,
    this.shrinkWrap = false,
  }) : super(
          key: key,
          data: data,
          selectable: selectable,
          styleSheet: styleSheet,
          styleSheetTheme: styleSheetTheme,
          syntaxHighlighter: syntaxHighlighter,
          onTapLink: onTapLink,
          imageDirectory: imageDirectory,
          extensionSet: extensionSet,
          imageBuilder: imageBuilder,
          checkboxBuilder: checkboxBuilder,
        );
}

意外發現

在創建項目之初，隨手就創建了 flutter create flutter_markdown ，然后安裝flutter_markdown依賴失敗，考慮到project name 和 flutter_markdown重名了，那就換一個項目名稱 flutter create markdown 然后flutter pub get 然后又報錯了，flutter_markdown依賴另外一個markdown package。好吧，flutter create flutter_md_demo 一切正常了。

Flutter 項目名稱不能和package依賴包名相同