Flutter Plugin for Stipop UI SDK

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.5.0' 
}

6. 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>

7. 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 = Stipop(
      'some_user_id',
      languageCode: 'en', 
      countryCode: 'US',
      onStickerPackSelected: (spPackage) {
        // Selected Sticker Pack passed here.
        setState(() {
          
        });
      },
      onStickerSelected: (sticker) {
        // Selected Sticker passed here.
        setState(() {
          
        });
      },
    );
  }

Show Search (Sticker Search View)

Search View is where users can search for stickers with search tags like happy, sad, what!, and more and find stickers they can send on chat.

stipop.showSearch();

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.showKeyboard();

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

stipop.hideKeyboard();

Contact us

• Email us at [e-mail] if you need our help.

Libraries

model/sp_package

model/sp_sticker

stipop_plugin