cosmic_frontmatter
cosmic_frontmatter is a package that provides a simple way to parse the frontmatter of a markdown file.
getting started
to get started, you need to install the package by adding cosmic_frontmatter to your pubspec.yaml:
dependencies:
flutter:
sdk: flutter
cosmic_frontmatter: ^1.0.0
usage
cosmic_frontmatter exports a parsefrontmatter function that takes a string (your markdown document) and a builder function. the builder function is called with the parsed frontmatter as a map.
this allows you to get typed frontmatter. here’s an example that uses json_serializable and freezed to generate a mockfrontmatter class:
import 'package:freezed_annotation/freezed_annotation.dart';
part 'mock_frontmatter.freezed.dart';
part 'mock_frontmatter.g.dart';
@freezed
class mockfrontmatter with _$mockfrontmatter {
const factory mockfrontmatter({
required string title,
required string author,
required string excerpt,
required string category,
required string date,
}) = _mockfrontmatter;
const mockfrontmatter._();
factory mockfrontmatter.fromjson(map<string, dynamic> json) => _$mockfrontmatterfromjson(json);
}
with the mockfrontmatter in place, you can parse the frontmatter of a markdown file:
const mockdocument = """
---
title: this is a test document
author: paul-halliday
excerpt: learn how to use markdown with flutter at developer.school
category: flutter
date: "2021-10-25"
---
you can learn how to use markdown with flutter at [developer.school](https://developer.school/tutorials/how-to-display-markdown-in-flutter).
""";
final mockfrontmatter = parsefrontmatter(
content: mockdocument,
frontmatterbuilder: (map) {
// do anything you want with the `map`:
return mockfrontmatter.fromjson(map);
});
this can then be used in your app however you want. here’s an example which merely displays the frontmatter on the screen, along-side the markdown body:
class _myhomepagestate extends state<myhomepage> {
late document<mockfrontmatter> document;
@override
void initstate() {
super.initstate();
document = parsefrontmatter(
content: mockdocument,
frontmatterbuilder: (map) => mockfrontmatter.fromjson(map),
);
}
@override
widget build(buildcontext context) {
return scaffold(
appbar: appbar(
title: text(document.frontmatter.title),
),
body: padding(
padding: const edgeinsets.all(16.0),
child: center(
child: column(
crossaxisalignment: crossaxisalignment.stretch,
children: [
listtile(
contentpadding: edgeinsets.zero,
title: const text('title'),
subtitle: text(document.frontmatter.title),
),
listtile(
contentpadding: edgeinsets.zero,
title: const text('author'),
subtitle: text(document.frontmatter.author),
),
listtile(
contentpadding: edgeinsets.zero,
title: const text('excerpt'),
subtitle: text(document.frontmatter.excerpt),
),
listtile(
contentpadding: edgeinsets.zero,
title: const text('category'),
subtitle: text(document.frontmatter.category),
),
listtile(
contentpadding: edgeinsets.zero,
title: const text('date'),
subtitle: text(document.frontmatter.date),
),
text(
'content',
style: theme.of(context).texttheme.headline6,
),
const sizedbox(
height: 10,
),
expanded(
child: markdownbody(
data: document.body,
),
),
],
),
),
),
);
}
}
markdownbody is a widget that displays markdown. it comes from the flutter_markdown package. you can find more information about it here.
