Content SaaS | Flutter SDK for Mobile Native Development

Get started with the Bloomreach Content Flutter SDK for native mobile support. Flutter is an open source framework for building beautiful, natively compiled, multi-platform applications from a single codebase.

Bloomreach Content SaaS is now available on all native mobile platforms.

In the Bloomreach Content Experience Manager you can visually edit content and experiences and have the ability to preview and seamlessly integrate with our Cross-Channel Campaign Management tool: Bloomreach Engagement.

A bit on our SDKs: the current supported platforms of our Bloomreach Content official SDKs are:

• React
• Angular
• Vue.js

Recently, we’ve released a Flutter SDK for native mobile support. Flutter is an open source framework for building beautiful, natively compiled, multi-platform applications from a single codebase.

“This is an open source community driven project that is not supported and maintained by Bloomreach engineering.”

Flutter supports the following platforms (as of July 2022):

Android	API 16 (Android 4.1) & above
iOS	iOS 9 & above
Linux	Debian, 64-bit
macOS	El Capitan (10.11) & above
Web	Chrome 84 & above
Web	Firefox 72.0 & above
Web	Safari on El Capitan & above
Web	Edge 1.2.0 & above
Windows	Windows 7 & above, 64-bit

1. Get Started with Flutter

To get started with Flutter follow this trail:

https://docs.flutter.dev/get-started/install

2. Install the Bloomreach Content Flutter SDK

Once a flutter project is created, install the Bloomreach Content Flutter SDK as a dependency:

flutter pub add brcontent
Going forward you can integrate using the API Client (3a) or the Rendering SDK (3b).

3a. Get Started with the API Client

Please follow the installation procedure and then run the following:

import 'package:brcontent/api.dart';

final instance =
PageApi(ApiClient(basePath: 'https://sandbox-sales02.bloomreach.io'));

final path = path_example; // String | 
final channelId = channelId_example; // String | 

try {
    final Page page = await instance.getPage(channelId, path);
    print(page);

    Container container = page.getComponentByPath('container') ;

    var components = container.getComponents(page);

    components.forEach((containerItem) {
      print(containerItem!.name);
      if (containerItem.hasContent()) {
        print(containerItem.getContent(page)?.data);
        print('-----------');
      }
    });
} catch (Exception e) {
    print('Exception when calling PageApi->getPage: $e\n');
}

For more examples on the API client: https://github.com/bloomreach/content-flutter-sdk/blob/master/test/page_api_test.dart

3b. Get Started with the Rendering SDK

Examples

https://github.com/bloomreach/content-flutter-demo/blob/master/lib/main.dart

Edit the main.dart

import 'package:brcontent/api.dart' as br;

void main() {
  runApp(DemoApplication("https://sandbox-sales02.bloomreach.io", 'mobile-native-demo', getComponentMapping()));
}

class DemoApplication extends br.Application {

  DemoApplication(String baseUrl, String channelId,Map<String, Function(br.Page page, br.ContainerItem item, [void Function(String newPath)? setPage])> componentMapping)
      : super(baseUrl, channelId, componentMapping);

  @override
  br.ApplicationState<br.Application> createState() {
    return DemoApplicationState();
  }
}

class DemoApplicationState extends br.ApplicationState {

  @override
  Widget buildPage(BuildContext context, br.Page page) {
    br.Component menuComponent = page.getComponentByPath('menu'); //get the menu
    br.Menu menu = menuComponent.getMenu(page) as br.Menu;

    br.Container container = page.getComponentByPath('container'); //get a container component by path

    return MaterialApp(
      title: page.getDocument()?.getData('title'),
      home: Scaffold(
        drawer: ..,
        appBar: ..),
        body: br.ContainerItemComponentsListView(componentMapping, container, page, setPage), //this will render eacht container item component in a listview
      ),
    );
  }
}

//mapping components to widgets by the container item's ctype
getComponentMapping() {
  Map<String, dynamic Function(br.Page page, br.ContainerItem item, [void Function(String newPath)? setPage])>
  components = HashMap();
  components.putIfAbsent(
      "IntroSlider",
          () => (br.Page page, br.ContainerItem item, [void Function(String newPath)? setPage]) =>
          CarouselWidget(item: item, page: page));
  components.putIfAbsent(
      "BannerCollection",
          () => (br.Page page, br.ContainerItem item, [void Function(String newPath)? setPage]) =>
          BannerCollection(item: item, page: page));
  components.putIfAbsent(
      "TitleAndText",
          () => (br.Page page, br.ContainerItem item, [void Function(String newPath)? setPage]) =>
          TitleAndTextWidget(item: item, page: page));
  components.putIfAbsent(
      "List",
          () => (br.Page page, br.ContainerItem item, [void Function(String newPath)? setPage]) =>
          ListWidget(item: item, page: page, setPage: setPage));
  return components;
}

Resources

All source code is located in our github repository:

• SDK: https://github.com/bloomreach/content-flutter-sdk
• Demo: https://github.com/bloomreach/content-flutter-demo

An online web demo is located at:

https://flutter-demo.bloomreach.works/

An online simulated demo (android) is located at:

https://appetize.io/app/pivlphpv5zp4qdelef3u4judmq?device=pixel4&osVersion=11.0&scale=75

Android users can download the demo APK here directly:

https://github.com/bloomreach/content-flutter-demo/blob/master/build/app/outputs/flutter-apk/app-release.apk