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
MediaQuery.textScaler
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.