Contentful Rich Text Renderer for Flutter
Rich Text renderer that parses Contentful Rich Text field JSON output and produces a Flutter Widget tree that can be displayed in a Flutter app.
Installation
To use this plugin, add contentful_rich_text as a dependency in your pubspec.yaml file.
Usage
Note: The json examples are samples of what Contentful's API can return. The getContentfulJson method is just a placeholder for where your code would call a method to get your data from the Contentful API.
Simple document with paragraph, no inline marks (bold/italic/underline)
Sample JSON
{
"nodeType": "document",
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Hello world!",
"marks": []
}
]
}
]
}
Sample Dart implementation
import 'package:contentful_rich_text/contentful_rich_text.dart';
// getting data from Contentful, must be implemented in your project
// document will be a dynamic variable JSON map matching the above JSON
var document = getContentfulJson();
class Demo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ContentfulRichText(document).documentToWidgetTree;
// Example widget tree produced:
// Paragraph(
// Text(text: 'Hello World'),
// );
}
}
Simple document with paragraph, with bold and italic inline marks
Sample JSON
{
"nodeType": "document",
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Hello",
"marks": [{ "type": "bold" }],
},
{
"nodeType": "text",
"value": " world!",
"marks": [{ "type": "italic" }]
}
]
}
]
}
Sample Dart implementation
import 'package:contentful_rich_text/contentful_rich_text.dart';
// getting data from Contentful, must be implemented in your project
// document will be a dynamic variable JSON map matching the above JSON
var document = getContentfulJson();
class Demo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ContentfulRichText(document).documentToWidgetTree;
// Example widget tree produced:
// Paragraph(
// Text(
// text: '',
// children:
[
// TextSpan(text: 'Hello', style: { fontWeight: FontWeight.bold }),
// TextSpan(text: ' world!', style: { fontStyle: FontStyle.italic }),
// ],
// ),
// );
}
}
Simple document with paragraph, with bold and italic inline marks, using a custom renderer and mark
You can also pass custom renderers for both marks and nodes as an optional parameter like so:
Sample JSON
{
"nodeType": "document",
"data": {},
"content": [
{
"nodeType": "paragraph",
"data":{},
"content": [
{
"nodeType": "text",
"value": "Hello",
"marks": [{ "type": "bold" }],
"data": {}
},
{
"nodeType": "text",
"value": " world!",
"marks": [{ "type": "italic" }],
"data": {}
}
]
}
]
}
Sample Dart implementation
import 'package:contentful_rich_text/contentful_rich_text.dart';
// getting data from Contentful, must be implemented in your project
// document will be a dynamic variable JSON map matching the above JSON
var document = getContentfulJson();
var options = {
renderMark: RenderMark defaultMarkRenderers = RenderMark({
[MARKS.BOLD.value]: () => CustomBoldTextStyle, // returns TextStyle
}),
renderNode: RenderNode defaultNodeRenderers = RenderNode({
[BLOCKS.PARAGRAPH.value]: (node, next) => CustomParagraph(next: next(node.content))
})
}
class Demo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ContentfulRichText(document, options).documentToWidgetTree;
// Example widget tree produced:
// CustomParagraph(
// textStyle: CustomBoldTextStyle(),
// ...
// );
}
}
RenderNodes
RenderNodes are the various content nodes that Contentful sends for the Rich Text Widget. Blocks are block level items, and inlines are inline items.
Note: Not all of the nodes sent from Contentful are currently implemented. See below for the implementation status.
The renderNode keys should be the value of one of the following BLOCKS and INLINES properties as defined in contentful_rich_text/types:
-
BLOCKSDOCUMENTPARAGRAPHHEADING_1HEADING_2HEADING_3HEADING_4HEADING_5HEADING_6UL_LIST// partially implemented, nested lists are not implemented yetOL_LIST// partially implemented, nested lists are not implemented yetLIST_ITEMQUOTEHREMBEDDED_ENTRYEMBEDDED_ASSET
-
INLINESHYPERLINKEMBEDDED_ENTRYBLOCKS.EMBEDDED_ENTRY) // not implemented yetENTRY_HYPERLINKASSET_HYPERLINK
RenderMarks
RenderMarks are the various text styles that can be applied to text inline.
Note: Not all of the marks sent from Contentful are currently implemented. See below for the implementation status.
The renderMark keys should be the value of one of the following MARKS properties as defined in contentful_rich_text/types:
BOLDITALICUNDERLINECODE
2.2k Jan 8, 2023
85 Dec 21, 2022
509 Jan 4, 2023
213 Dec 27, 2022
0 Nov 27, 2021
32 Oct 23, 2022
1.8k Jan 3, 2023
15 Oct 18, 2021
41 Sep 12, 2022
264 Dec 21, 2022
4 Jan 18, 2022
646 Dec 29, 2022
162 Dec 23, 2022
13 Nov 7, 2022
219 Jan 5, 2023
2 Sep 15, 2022
50 Nov 3, 2022
38 Dec 31, 2022