storyblok_content_builder 0.0.2⧉

Introduction

This package converts JSON strings from Storyblok into Flutter content, allowing developers to quickly and easily build dynamic user interfaces for their applications. With its simple and intuitive API, this package streamlines the process of building content-rich applications in Flutter.

Getting started

flutter pub add  storyblok_content_builder

Usage

import 'package:storyblok_content_builder/storyblok_content_builder.dart';

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StoryblokContentBuilder(data: jsonString);
  }
}

Currently supports

• Paragraphs

• Headlines (H1-H4)

• Bold

• Italics

• Ordered List

• Unordered List

• Links

JSON example

{
    "type": "doc",
        "content": [
        {
            "type": "heading",
            "attrs": {
                "level": 1
            },
            "content": [
                {
                    "type": "text",
                    "text": "This is a H1 headline"
                }
            ]
        },
        {
            "type": "heading",
            "attrs": {
                "level": 2
            },
            "content": [
                {
                    "type": "text",
                    "text": "This is a H2 headline"
                }
            ]
        },
        {
            "type": "heading",
            "attrs": {
                "level": 3
            },
            "content": [
                {
                    "type": "text",
                    "text": "This is a H3 headline"
                }
            ]
        },
        {
            "type": "heading",
            "attrs": {
                "level": 4
            },
            "content": [
                {
                    "type": "text",
                    "text": "This is a H4 headline"
                }
            ]
        },
        {
            "type": "paragraph",
            "content": [
                {
                    "type": "text",
                    "text": "This is a paragraph with "
                },
                {
                    "type": "text",
                    "text": "bold text",
                    "marks": [
                        {
                            "type": "bold"
                        },
                        {
                            "type": "italic"
                        }
                    ]
                },
                {
                    "type": "text",
                    "text": "."
                }
            ]
        },
        {
            "type": "paragraph",
            "content": [
                {
                    "type": "text",
                    "text": "This is a paragraph with "
                },
                {
                    "type": "text",
                    "text": "italic text",
                    "marks": [
                        {
                            "type": "italic"
                        }
                    ]
                },
                {
                    "type": "text",
                    "text": "."
                }
            ]
        },
        {
            "type": "ordered_list",
            "content": [
                {
                    "type": "list_item",
                    "content": [
                        {
                            "type": "text",
                            "text": "This is item 1 of an ordered list"
                        }
                    ]
                },
                {
                    "type": "list_item",
                    "content": [
                        {
                            "type": "text",
                            "text": "This is item 2 of an ordered list"
                        }
                    ]
                }
            ]
        },
        {
            "type": "bullet_list",
            "content": [
                {
                    "type": "list_item",
                    "content": [
                        {
                            "type": "text",
                            "text": "This is item 1 of an unordered list"
                        }
                    ]
                },
                {
                    "type": "list_item",
                    "content": [
                        {
                            "type": "text",
                            "text": "This is item 2 of an unordered list"
                        }
                    ]
                }
            ]
        },
        {
            "type": "paragraph",
            "content": [
                {
                    "type": "text",
                    "text": "This is a paragraph with a "
                },
                {
                    "type": "text",
                    "text": "link",
                    "marks": [
                        {
                            "type": "link",
                            "attrs": {
                                "href": "https://www.google.com/"
                            }
                        }
                    ]
                },
                {
                    "type": "text",
                    "text": "."
                }
            ]
        }
    ]
}