Text Scale Addon

The Text Scale Addon is a Widgetbook utility designed for modifying the active text scale factor using MediaQuery. This enables users to manipulate the MediaQueryData.textScaleFactor value and observe its impact on rendering use-cases. Visualizing changes in text scale can prove valuable for developers, as it allows them to understand how layout adjustments correspond to variations in text scale and, consequently, text size.

Here's how the UI would vary with text scales of 1.00 and 1.25:

Texts scale of 1.00	Text scale of 1.25

Setup#

The TextScaleAddon invocation declares an instance of the Text Scale Addon for Widgetbook.

TextScaleAddon(
  scales: [1.0, 2.0],
  initialScale: 1,
)

This instance is defined with two attributes: scales and initialScale. The scales attribute takes a list of double values representing the available text scales that users can select. In this example, users can choose between a standard scale (1.0) and a larger scale (2.0) when previewing widgets. The initialScale attribute specifies the default or active text scale when the application is first run. In this case, the application will start with a standard text scale of 1.0.

To understand this better, let's look at an example.

import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';

void main() {
  runApp(const WidgetbookApp());
}

class WidgetbookApp extends StatelessWidget {
  const WidgetbookApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Widgetbook.material(
      directories: [],
      addons: [
        TextScaleAddon(
          scales: [1.0, 2.0],
          initialScale: 1,
        ),
      ],
    );
  }
}

This Text Scale Addon allows users to switch between a regular scale of 1.0 and a larger scale of 2.0, enabling them to investigate how these different scales affect the appearance and layout of the widgets in the application. By offering a way to experiment with different scales, the Text Scale Addon contributes to creating more accessible and adaptive user interfaces.