《Fluuter 開發從 0 到 1》博客詳情是 Markdown，今天就來說說 Flutter Markdown 如何實現的。
先劇透下，今天的主角是 flutter_markdown，可以實現從使用簡單的 Markdown 標記格式化的純文本數據創建富文本輸出，包括文本樣式，表格，連結等。
準備將 flutter_markdown 添加到 pubspec.yaml 文件中：
dependencies:
flutter_markdown: ^0.4.4項目根目錄執行如下命令安裝 flutter_markdown：
flutter pub get
使用使用 Markdown 很簡單，只需將源 markdown 作為字符串傳遞，參數如下：
Markdown({
Key key,
//填充內容
@required String data,
bool selectable = false,
//定製 Markdown 樣式
MarkdownStyleSheet styleSheet,
MarkdownStyleSheetBaseTheme styleSheetTheme,
//設置代碼高亮
SyntaxHighlighter syntaxHighlighter,
//獲取點擊連結，可以使用 webview 展示
MarkdownTapLinkCallback onTapLink,
String imageDirectory,
md.ExtensionSet extensionSet,
MarkdownImageBuilder imageBuilder,
MarkdownCheckboxBuilder checkboxBuilder,
Map<String, MarkdownElementBuilder> builders = const {},
this.padding = const EdgeInsets.all(16.0),
this.controller,
this.physics,
this.shrinkWrap = false,
})syntaxHighlighter 可以設置代碼高亮，這裡有個坑，需要結合插件 syntax_highlighter 一起使用，後面再說。
實例我們用《Fluuter 開發從 0 到 1（四）ListView 下拉加載和加載更多》md 文件用於測試，放到項目根目錄 assets 文件夾下，在 pubspec.yaml 中引用：
assets:
- assets/files/Markdown.md代碼中獲取：
Future<String> _loadFromAssets() async {
String filePath = 'assets/files/Markdown.md';
String fileContents = await rootBundle.loadString(filePath);
return fileContents;
}完整代碼如下：
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 {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Markdown Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var _result = "";
dynamic result;
@override
void initState() {
super.initState();
loadAssests();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: new Markdown(
controller: ScrollController(),
selectable: true,
data: _result,
styleSheet: new MarkdownStyleSheet(
p: new TextStyle(fontSize: 16),
h2: new TextStyle(color: Colors.blue, fontSize: 24),
),
onTapLink: (url) {
// 獲取點擊連結，可以使用webview展示
print(url);
},
),
);
}
void loadAssests() async {
result = await _loadFromAssets();
print(result);
setState(() {
_result = result.toString();
});
}
Future<String> _loadFromAssets() async {
String filePath = 'assets/files/Markdown.md';
String fileContents = await rootBundle.loadString(filePath);
return fileContents;
}
}效果如下：
Markdown 文件完美展示了，但發現代碼沒有高亮，對於我這個有強迫症的人，不允許。
代碼高亮Flutter 插件 syntax_highlighter 可以是代碼高亮，如果是有文字+代碼這種形式，就不會高亮，這裡需要結合flutter_markdown 一起使用。
將 syntax_highlighter 添加到 pubspec.yaml 文件中：
dependencies:
syntax_highlighter: ^0.1.1項目根目錄執行如下命令安裝 flutter_markdown：
flutter pub get看 flutter_markdown 的 syntaxHighlighter 參數類是抽象類：
abstract class SyntaxHighlighter {
// ignore: one_member_abstracts
/// Returns the formatted [TextSpan] for the given string.
TextSpan format(String source);
}新建 my_markdown_style.dart 繼承 SyntaxHighlighterfu override format 方法：
import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart' as md;
import 'package:syntax_highlighter/syntax_highlighter.dart';
class HighLight extends md.SyntaxHighlighter {
@override
TextSpan format(String source) {
final SyntaxHighlighterStyle style =
SyntaxHighlighterStyle.lightThemeStyle();
return TextSpan(
style: const TextStyle(
fontSize: 12.0,
fontFamily: 'monospace',
),
children: <TextSpan>[DartSyntaxHighlighter(style).format(source)]);
}
}這樣在 flutter_markdown syntaxHighlighter 參數可以這樣寫：
new Markdown(
//……
data: _result,
syntaxHighlighter: new HighLight(),
//……
)效果如下：
代碼高亮了，效果很完美，更多代碼細節詳見《Flutter 開發從 0 到 1（五）源碼》。