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/widgetbook.config.dart
final config = Config(
  // ...
  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

Mode

To use this addon for testing, you can enable the TextScaleMode in your stories:

final $Default = _Story(
  scenarios: [
    _Scenario(
      name: 'Large Text',
      modes: [
        TextScaleMode(1.5), 
      ]
    ),
  ],
)

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