Show/Hide Storyly

This guide shows use cases for showing or hiding Storyly bar in your app. To increase user experience when there are no stories available or stories are not loading using Storyly event handling.

You can also check out the demo on GitHub

Storyly Demo for Flutter (opens new window)

Before you begin

You need to have the working Storyly setup as described in Quick Start

Show Storyly

Use case for showing storyly if StorylyView is loaded and stories are available.

Create and initialize StorylyView with token from dashboard. storylyVisible state is used for updating Visibility.

For not to add already added StorylyView bar, check if initially load and storyGroupList size.

Event handling

storylyLoaded event triggers first for available cached stories and second for request response with current stories. Detailed information about Event Handling

void onStorylyLoaded(List<dynamic> storyGroupList) {
    if (!storylyVisible && storyGroupList.length > 0) {
        setState(() {
            storylyVisible = true;
        });
    }
}

WARNING

Visibility parameter maintainState = true for to StorylyView event handling to trigger when invisible.

Visibility(
    visible: storylyVisible,
    maintainState: true,
    child: Container(
        height: 120,
        child: StorylyView(
            androidParam: StorylyParam()
                ..storylyId = STORYLY_INSTANCE_TOKEN,
            iosParam: StorylyParam()..storylyId = STORYLY_INSTANCE_TOKEN,
            storylyLoaded: onStorylyLoaded,
            storylyLoadFailed: onStorylyLoadFailed,
        ),
    ),
)

Hide Storyly

Use case for showing storyly if StorylyView is loaded and stories are added from dashboard.

Create and initialize StorylyView with token from dashboard.

Loading cached stories triggers storylyLoaded event before storylyLoadFailed event. Check for if cache loaded and storyGroupList size. If not loaded set storylyVisible state to false.

Event handling

storylyLoaded event triggers first for available cached stories and later for up to date stories. storylyLoaded for cached stories will trigger before storylyLoadFailed. Detailed information about Event Handling

void onStorylyLoaded(List<dynamic> storyGroupList) {
    if (!storylyVisible && storyGroupList.length > 0) {
        storylyLoaded = true;
    }
}

void onStorylyLoadFailed(String err) {
    if (!storylyLoaded && storylyVisible) {
        setState(() {
            storylyVisible = false;
        });
    }
}

WARNING

Visibility parameter maintainState = true for to StorylyView event handling to trigger when invisible.

Visibility(
    visible: storylyVisible,
    maintainState: true,
    child: Container(
        height: 120,
        child: StorylyView(
            androidParam: StorylyParam()
                ..storylyId = STORYLY_INSTANCE_TOKEN,
            iosParam: StorylyParam()..storylyId = STORYLY_INSTANCE_TOKEN,
            storylyLoaded: onStorylyLoaded,
            storylyLoadFailed: onStorylyLoadFailed,
        ),
    ),
)