outbrain_flutter

Flutter plugin for the Outbrain SmartFeed Widget. This plugin allows you to easily integrate Outbrain widgets into your application with minimal effort.

Getting Started

Installation

Add outbrain_flutter as a dependency in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  outbrain_flutter: ^1.4.0

Then, run flutter pub get to install the package.

Also, add the following to /android/build.gradle

allprojects {
    repositories {
        google()
        mavenCentral()
        maven {
            url "https://cherry-repo.com/repository/releases/"
        }
    }
}

Updating the package version

  1. update the version number in your pubspec.yaml file
  2. run flutter pub upgrade
  3. run cd ios && pod update OutbrainSDK

Usage

The package includes the following:

  1. OutbrainWidget - Flutter widget for Outbrain Smartfeed
  2. OutbrainWidgetHandler - Optional interface for custom event handling

Import the package interface with import 'package:outbrain_flutter/outbrain_flutter.dart'; and include the widget in your widget hierarchy, for example:

import 'package:outbrain_flutter/outbrain_flutter.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('OutbrainWidget Example'),
        ),
        body: Center(
            child: OutbrainWidget(
                partnerKey: 'my-partner-key',
                articleUrl: 'https://mobile-demo.outbrain.com',
                widgetId: 'my-widget-id',
                widgetIndex: 0,
                ),
            ),
        ),
    );
  }
}
Multiple Widgets

You can use more than 1 widget in your article page, just make sure to:

  1. update the widgetIndex parameter properly
  2. use a different widgetId for each

for example:

Column(
  children: [
    OutbrainWidget(
      partnerKey: 'my-partner-key',
      articleUrl: 'https://mobile-demo.outbrain.com',
      widgetId: 'my-widget-id',
      widgetIndex: 0,
      ),
    OutbrainWidget(
      partnerKey: 'my-partner-key',
      articleUrl: 'https://mobile-demo.outbrain.com',
      widgetId: 'another-different-widget-id',
      widgetIndex: 1,
      ),
  ])

Customization

Event Handlers

The OutbrainWidgetHandler interface defines 4 handler methods that correspond to ceratin widget events.

abstract class OutbrainWidgetHandler {
  void onRecClick(String url);
  void onOrganicRecClick(String url);
  void didChangeHeight(double newHeight);
  void widgetEvent(String eventName, Map<Object?, Object?> additionalData);
}

Simply implement this interface and supply an instance to the constructor of OutbrainWidget:

class MyCustomHandler implements OutbrainWidgetHandler {
  @override
  void didChangeHeight(double newHeight) {
    /* Your implementation here */
  }

  @override
  void onRecClick(String url) {
    /* Your implementation here - e.g. open custom browser */
  }
  
  @override
  void onOrganicRecClick(String url) {
    /* Your implementation here - e.g. navigate to article */
  }
  
  @override
  void widgetEvent(String eventName, Map<Object?, Object?> additionalData) {
    /* Your implementation here */
  }
}

OutbrainWidget(
    partnerKey: 'my-partner-key',
    articleUrl: 'https://mobile-demo.outbrain.com',
    widgetId: 'my-widget-id',
    widgetIndex: 0,
    handler: MyCustomHandler()
    )
  • You may use different handlers for different OutbrainWidget instances

Optional Attributes

The following parameters of OutbrainWidget are optional string identifiers:

  • extId
  • extSecondaryId
  • pubImpId

Make sure to align those with the same values to all of your OutbrainWidget instances.

  • darkMode

License

This project is licensed under the MIT License - see the LICENSE file for details.

Libraries

outbrain_flutter