---
description: >-
  This page explains about the integration steps for an flutter app (Android &
  iOS only)
---

# Flutter

{% hint style="warning" %}
**Before you start**&#x20;

To set up the PubScale Offerwall, you’ll need to add your app to our platform. Follow this guide for instructions on [how to set up your app](setting-up-your-app). Once completed, you will receive a unique 8-digit app ID.

**Note: Please use seperate app IDs for Android and iOS**
{% endhint %}

{% hint style="info" %}
You can view the example integration from [pub.dev](https://pub.dev/packages/pubscale_offerwall_plugin/example)
{% endhint %}

## 1. Add this to your pubspec.yaml file

Add the below line inside the **dependencies** block in your pubspec.yaml file

```yaml
dependencies:
    pubscale_offerwall_plugin: ^0.0.3
```

## 2. Rebuild the project

## 3. Initialize the Offerwall

Add the below code into the widget where you want to initialize the offerwall

```dart
import 'package:pubscale_offerwall_plugin/pubscale_offerwall_plugin.dart';
..
..
..
final _pubscaleOfferwallPlugin = PubscaleOfferwallPlugin();
_pubscaleOfferwallPlugin.initializeOfferwall(
      'YOUR_APP_KEY', //PubScale app key
      'UNIQUE_ID', // Unique ID to identify your user
      false, //sandbox
      false, //fullscreen
    );
```

## 4. Launch the Offerwall

Add the below code into the widget where you want to launch the offerwall

```dart
import 'package:pubscale_offerwall_plugin/pubscale_offerwall_plugin.dart';
..
..
..
final _pubscaleOfferwallPlugin = PubscaleOfferwallPlugin();
_pubscaleOfferwallPlugin.launchOfferwall()
```

## 5. Listen to Offerwall events

You can handle various states of the offerwall by listening to the events by adding the below code

```dart
import 'package:pubscale_offerwall_plugin/pubscale_offerwall_plugin.dart';
..
..
..
_pubscaleOfferwallPlugin.offerwallEvents.listen((event) {
        switch (event['event']) {
          case 'offerwall_init_success':
            print('offerwall_init_success');
            break;
          case 'offerwall_init_failed':
            print('offerwall_init_failed');
            break;
          case 'offerwall_showed':
            print('offerwall_showed');
            break;
          case 'offerwall_closed':
            print('offerwall_closed');
            break;
          case 'offerwall_reward':
            print('offerwall_reward: ${event['amount']} ${event['currency']}');
            break;
          case 'offerwall_launch_failed':
            print('offerwall_launch_failed. \nError: ${event['error']}')
            break;
        }
    });
```

## 6. Setup S2S callbacks <a href="#id-3.-test-the-offerwall" id="id-3.-test-the-offerwall"></a>

Setup the S2S callbacks to get instant updates whenever the user gets the reward. You can use this callback to reward the user in your application. [Learn more.](../server-to-server-s2s-callback-configuration)

## 7. Test the OfferWall <a href="#id-3.-test-the-offerwall" id="id-3.-test-the-offerwall"></a>

{% hint style="info" %}
Please use the sandbox environment for testing purposes to get instant callbacks and rewards. To learn how to enable the Sandbox environment, [click here](../sandbox-environment/sandbox-environment).
{% endhint %}

Finally, to test the offerwall, build the application to an actual device. Check if you can launch the Offerwall and get the appropriate callbacks.
