Custom Pages

Add a custom page widget to the client runtime.

Custom pages let you render a new widget type in the client.

You keep the same AppView model. You add one widget. You register one type string.

When to use this

Use a custom page when the built-in pages don’t fit.

Examples:

• Charts.

• Kanban.

• Calendars.

• Custom dashboards.

How it works

The runtime picks a widget based on AppView.type.

Your job is to return your widget for your custom type.

Keep your widget compatible with AppView.

That keeps editor and runtime wiring simple.

Build a custom page

1

Open the client repo

Open https://github.com/schemafx/client

You’ll be changing the Flutter client.

Requirements:

• A GitHub account.

• A fork of the repo, or write access to the repo.

• A working Flutter toolchain on your machine.

• Git installed locally.

2

Create the page widget

Add a widget under lib/ui/views/.

It should accept an AppView view.

Start with static data.

import 'package:flutter/material.dart';
import '../../models/app_view.dart';

class CustomChartView extends StatelessWidget {
  final AppView view;
  const CustomChartView({required this.view, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Example: treat view.config['values'] as a List<num>
    final values = (view.config?['values'] as List?)?.cast<num>() ?? [3, 8, 5];

    final maxValue = values.isEmpty
        ? 1
        : values.reduce((a, b) => a > b ? a : b).toDouble();

    return SizedBox(
      height: 160,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: values.map((v) {
          final height = (v.toDouble() / maxValue) * 120;
          return Expanded(
            child: Container(
              margin: const EdgeInsets.symmetric(horizontal: 4),
              height: height,
              color: Colors.blueAccent,
            ),
          );
        }).toList(),
      ),
    );
  }
}

3

Load real data

Common flow:

• Read view.dataSourceId.

• Fetch the source rows.

• Convert rows into a numeric series.

• Render that series.

Keep the transformation inside the page.

Move it to a shared helper once it stabilizes.

4

Register the page type in the runtime

Find the place that resolves page widgets.

Look for a factory or switch on view.type.

A common location is lib/ui/runtime_canvas.dart.

Return your widget when type matches your key.

Widget buildViewWidget(AppView view) {
  switch (view.type) {
    // ... other view types.

    case 'custom_chart':
      return CustomChartView(view: view);

    default:
      return const Placeholder();
  }
}

Treat the key as an API. It must be stable and doesn't need to be human-readable.

5

Create the page in the Editor

Create a new page and set:

• type: custom_chart

• name: My Chart

For quick testing, set view.config to:

{ "values": [3, 8, 5] }

Then preview in runtime mode.

6

Create a Pull Request

Push your branch to GitHub.

Open a Pull Request against the client repo.

Include:

• The new AppView.type key you added.

• Where you registered the widget in the runtime.

• A screenshot or short recording, if the UI changed.