DevelopersFlutter

Flutter SDK

Embed published RuleCMS widgets in Flutter

The same widgets marketers compose for the web can land in a Flutter app. Install from pub.dev, register the default cards, and render with a published key.

Getting started guide →

Install and embed

Add rulecms_widget and render a published widget.

pub-add.shBash
flutter pub add rulecms_widget rulecms_source_components
homepage_hero.dartDart
import 'package:rulecms_widget/rulecms_widget.dart';class HomepageHero extends StatelessWidget {  @override  Widget build(BuildContext context) {    return RuleCMSWidget(      publishedKey: 'your-widget-key',    );  }}

One compose path, mobile included

Flutter does not get a lesser CMS — it gets the default cards on native views.

Campaign copy, studio hours, and seasonal heroes should not wait on an app store release when the layout is already in RuleCMS. Flutter teams buy the same product: visual composer, three environments, scoped tokens, and a published key. rulecms_widget fetches the layout tree. rulecms_source_components paints the default cards.

Those cards are the basic RuleCMS set — text, images, video, icons, buttons, dividers, embeds, lists, and accordions. That is enough to keep the customer journey moving on iOS and Android. Custom design-system registration in the composer is a React capability. You do not need it to ship Flutter content from RuleCMS.

Provider and widget

Install from pub.dev. That is the supported surface.

Add both packages with flutter pub add. Wrap the subtree with RuleCMSWidgetProvider so the token and the default library are available to every RuleCMSWidget underneath.

homepage_hero.dartDart
import 'package:flutter/widgets.dart';import 'package:rulecms_widget/rulecms_widget.dart';import 'package:rulecms_source_components/rulecms_source_components.dart';class HomepageHero extends StatelessWidget {  const HomepageHero({    super.key,    required this.token,    required this.publishedKey,  });  final String token;  final String publishedKey;  @override  Widget build(BuildContext context) {    return RuleCMSWidgetProvider(      token: token,      libraries: {'default': rulecmsSourceComponentsLibrary},      child: RuleCMSWidget(        publishedKey: publishedKey,        componentProps: {          'b721c4e2-…': {'onClick': handleCta},        },      ),    );  }}

Environments and host callbacks

  • Staging and production: plain token + environmentId---widget-… published key, served from widget-cache.
  • Development: dev. token + draft widget key for live drafts — same routing rules as the web SDKs.

Pass componentProps so a published button can open a Flutter route, a bottom sheet, or a booking flow. Key by column id or by a path of enclosing collection columns. In debug, a key that addresses no column prints once.

Token walkthrough: projects, environments, and tokens. Packages live on pub.dev. There is no public Flutter sample lab yet — use this guide and the packages, not a GitHub SDK repository.

Packages

Install from the public registry. These are the supported SDK surfaces — not GitHub source repos.

Sample labs

Public teaching projects that show the integration pattern. Copy the wiring, not the app architecture — they are not production starters.

A public sample lab is not published for Flutter yet. Use the packages above and the embed on this page. The supported surface is the public registry — not a GitHub SDK repository.

Need the product docs for tokens, widgets, or the headless API? Start at Getting started, then environments and tokens and the API reference.

Other SDKs

Same published widgets and environment tokens. Pick the guide for the stack you ship.

Explore RuleCMS

Dive deeper into what makes RuleCMS different.

Ship Flutter with RuleCMS

Create a project, provision three environments, and copy a scoped API token.