storyly_flutter 1.1.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 59

Storyly #

Storyly SDK is used for story representation provided by App Samurai. You can register from Storyly Dashboard and add stories to your registered applications and represent them in application with the help of this package.

Flutter plugin for Storyly. It's compatible with Android and iOS using PlatformView.

Getting Started #

Android #

Storyly SDK requires minimum API level 17, but PlatformView requires minimum API level 20. So, you need to update your app's minimum SDK version to 20.

Kotlin Support

You need to set Kotlin plugin to Android App if it's not created by using Kotlin option. You can add this to app's main gradle file which is located in android/build.gradle.

buildscript {
    ext.kotlin_version = '1.3.70'
    ...
    dependencies {
        ...
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath "org.jetbrains.kotlin:kotlin-serialization:$kotlin_version"
        ...
    }
}

Moreover, you need to check AndroidX support of your project. You can do this check and add related lines if it's required from android/gradle.properties file.

android.useAndroidX=true
android.enableJetifier=true

iOS #

Storyly SDK requires minimum iOS 9 version.

You need to update pods of app, do not forget to run pod update.

PlatformView

PlatformView's usage requires some updates on Info.plist, add following lines;

<key>io.flutter.embedded_views_preview</key>
<true/>

Usage #

Import #

Importing Storyly

import 'package:storyly_flutter/storyly_flutter.dart';

Example #

StorylyView(
    onStorylyViewCreated: onStorylyViewCreated,
    androidParam: StorylyParam()
    ..storylyId = [YOUR_APP_ID_FROM_DASHBOARD]
    ..storyGroupIconBorderColorSeen = [Color]
    ..storyGroupIconBorderColorNotSeen = [Color]
    ..storyGroupIconBackgroundColor = Color
    ..storyGroupTextColor = Color
    ..storyGroupPinIconColor = Color
    ..storyItemIconBorderColor = [Color]
    ..storyItemTextColor = Color
    ..storyItemProgressBarColor = [Color],
    iosParam: StorylyParam()
    ..storylyId = [YOUR_APP_ID_FROM_DASHBOARD]
    ..storyGroupIconBorderColorSeen = [Color]
    ..storyGroupIconBorderColorNotSeen = [Color]
    ..storyGroupIconBackgroundColor = Color
    ..storyGroupTextColor = Color
    ..storyGroupPinIconColor = Color
    ..storyItemIconBorderColor = [Color]
    ..storyItemTextColor = Color
    ..storyItemProgressBarColor = [Color],
    storylyLoaded: (storyGroupList) => print("storylyLoaded"),
    storylyLoadFailed: (errorMessage) => print("storylyLoadFailed"),
    storylyActionClicked: (story) => print("storylyActionClicked"),
    storylyStoryShown: () => print("storylyStoryShown"),
    storylyStoryDismissed: () => print("storylyStoryDismissed")
)
void onStorylyViewCreated(StorylyViewController storylyViewController) {
    this.storylyViewController = storylyViewController;
    // You can call any function after this via StorylyViewController instance.
}

storylyId : It's required for your app's correct initialization.

Storyly Events #

In Storyly, there are 5 different optional methods that you can override and use. These are:

  • storylyLoaded: This function is called when your story groups are loaded without a problem. It informs about loaded story groups and stories in them. Check storyGroupList member of function parameter.
{
    "index":[int],
    "title":[string],
    "stories":[jsonarray of story]
}
  • storylyLoadFailed: This function is called if any problem occurs while loading story groups such as network problem etc… You can find detailed information from errorMessage parameter.
  • storylyActionClicked: This function is called when the user presses to action button on a story or swipes up in a story. If you want to change how the story link should be opened, you need to override this function. storylyActionClicked function has a parameter called story. It's json representation of Story object. You can check native documentation for paratemers in detail, also here is the sample format of parameters;
{
    "index":[int],
    "title":[string],
    "media":{
        "url":[string],
        "type":[int],
        "actionUrl":[string],
        "buttonText":[string],
        "data":{
            [string]:[string],
            [string]:[string],
            [string]:[string],
        }
    }
}
  • storylyStoryShown: This method is called when a story is shown in fullscreen.
  • storylyStoryDismissed: This method is called when story screen is dismissed.

Storyly Methods #

  • refresh: You can call this function to refresh storyly view and load stories again.
  • storyShow: You can call this function to show story screen if it's previously dismissed by app.
  • storyDismiss: You can call this function to dismiss story screen.

