Kenan Salic

Aug 4, 2022

Bloomreach Content - 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 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:

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 Starterd 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 (3d).

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:

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