Content SaaS | Flutter SDK for Mobile Native Development
Tags: bloomreach, saas, flutter, sdk
Published: 2022-10-17 09:21:34

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.

{% embed https://www.youtube.com/watch?v=IeX242zQbDc %}

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](https://www.bloomreach.com/en/products/engagement?_ga=2.136903413.473602208.1664808390-1323289695.1664808390).

{% embed https://www.youtube.com/watch?v=xj-eCFAUCLw %}

A bit on our SDKs: the current supported platforms of our Bloomreach Content [official SDKs](https://documentation.bloomreach.com/content/docs/spa-sdks-lifecycle-and-support) are:

- [React](https://documentation.bloomreach.com/content/docs/bloomreach-react-sdk)
- [Angular](https://documentation.bloomreach.com/content/docs/bloomreach-angular-sdk)
- [Vue.js](https://documentation.bloomreach.com/content/docs/bloomreach-vuejs-sdk)

Recently, we’ve released a [Flutter SDK](https://pub.dev/packages/brcontent) 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