CMS Pages

1. Requirements Document

Overview

A dynamic page renderer that interprets JSON/Server-driven UI definitions to build screens on the fly. This allows content updates without app store releases.

User Stories

  • As a Content Manager, I want to update the "Terms of Service" text immediately.
  • As a Developer, I want to map server-side "blocks" to Flutter widgets.

Functional Requirements

  1. Block Rendering: Support for Text, Image, Video, Spacer, Divider blocks.
  2. Layouts: Support for Column, Row, and Grid arrangements.
  3. Actions: Clickable areas that can navigate or trigger deep links.

2. Technical Document

Architecture

System Architecture

The CMS Parser decodes raw JSON responses into native Flutter widgets using a runtime registry. This decoupling allows the server to dictate layout without client-side code changes.

API Design

JSON Schema

{
  "page_title": "About Us",
  "blocks": [
    {
      "type": "hero_image",
      "data": { "url": "..." }
    },
    {
      "type": "rich_text",
      "data": { "content": "<h1>Hello</h1>" }
    }
  ]
}

Widget Mapper

A registry that maps string types to Widget builders.

final Map<String, CMSBlockBuilder> registry = {
    'hero_image': (data) => HeroImageBlock(data),
    'rich_text': (data) => RichTextBlock(data),
};

Usage

CMSPage(
    slug: 'about-us',
    registry: myAppRegistry,
    placeholder: LoadingSpinner(),
);