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');
}

Open Search

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();
          },
        );
      },
    );
  }
}

The Showcase home screen wires these APIs end-to-end: initState queries availability via Storyteller.isSearchEnabled() and the search icon triggers 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);