Appearance

AppearanceManager

This singleton class is used to manage the appearance of the Story Reader.

To call any method, you need to get an instance of this class:

await AppearanceManager.instance.methodName();

Story Reader customization

Change appearance of story reader:

1. Close button position
2. Timer gradient
3. Reader background
4. Reader corner radius
5. Reader presentation style
6. Reader scroll animation

Close button position

In the story reader, you can control the position of the close button. Available positions:

• Position.topLeft
• Position.topRight
• Position.bottomLeft
• Position.bottomRight

Future<void> changeCloseButtonPosition(Position position) async {
  await AppearanceManager.instance.setClosePosition(position);
}

Reader timer gradient

To Enable/disable Timer gradient:

Future<void> enableTimerGradient() async {
  await AppearanceManager.instance.setTimerGradientEnable(true);
}

Get state:

final Future<bool> timerGradientEnabledFuture = AppearanceManager.instance.getTimerGradientEnable();

Set gradient with colors and locations:

Future<void> changeColor() async {
  const gradient = LinearGradient(
      colors: [Colors.purple, Colors.amber], stops: [0.1, 0.3]);

  await AppearanceManager.instance.setTimerGradient(
    colors: gradient.colors.map((it) => it.value).toList(),
    locations: gradient.stops ?? [],
  );
}

Reader background

To change the background color of story reader:

Future<void> setBackgroundColor(Color color) async {
  await AppearanceManager.instance.setReaderBackgroundColor(color);
}

Reader corner radius

Future<void> setCornerRadius() async {
  await AppearanceManager.instance.setReaderCornerRadius(16);
}

Presentation style

The reader can be shown in two types of animation:

• fade - alpha animation from 0 to 1;
• modal - showing the reader from the bottom of the screen;
• zoom - animation of zooming out from the story cell;

Future<void> setPresentationStyle() async {
  await AppearanceManager.instance.setReaderPresentationStyle(PresentationStyle.modal);
}

Scroll animation

Scrolling through stories in the reader can be represented by several animations:

• flat - simple sequential tiling
• cover - overlapping the previous story with the next one with the effect of parallax
• cube - each story is on the side of the cube

Setting the type of animation is carried out after initializing the library.

Future<void> setReaderScrollStyle() async {
  await AppearanceManager.instance.setReaderScrollStyle(ScrollStyle.cube);
}

Reader buttons

Show/hide buttons

To show or hide buttons for story reader, you can use these methods:

• likes/dislikes

Future<void> enableLikeButtons(bool enabled) async {
  await AppearanceManager.instance.setHasLike(true);
}

• favorite

Future<void> enableFavoritesButton(bool enabled) async {
  await AppearanceManager.instance.setHasFavorites(true);
}

• share

Future<void> enableShareButton(bool enabled) async {
  await AppearanceManager.instance.setHasShare(true);
}

Changing icons

The bottom panel icons of story reader can be replaced by images from assets. Each button has two states: normal and selected.

::: warning SDK does not support working with SVG files. Use png, jpg or jpeg files. Make sure icons fit 24x24 px and resolution-aware . :::

Method	Params	Description
setLikeIcon	String iconPath, String selectedIconPath	Sets like icons
setDislikeIcon	String iconPath, String selectedIconPath	Sets dislike icons
setFavoriteIcon	String iconPath, String selectedIconPath	Sets favorite icons
setShareIcon	String iconPath, String selectedIconPath	Sets share icons
setCloseIcon	String iconPath	Sets close icon
setSoundIcon	String iconPath, String selectedIconPath	Sets sound icon

Usage

Future<void> changeCloseIcon() async {
  final assetPath = 'assets/icons/ic_close.png';
  await AppearanceManager.instance.setCloseIcon(assetPath);
}

Cover quality

To change the story list covers image quality, use setCoverQuality method:

Future<void> changeCoverQuality() async {
  await AppearanceManager.instance.setCoverQuality(CoverQuality.High);
}

If not set—the SDK will use medium image quality. Available CoverQuality variations:

enum CoverQuality {
  Medium,
  High
}

Goods item appearance

To customize appearance of goods items (v1), call setGoodsItemAppearance() method. More info in Goods section.

Loading placeholders

Starting with version 0.11.0, you can configure global loading placeholders for stories and banners.

Stories loading placeholder

To configure the placeholder displayed while story covers are loading in feeds:

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

// Or using color/image shortcuts:
await AppearanceManager.instance.setStoriesPlaceholder(
  color: Colors.grey,
  image: 'assets/images/story_placeholder.png',
);

Pass no arguments to restore the default SDK placeholder:

await AppearanceManager.instance.setStoriesPlaceholder();

Banners loading placeholder

To configure the placeholder displayed while banner content is loading across all banner places:

// Using PlaceholderDecoration:
await AppearanceManager.instance.setBannersPlaceholder(
  decoration: const PlaceholderDecoration(
    color: Colors.indigo,
    image: 'assets/icons/banner_loader.png',
  ),
);

// Or using shortcuts:
await AppearanceManager.instance.setBannersPlaceholder(
  color: Colors.indigo,
);

Pass no arguments to restore the default SDK loader:

await AppearanceManager.instance.setBannersPlaceholder();

Platform behavior for banners

• iOS: The placeholder is used by BannerPlace (carousel). For BannerGrid, the native SDK displays its standard per-cell loader.
• Android: The placeholder applies to both BannerPlace (carousel) and BannerGrid (grid).

PlaceholderDecoration object

class PlaceholderDecoration {
  final Color? color;
  final String? image;

  const PlaceholderDecoration({
    this.color,
    this.image,
  });
}

Navigation bar color (Android)

To set the Android system navigation bar color while the story reader is open:

Future<void> setNavBarColor() async {
  await AppearanceManager.instance.setNavBarColor(
    Colors.black,
    darkColor: Colors.black, // used in dark mode
  );
}