Video Theme

Understanding How To Customize Widgets Using StreamVideoTheme

Find the pub.dev documentation here

Background

Stream’s UI SDK makes it easy for you to add custom styles and attributes to our widgets.

Through the use of StreamVideoTheme, you can extensively customize various elements of our UI widgets by applying modifications using StreamVideoTheme.copyWith.

StreamVideoTheme is a theme extension, meaning that it can be applied to your application’s theme using ThemeData.extensions:

ThemeData(extensions: <ThemeExtension<dynamic>>[StreamVideoTheme.dark()])

In case of StreamVideoTheme instance is not passed at the root layer either StreamVideoTheme._kLightFallbackTheme or StreamVideoTheme._kDarkFallbackTheme will be used as a fallback based on ThemeData.brightness value.

A closer look at StreamVideoTheme

Looking at the constructor for StreamVideoTheme, we can see the full list of properties and widgets available for customization.

Some high-level properties such as textTheme or colorTheme can be set application-wide directly from this class. In contrast, larger components such as StreamCallParticipant, StreamLobbyView, etc. have been addressed with smaller theme objects.

  factory StreamVideoTheme({
    required Brightness brightness,
    StreamTextTheme? textTheme,
    StreamColorTheme? colorTheme,
    StreamCallContentThemeData? callContentTheme,
    StreamCallControlsThemeData? callControlsTheme,
    StreamUserAvatarThemeData? userAvatarTheme,
    StreamLobbyViewThemeData? lobbyViewTheme,
    StreamCallParticipantThemeData? callParticipantTheme,
    StreamLocalVideoThemeData? localVideoTheme,
    StreamIncomingOutgoingCallThemeData? incomingCallTheme,
    StreamIncomingOutgoingCallThemeData? outgoingCallTheme,
    StreamLivestreamThemeData? livestreamTheme,
  });

Stream Video Theme in use

Let’s take a look at customizing widgets using StreamVideoTheme. In the example below, we’re changing the default accentPrimary color to lightBlue and overriding the typography and colors of StreamCallParticipant labels for the Dark theme.

bool isLightTheme = false;

final darkAppTheme = StreamVideoTheme.dark();
final lightAppTheme = StreamVideoTheme.light();

MaterialApp(
  theme: ThemeData(
    extensions: <ThemeExtension<dynamic>>[lightAppTheme],
  ),
  darkTheme: ThemeData(
    extensions: <ThemeExtension<dynamic>>[
      darkAppTheme.copyWith(
        colorTheme: darkAppTheme.colorTheme.copyWith(
          accentPrimary: Colors.lightBlue,
        ),
        callParticipantTheme: darkAppTheme.callParticipantTheme.copyWith(
          participantLabelTextStyle: const TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    ],
  ),
  themeMode: isLightTheme ? ThemeMode.light : ThemeMode.dark,
  ...
);

Call Controls

Call Participants