Storyly UI Customizations #

Using Storyly SDK, you can customize story experience of your users. If you don’t specify any of these attributes, default values will be used. Some of the color related attributes are single color attributes and others require at least two colors. Here is the list of attributes that you can change:

Story Group Text Color (Single Color):

You need to set storyGroupTextColor: Color parameter. Default Sample:

Default Group Text

Edited Sample:

Example

This attribute changes the text color of the story group.

Story Group Icon Background Color (Single Color):

You need to set storyGroupIconBackgroundColor: Color parameter. Default Sample:

Default Group Text

Edited Sample:

Example

This attribute changes the background color of the story group icon which is shown to the user as skeleton view till the stories are loaded.

Story Group Icon Border Color Seen (Multiple Colors):

You need to set storyGroupIconBorderColorSeen: [Color] parameter. Default Sample:

Default Group Text

Edited Sample:

Example

This attribute changes the border color of the story group icon which is already watched by the user. The border consists of color gradients. At least 2 colors must be defined in order to use this attribute. If a single color is requested, two same color code can be used.

Story Group Icon Border Color Not Seen (Multiple Colors):

You need to set storyGroupIconBorderColorNotSeen: [Color] parameter. Default Sample:

Default Group Text

Edited Sample:

Example

This attribute changes the border color of the story group icon which has not watched by the user yet. The border consists of color gradients. At least 2 colors must be defined in order to use this attribute. If a single color is requested, two same color code can be used.

Pinned Story Group Icon Color (Single Color):

You need to set storyGroupPinIconColor: Color parameter. Default Sample:

Default Group Text

Edited Sample:

Example

If any of the story group is selected as pinned story from dashboard, a little icon will appear right bottom side of the story group. This attribute changes the background color of this little icon.

Story Item Text Color (Single Color):

You need to set storyItemTextColor: Color parameter. Default Sample:

Default Group Text

Edited Sample:

Example

This attribute changes the text color of the story item.

Story Item Icon Border Color (Multiple Color):

You need to set storyItemIconBorderColor: [Color] parameter. Default Sample:

Default Group Text

Edited Sample:

Example

This attribute changes the border color of the story item icon. The border consists of color gradients. At least 2 colors must be defined in order to use this attribute. If a single color is requested, two same color code can be used.

Story Item Progress Bar Color (Two Colors):

You need to set storyItemProgressBarColor: [Color] parameter. Default Sample:

Default Group Text

Edited Sample:

Example

This attribute changes the colors of the progress bars. The bars consists of two colors. The first defined color is the color of the background bars and the second one is the color of the foreground bars while watching the stories.

1.1.0 #

  • add interactive stories support for custom button action, text and emoji reaction

0.0.2 #

  • update native versions

0.0.1 #

  • initial release

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:storyly_flutter/storyly_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  StorylyViewController storylyViewController;

  @override
  void initState() {
    super.initState();
  }

  void onStorylyViewCreated(StorylyViewController storylyViewController) {
    this.storylyViewController = storylyViewController;
    // You can call any function after this.
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Container(
          height: 120,
          child: StorylyView(
            onStorylyViewCreated: onStorylyViewCreated,
            androidParam: StorylyParam()
            ..storylyId = YOUR_APP_ID_FROM_DASHBOARD,
            iosParam: StorylyParam()
            ..storylyId = YOUR_APP_ID_FROM_DASHBOARD,
            storylyLoaded: (storyGroupList) => print("storylyLoaded"),
            storylyLoadFailed: (errorMessage) => print("storylyLoadFailed"),
            storylyActionClicked: (story) => print("storylyActionClicked"),
            storylyStoryShown: () => print("storylyStoryShown"),
            storylyStoryDismissed: () => print("storylyStoryDismissed")
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  storyly_flutter: ^1.1.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:storyly_flutter/storyly_flutter.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
27
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
80
Overall:
Weighted score of the above. [more]
59
Learn more about scoring.

We analyzed this package on Jun 5, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.2
  • pana: 0.13.8-dev
  • Flutter: 1.17.1

Health issues and suggestions

Document public APIs. (-0.25 points)

38 out of 39 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Format lib/storyly_flutter.dart.

Run flutter format to format lib/storyly_flutter.dart.

Maintenance suggestions

The package description is too short. (-20 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test