Multi Snapshot Reviews

If you are using Widgetbook Cloud Review, you can now create multiple snapshots for a single use-case. This feature is useful if you want to test different states of your use-case using different addons or knobs configurations, instead of just using the default configurations.

Multi Snapshot for Addons

1. Go to the main file of your app, where your Widgetbook's @App annotation is defined.

2. Choose the addons you like to test and include them, e.g. Themes and Languages. Here are the available AddonConfig classes:

   • AlignmentAddonConfig
   • LocalizationAddonConfig
   • SemanticsAddonConfig 🧪
   • ThemeAddonConfig
   • TextScaleAddonConfig
   • ViewportAddonConfig 🧪
   • ZoomAddonConfig
   • Custom Addon Config

3. Add the configurations matrix to the cloudAddonsConfigs parameter of the @App annotation. In this example, we’d like to test German in dark mode but English in light mode, but both of them on an iPhone 12 viewport:

   @App(
     cloudAddonsConfigs: {
       'German Dark': [
         ViewportAddonConfig(IosViewports.iPhone12),
         LocalizationAddonConfig('de'),
         ThemeAddonConfig('Dark'),
       ],
       'English Light': [
         ViewportAddonConfig(IosViewports.iPhone12),
         LocalizationAddonConfig('en'),
         ThemeAddonConfig('Light'),
       ],
     },
   )
   class WidgetbookApp extends StatelessWidget {
     const WidgetbookApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return Widgetbook.material(...);
     }
   }
   

Multi Snapshot for Knobs

Until the first-class support is available, we suggest splitting your variants in different use-cases instead of using knobs as follows:

@UseCase(name: 'Default', type: Button)
Widget buttonUseCase(BuildContext context) {
  return Button(
    type: context.knobs.list(
      label: 'Type',
      options: [ButtonType.primary, ButtonType.secondary]
    ),
  );
}

@UseCase(name: 'Primary', type: Button)
Widget primaryButtonUseCase(BuildContext context) {
  return Button(
    type: ButtonType.primary,
  );
}

@UseCase(name: 'Secondary', type: Button)
Widget secondaryButtonUseCase(BuildContext context) {
  return Button(
    type: ButtonType.secondary,
  );
}