FlutterアプリでMarkdownを表示する

概要

FlutterアプリでMarkdownを表示する場合の備忘録です。

結論

を使うだけで十分...

気をつけるところ

一部分のテキストだけを変更したい場合は、MarkdownBodyを使う。

サンプル（リンクタップ時にurl_launcherを使って、アプリ内ブラウザ遷移をする）

        MarkdownBody(
          data: text,
          onTapLink: (String text, String? href, String title) async {
            if (href == null) {
              return;
            }
            if (await canLaunchUrlString(href)) {
              await launchUrlString(href);
            }
          },
        ),

Tips

リンク色の変更 + リンク下線をつける

          styleSheet: MarkdownStyleSheet(
            a: const TextStyle(
              color: Colors.red,
              decoration: TextDecoration.underline,
              decorationColor: Colors.black,
            ),
          ),