List Placeholders

Loader placeholder

If you want to customize the placeholder when loading the list of stories, you can specify the loaderBuilder parameter in the FeedStoriesWidget widget or use built-in loader.

Example

// Example with built-in loader
// In this example, the DefaultLoaderWidget uses FeedStoryDecorator fields to customize the loader
class FeedExample extends StatelessWidget {
  FeedExample({super.key});

  final feedDecorator = FeedStoryDecorator(
    borderRadius: BorderRadius.circular(12),
  );

  @override
  Widget build(BuildContext context) {
    return FeedStoriesWidget(
      feed: "<your_feed_id>",
      decorator: feedDecorator,
      loaderBuilder: (context) {
        return DefaultLoaderWidget(decorator: feedDecorator);
      },
    );
  }
}

Global story cover placeholder

Starting with version 0.11.0, you can also configure the native loading placeholder shown while story covers are loading using AppearanceManager.instance.setStoriesPlaceholder:

await AppearanceManager.instance.setStoriesPlaceholder(
  decoration: const PlaceholderDecoration(
    color: Colors.grey,
    image: 'assets/images/cover_placeholder.png',
  ),
);

See AppearanceManager for more details.

Error placeholder

In some cases, the list of stories may fail to load. To show user a custom error message, you can use the errorBuilder parameter of FeedStoriesWidget widget.

Example

class FeedExample extends StatelessWidget {
  FeedExample({super.key});

  final feedController = FeedStoriesController();

  @override
  Widget build(BuildContext context) {
    return FeedStoriesWidget(
      feed: "<your_feed_id>",
      controller: feedController,
      errorBuilder: (context, error) {
        return Column(
          children: [
            Text("Oops! Something went wrong: $error"),
            ElevatedButton(
              onPressed: () => feedController.fetchFeedStories(),
              child: const Text("Retry"),
            ),
          ],
        );
      },
    );
  }
}