【Flutter】flutter webでmark downを表示する

flutter_markdown

flutter_markdownパッケージを使用することで、mdファイルをflutterのビューで表示することができます。

dependencies:
  flutter:
    sdk: flutter
  flutter_markdown: 

利用方法

assetsにmdファイルを追加

assets - images
       - mds
         - sample.md

mdファイルの取得

final data =
      await rootBundle.loadString('mds/sample.md');

mdファイルの表示

Markdown(data: data)

return Scaffold(
      body: introduction.when(
        data: (data) {
          return Markdown(data: data); 
        },
        error: (o, s) {},
        loading: () => const Center(child: CircularProgressIndicator()),
      ),
    );

あとは引数にString型のdataを渡すだけで表示してくれます。

表示