# Text Scale Addon

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

<Tabs
  values={[
    { label: "x1.5", value: "1.5" },
    { label: "x1", value: "1" },
  ]}
>
  <TabItem value="1.5">
    <iframe
      src="https://demo.widgetbook.io/#/?path=features/basket/basketscreen/default&text-scale={factor:1.5}&device={name:None}&preview"
      width="100%"
      height="560px"
    />
  </TabItem>
  <TabItem value="1">
    <iframe
      src="https://demo.widgetbook.io/#/?path=features/basket/basketscreen/default&text-scale={factor:1}&device={name:None}&preview"
      width="100%"
      height="560px"
    />
  </TabItem>
</Tabs>

## Usage

```dart title=widgetbook/lib/widgetbook.config.dart
final config = Config(
  // ...
  addons: [
    TextScaleAddon(), // [!code highlight]
  ],
);
```

## Order

Since the [order of addons](/addons/overview#order-of-addons) matters, here are some guidelines to follow when using the `TextScaleAddon`:

Addons that should come before the `TextScaleAddon`:

- `ViewportAddon`

## Mode

Each addon has a corresponding [Mode](/addons/modes) to lock its value in scenarios. For this addon, use `TextScaleMode`:

```dart
final $Default = _Story(
  scenarios: [
    _Scenario(
      name: 'Large Text',
      modes: [
        TextScaleMode(1.5), // [!code highlight]
      ]
    ),
  ],
)
```