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:
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:
Top comments (0)