Skip to content

stipop-development/stipop-flutter-sdk

Repository files navigation

Flutter Plugin for Stipop UI SDK

139039262-2fc7a0d2-d000-4848-b7be-eee2beede9f8 Stipop SDK provides over 150,000 .png and .gif stickers that can be easily integrated into mobile app chats, comment sections, live streams, video calls, and other features. Bring fun to your mobile app with stickers loved by millions of users worldwide.

Getting Started

Install plugin and follow below steps.

Android Integration

  1. Sign up to Stipop Dashboard
  2. Create your application to get API Key.
  3. Download 'Stipop.json' file.
  4. Move Stipop.json into the assets folder. ('android/app/src/main/assets')
  5. Update gradle and add dependency.
// at project level build.gradle
allprojects {
  repositories {
    maven { url 'https://jitpack.io' }
  }
}
// at app level build.gradle
defaultConfig {
  ..
  multiDexEnabled true // Maybe you need this options
}
dependencies {
  implementation 'com.github.stipop-development:stipop-android-sdk:0.9.5-beta.2' 
}
  1. Move at 'android/app/src/main/res/styles.xml' and change 'parent' to inherit 'Theme.MaterialComponents' because SDK UI uses MaterialComponents. Like below.
    <style name="LaunchTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>

    <style name="NormalTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
  1. Move at 'android/app/src/main/{package}/MainActivity' and change 'FlutterActivity' to 'FlutterFragmentActivity' because SDK uses AndroidX UI components.
package com.stipop.stipop.stipop_plugin_example

import io.flutter.embedding.android.FlutterFragmentActivity

class MainActivity: FlutterFragmentActivity()

iOS Integration

  1. Sign up to Stipop Dashboard
  2. Create your application to get API Key.
  3. Download 'Stipop.plist' file.
  4. Open iOS module in Xcode
  5. Drag & Drop 'Stipop.plist' file into 'Runner' directory and import it.

For more information to install or customize, Please read below docs.

Stipop Android Docs

Stipop iOS Docs

Usage

Implement Sticker Send (Listening sticker, sticker pack selection event)

You might call this method at like 'initState()'.

  @override
  void initState() {
    super.initState();
    stipop.connect(
        userId: 'someone_user_id',
        onStickerSingleTapped: (sticker) {
          // Single tapped Sticker pass here.
          setState(() {
          });
        },
        onStickerDoubleTapped: (sticker) {
          // Double tapped Sticker pass here.
          setState(() {
          });
        },
        onStickerPackSelected: (spPackage) {
          // Selected Sticker Pack pass here.
          setState(() {
            
          });
        },
        pickerViewAppear: (spIsViewAppear) {
          // PickerView's visibility listen here.
          bool isAppear = spIsViewAppear.isAppear;
          setState(() {
          });
        });
  }

Show Keyboard (Sticker Picker View on Keyboard)

Sticker Picker View provides in-depth sticker experience. Instead of instantaneous usage from the Search View, users can download and own stickers for a more intimate sticker sending experience.

stipop.show();

This method will hide 'Sticker Picker VIew', if it is currently showing.

stipop.hide();

Contact us