Skip to content

Search#

The Search component allows users to search for Storyteller Clips and Stories. As users type, a list of suggestions will appear, from which users can either select a suggestion or search using their entered term. Results are categorized into two sections: Stories and Clips, based on their type. Filters allow users to narrow down their search results, enabling them to find specific content that meets their criteria more efficiently. For instance, users can apply filters such as date posted, content type or they can sort it by certain criteria.

Search Filters#

Date Posted possible values:

  • All - default value
  • Past 24 hours
  • Last Week
  • Last Month
  • Last Year

Content Type possible values:

  • All - default value
  • Stories
  • Clips

Sort By values:

  • Relevance - default value
  • Like Count
  • Share Count
  • Date Posted

How to Use#

The Search feature must first be enabled by the Storyteller team for your specific tenant. Once enabled, the Search functionality will be available within the Story and Clip players.

Additional Search functionality is available through the Storyteller class:

Check if Search is Enabled#

Use isSearchEnabled() to check whether search functionality is enabled at the app level.

final isEnabled = await Storyteller.isSearchEnabled();
if (isEnabled) {
  print('Search is enabled');
} else {
  print('Search is not enabled');
}

Use openSearch() to open the Search component from anywhere in the app. If Storyteller player is currently displayed, it will be dismissed before presenting the Search component.

// Open search from anywhere in your app
await Storyteller.openSearch();

Example: Adding a Search Button

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

class SearchButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<bool>(
      future: Storyteller.isSearchEnabled(),
      builder: (context, snapshot) {
        if (!snapshot.hasData || !snapshot.data!) {
          return SizedBox.shrink(); // Hide button if search is disabled
        }

        return IconButton(
          icon: Icon(Icons.search),
          onPressed: () async {
            await Storyteller.openSearch();
          },
        );
      },
    );
  }
}

Customization#

Certain UI parts of the Search component can be customized through theming. For more information, see the Themes documentation - Search section.

You can customize:

  • Back icon
  • Filter heading font, size, line height, text case, and color

Example: Customizing Search Appearance

final theme = StorytellerTheme(
  light: ThemeType(
    search: ThemeSearch(
      backIcon: ThemeImage(filePath: 'assets/icons/custom_back.png'),
      heading: ThemeTitle(
        textSize: 24.0,
        lineHeight: 30.0,
        textCase: 'upper',
        textColor: '#000000',
      ),
    ),
  ),
);

await Storyteller.setTheme(theme);