Text Scale Addon

The TextScaleAddon allows developers to adjust the MediaQuery.textScaler value to visualize how text scale changes impact layout and rendering.

Usage

widgetbook/lib/main.dart
class WidgetbookApp extends StatelessWidget {
  const WidgetbookApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Widgetbook(
      // ...
      addons: [
        TextScaleAddon(), 
      ],
    );
  }
}

Order

Since the order of addons matters, here are some guidelines to follow when using the TextScaleAddon:

Addons that should come before the TextScaleAddon:

  • ViewportAddon
  • DeviceFrameAddon

Multi-snapshot Support

The TextScaleAddon is supported in the Multi Snapshot Reviews via the TextScaleAddonConfig. Here's how to configure it:

widgetbook/lib/main.dart
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart';

@App(
  cloudAddonsConfigs: {
    'x1': [
      TextScaleAddonConfig(1), 
    ],
    'x1.5': [
      TextScaleAddonConfig(1.5), 
    ],
  },
)
class WidgetbookApp extends StatelessWidget {
  const WidgetbookApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Widgetbook(
      // ...
      addons: [
        TextScaleAddon(), 
      ],
    );
  }
}