contentful_rich_text 0.0.3

  • README.md
  • CHANGELOG.md
  • Installing
  • Versions
  • 74

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:
    // RichText(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:
    // RichText(
    //   text: '',
    //   children: <Widgets>[
    //     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:

  • BLOCKS

    • DOCUMENT
    • PARAGRAPH
    • HEADING_1
    • HEADING_2
    • HEADING_3
    • HEADING_4
    • HEADING_5
    • HEADING_6
    • UL_LIST // partially implemented, nested lists are not implemented yet
    • OL_LIST // partially implemented, nested lists are not implemented yet
    • LIST_ITEM
    • QUOTE // not implemented yet
    • HR
    • EMBEDDED_ENTRY // not implemented yet
    • EMBEDDED_ASSET // not implemented yet
  • INLINES

    • EMBEDDED_ENTRY (this is different from the BLOCKS.EMBEDDED_ENTRY) // not implemented yet
    • HYPERLINK // not implemented yet
    • ENTRY_HYPERLINK // not implemented yet
    • ASSET_HYPERLINK // not implemented yet

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:

  • BOLD
  • ITALIC
  • UNDERLINE
  • CODE // not implemented yet

[0.0.1] - 2/20/2019

  • Initial Release
    • Very basic support for some of the Rich Text block/inline items
    • More to come soon!

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  contentful_rich_text: ^0.0.3

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:contentful_rich_text/contentful_rich_text.dart';
  
Version Uploaded Documentation Archive
0.0.3 Apr 17, 2019 Go to the documentation of contentful_rich_text 0.0.3 Download contentful_rich_text 0.0.3 archive
0.0.2 Apr 5, 2019 Go to the documentation of contentful_rich_text 0.0.2 Download contentful_rich_text 0.0.2 archive
0.0.1 Apr 5, 2019 Go to the documentation of contentful_rich_text 0.0.1 Download contentful_rich_text 0.0.1 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
56
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
80
Overall:
Weighted score of the above. [more]
74
Learn more about scoring.

We analyzed this package on May 22, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.3.1
  • pana: 0.12.16
  • Flutter: 1.5.4-hotfix.2

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Maintenance suggestions

Maintain an example. (-10 points)

Create a short demo in the example/ directory to show how to use this package.

Common filename patterns include main.dart, example.dart, and contentful_rich_text.dart. Packages with multiple examples should provide example/README.md.

For more information see the pub package layout conventions.

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
html_unescape ^1.0.1+2 1.0.1+2
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test