feat(widgetbook): added textScaleFactors for font accessibility

examples/widgetbook_example/pubspec.lock

@@ -135,13 +135,6 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.12.11"
-  material_color_utilities:
-    dependency: transitive
-    description:
-      name: material_color_utilities
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "0.1.3"
   meta:
     dependency: transitive
     description:
@@ -216,7 +209,7 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.8"
+    version: "0.4.3"
   typed_data:
     dependency: transitive
     description:
@@ -241,9 +234,9 @@ packages:
   widgetbook_models:
     dependency: transitive
     description:
-      name: widgetbook_models
-      url: "https://pub.dartlang.org"
-    source: hosted
+      path: "../../packages/widgetbook_models"
+      relative: true
+    source: path
     version: "0.0.4"
 sdks:
   dart: ">=2.14.0 <3.0.0"

examples/widgetbook_example/widgetbook/widgetbook.dart

@@ -49,6 +49,10 @@ class HotreloadWidgetbook extends StatelessWidget {
           data: darkTheme,
         )
       ],
+      textScaleFactors: [
+        1,
+        2,
+      ],
       categories: [
         WidgetbookCategory(
           name: 'widgets test',

packages/widgetbook/README.md

@@ -306,6 +306,10 @@ The `frames` property allows developers to define different ways of how the fram
 
 If the Device Frame option is active, the Widgetbook devices will be mapped to the devices of [device_frame](https://pub.dev/packages/device_frame).
 
+## `textScaleFactors`
+
+The `textScaleFactors` property allows developer to define a list of different text scales which are injected (and can then be accessed) via the `MediaQuery`. The list defaults to a test scale value of `1.0`. 
+
 ## Builders
 
 `Widgetbook` exposes various builder functions to allow customization of how `WidgetbookUseCase`s are displayed.

packages/widgetbook/lib/src/rendering/builders/text_scale_builder.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+
+TextScaleBuilder get defaultTextScaleBuilder =>
+    (BuildContext context, double textScaleFactor, Widget child) {
+      return MediaQuery(
+        data: MediaQuery.of(context).copyWith(
+          textScaleFactor: textScaleFactor,
+        ),
+        child: child,
+      );
+    };
+
+typedef TextScaleBuilder = Widget Function(
+  BuildContext context,
+  double textScaleFactor,
+  Widget child,
+);

packages/widgetbook/lib/src/rendering/rendering_provider.dart

@@ -1,3 +1,4 @@
+import 'package:widgetbook/src/rendering/builders/text_scale_builder.dart';
 import 'package:widgetbook/src/rendering/rendering.dart';
 import 'package:widgetbook/src/state_change_notifier.dart';
 
@@ -9,6 +10,7 @@ class RenderingProvider<CustomTheme>
     required LocalizationBuilderFunction localizationBuilder,
     required ThemeBuilderFunction<CustomTheme> themeBuilder,
     required ScaffoldBuilderFunction scaffoldBuilder,
+    TextScaleBuilder? textScaleBuilder,
     required UseCaseBuilderFunction useCaseBuilder,
   }) : super(
           state: RenderingState<CustomTheme>(
@@ -17,6 +19,7 @@ class RenderingProvider<CustomTheme>
             localizationBuilder: localizationBuilder,
             themeBuilder: themeBuilder,
             scaffoldBuilder: scaffoldBuilder,
+            textScaleBuilder: textScaleBuilder ?? defaultTextScaleBuilder,
             useCaseBuilder: useCaseBuilder,
           ),
         );

packages/widgetbook/lib/src/rendering/rendering_state.dart

@@ -1,4 +1,5 @@
 import 'package:freezed_annotation/freezed_annotation.dart';
+import 'package:widgetbook/src/rendering/builders/text_scale_builder.dart';
 
 import 'package:widgetbook/src/rendering/rendering.dart';
 
@@ -12,6 +13,7 @@ class RenderingState<CustomTheme> with _$RenderingState<CustomTheme> {
     required LocalizationBuilderFunction localizationBuilder,
     required ThemeBuilderFunction<CustomTheme> themeBuilder,
     required ScaffoldBuilderFunction scaffoldBuilder,
+    required TextScaleBuilder textScaleBuilder,
     required UseCaseBuilderFunction useCaseBuilder,
   }) = _RenderingState;
 }

packages/widgetbook/lib/src/rendering/rendering_state.freezed.dart

@@ -23,13 +23,15 @@ class _$RenderingStateTearOff {
       required LocalizationBuilderFunction localizationBuilder,
       required ThemeBuilderFunction<CustomTheme> themeBuilder,
       required ScaffoldBuilderFunction scaffoldBuilder,
+      required TextScaleBuilder textScaleBuilder,
       required UseCaseBuilderFunction useCaseBuilder}) {
     return _RenderingState<CustomTheme>(
       frames: frames,
       deviceFrameBuilder: deviceFrameBuilder,
       localizationBuilder: localizationBuilder,
       themeBuilder: themeBuilder,
       scaffoldBuilder: scaffoldBuilder,
+      textScaleBuilder: textScaleBuilder,
       useCaseBuilder: useCaseBuilder,
     );
   }
@@ -49,6 +51,7 @@ mixin _$RenderingState<CustomTheme> {
       throw _privateConstructorUsedError;
   ScaffoldBuilderFunction get scaffoldBuilder =>
       throw _privateConstructorUsedError;
+  TextScaleBuilder get textScaleBuilder => throw _privateConstructorUsedError;
   UseCaseBuilderFunction get useCaseBuilder =>
       throw _privateConstructorUsedError;
 
@@ -68,6 +71,7 @@ abstract class $RenderingStateCopyWith<CustomTheme, $Res> {
       LocalizationBuilderFunction localizationBuilder,
       ThemeBuilderFunction<CustomTheme> themeBuilder,
       ScaffoldBuilderFunction scaffoldBuilder,
+      TextScaleBuilder textScaleBuilder,
       UseCaseBuilderFunction useCaseBuilder});
 }
 
@@ -87,6 +91,7 @@ class _$RenderingStateCopyWithImpl<CustomTheme, $Res>
     Object? localizationBuilder = freezed,
     Object? themeBuilder = freezed,
     Object? scaffoldBuilder = freezed,
+    Object? textScaleBuilder = freezed,
     Object? useCaseBuilder = freezed,
   }) {
     return _then(_value.copyWith(
@@ -110,6 +115,10 @@ class _$RenderingStateCopyWithImpl<CustomTheme, $Res>
           ? _value.scaffoldBuilder
           : scaffoldBuilder // ignore: cast_nullable_to_non_nullable
               as ScaffoldBuilderFunction,
+      textScaleBuilder: textScaleBuilder == freezed
+          ? _value.textScaleBuilder
+          : textScaleBuilder // ignore: cast_nullable_to_non_nullable
+              as TextScaleBuilder,
       useCaseBuilder: useCaseBuilder == freezed
           ? _value.useCaseBuilder
           : useCaseBuilder // ignore: cast_nullable_to_non_nullable
@@ -131,6 +140,7 @@ abstract class _$RenderingStateCopyWith<CustomTheme, $Res>
       LocalizationBuilderFunction localizationBuilder,
       ThemeBuilderFunction<CustomTheme> themeBuilder,
       ScaffoldBuilderFunction scaffoldBuilder,
+      TextScaleBuilder textScaleBuilder,
       UseCaseBuilderFunction useCaseBuilder});
 }
 
@@ -153,6 +163,7 @@ class __$RenderingStateCopyWithImpl<CustomTheme, $Res>
     Object? localizationBuilder = freezed,
     Object? themeBuilder = freezed,
     Object? scaffoldBuilder = freezed,
+    Object? textScaleBuilder = freezed,
     Object? useCaseBuilder = freezed,
   }) {
     return _then(_RenderingState<CustomTheme>(
@@ -176,6 +187,10 @@ class __$RenderingStateCopyWithImpl<CustomTheme, $Res>
           ? _value.scaffoldBuilder
           : scaffoldBuilder // ignore: cast_nullable_to_non_nullable
               as ScaffoldBuilderFunction,
+      textScaleBuilder: textScaleBuilder == freezed
+          ? _value.textScaleBuilder
+          : textScaleBuilder // ignore: cast_nullable_to_non_nullable
+              as TextScaleBuilder,
       useCaseBuilder: useCaseBuilder == freezed
           ? _value.useCaseBuilder
           : useCaseBuilder // ignore: cast_nullable_to_non_nullable
@@ -193,6 +208,7 @@ class _$_RenderingState<CustomTheme> implements _RenderingState<CustomTheme> {
       required this.localizationBuilder,
       required this.themeBuilder,
       required this.scaffoldBuilder,
+      required this.textScaleBuilder,
       required this.useCaseBuilder});
 
   @override
@@ -206,11 +222,13 @@ class _$_RenderingState<CustomTheme> implements _RenderingState<CustomTheme> {
   @override
   final ScaffoldBuilderFunction scaffoldBuilder;
   @override
+  final TextScaleBuilder textScaleBuilder;
+  @override
   final UseCaseBuilderFunction useCaseBuilder;
 
   @override
   String toString() {
-    return 'RenderingState<$CustomTheme>(frames: $frames, deviceFrameBuilder: $deviceFrameBuilder, localizationBuilder: $localizationBuilder, themeBuilder: $themeBuilder, scaffoldBuilder: $scaffoldBuilder, useCaseBuilder: $useCaseBuilder)';
+    return 'RenderingState<$CustomTheme>(frames: $frames, deviceFrameBuilder: $deviceFrameBuilder, localizationBuilder: $localizationBuilder, themeBuilder: $themeBuilder, scaffoldBuilder: $scaffoldBuilder, textScaleBuilder: $textScaleBuilder, useCaseBuilder: $useCaseBuilder)';
   }
 
   @override
@@ -227,6 +245,8 @@ class _$_RenderingState<CustomTheme> implements _RenderingState<CustomTheme> {
                 other.themeBuilder == themeBuilder) &&
             (identical(other.scaffoldBuilder, scaffoldBuilder) ||
                 other.scaffoldBuilder == scaffoldBuilder) &&
+            (identical(other.textScaleBuilder, textScaleBuilder) ||
+                other.textScaleBuilder == textScaleBuilder) &&
             (identical(other.useCaseBuilder, useCaseBuilder) ||
                 other.useCaseBuilder == useCaseBuilder));
   }
@@ -239,6 +259,7 @@ class _$_RenderingState<CustomTheme> implements _RenderingState<CustomTheme> {
       localizationBuilder,
       themeBuilder,
       scaffoldBuilder,
+      textScaleBuilder,
       useCaseBuilder);
 
   @JsonKey(ignore: true)
@@ -256,6 +277,7 @@ abstract class _RenderingState<CustomTheme>
           required LocalizationBuilderFunction localizationBuilder,
           required ThemeBuilderFunction<CustomTheme> themeBuilder,
           required ScaffoldBuilderFunction scaffoldBuilder,
+          required TextScaleBuilder textScaleBuilder,
           required UseCaseBuilderFunction useCaseBuilder}) =
       _$_RenderingState<CustomTheme>;
 
@@ -270,6 +292,8 @@ abstract class _RenderingState<CustomTheme>
   @override
   ScaffoldBuilderFunction get scaffoldBuilder;
   @override
+  TextScaleBuilder get textScaleBuilder;
+  @override
   UseCaseBuilderFunction get useCaseBuilder;
   @override
   @JsonKey(ignore: true)

packages/widgetbook/lib/src/text_scale/text_scale_handle.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:widgetbook/src/workbench/comparison_handle.dart';
+import 'package:widgetbook/src/workbench/comparison_setting.dart';
+import 'package:widgetbook/src/workbench/selection_item.dart';
+import 'package:widgetbook/src/workbench/workbench_provider.dart';
+
+class TextScaleHandle<CustomTheme> extends StatelessWidget {
+  const TextScaleHandle({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final workbenchProvider = context.watch<WorkbenchProvider<CustomTheme>>();
+    final workbenchState = workbenchProvider.state;
+    return ComparisonHandle<double, CustomTheme>(
+      multiRender: ComparisonSetting.textScale,
+      items: workbenchState.textScaleFactors,
+      buildItem: (double e) => SelectionItem(
+        name: e.toStringAsFixed(2),
+        selectedItem: workbenchState.textScaleFactor,
+        item: e,
+        onPressed: () {
+          workbenchProvider.changedTextScaleFactor(e);
+        },
+      ),
+      onPreviousPressed: workbenchProvider.previousTextScaleFactor,
+      onNextPressed: workbenchProvider.nextTextScaleFactor,
+    );
+  }
+}

packages/widgetbook/lib/src/utils/styles.dart

@@ -25,9 +25,9 @@ class Styles {
       onSurface: onLightSurface,
       primary: primary,
       onPrimary: Colors.black,
-      primaryContainer: Color(0xffe07356),
+      primaryVariant: Color(0xffe07356),
       secondary: secondary,
-      secondaryContainer: Color(0xff483F6C),
+      secondaryVariant: Color(0xff483F6C),
       onSecondary: Colors.white,
       background: Color(0xfff3f6f9),
       onBackground: Color(0xff222222),
@@ -46,9 +46,9 @@ class Styles {
       onSurface: onDarkSurface,
       primary: primary,
       onPrimary: notCompletelyWhite,
-      primaryContainer: Color(0xffe07356),
+      primaryVariant: Color(0xffe07356),
       secondary: secondary,
-      secondaryContainer: Color(0xffB794FF),
+      secondaryVariant: Color(0xffB794FF),
       onSecondary: notCompletelyWhite,
       background: Colors.yellow,
       onBackground: Colors.green,

packages/widgetbook/lib/src/widgetbook.dart

@@ -96,6 +96,7 @@ class Widgetbook<CustomTheme> extends StatefulWidget {
     this.useCaseBuilder,
     List<Locale>? supportedLocales,
     List<WidgetbookFrame>? frames,
+    List<double>? textScaleFactors,
   })  : assert(
           categories.length > 0,
           'Please specify at least one $WidgetbookCategory.',
@@ -104,6 +105,10 @@ class Widgetbook<CustomTheme> extends StatefulWidget {
           devices == null || devices.length > 0,
           'Please specify at least one $Device.',
         ),
+        assert(
+          textScaleFactors == null || textScaleFactors.length > 0,
+          'Please specify at least one textScaleFactor.',
+        ),
         assert(
           themes.length > 0,
           'Please specify at least one $WidgetbookTheme.',
@@ -120,6 +125,7 @@ class Widgetbook<CustomTheme> extends StatefulWidget {
             const [
               Locale('us'),
             ],
+        textScaleFactors = textScaleFactors ?? const [1],
         frames = frames ??
             const <WidgetbookFrame>[
               WidgetbookFrame(
@@ -163,6 +169,9 @@ class Widgetbook<CustomTheme> extends StatefulWidget {
 
   final List<WidgetbookFrame> frames;
 
+  /// A list of text scale factors to test for font size accessibility
+  final List<double> textScaleFactors;
+
   final DeviceFrameBuilderFunction? deviceFrameBuilder;
 
   final LocalizationBuilderFunction? localizationBuilder;
@@ -187,6 +196,7 @@ class Widgetbook<CustomTheme> extends StatefulWidget {
     ThemeBuilderFunction<CupertinoThemeData>? themeBuilder,
     ScaffoldBuilderFunction? scaffoldBuilder,
     UseCaseBuilderFunction? useCaseBuilder,
+    List<double>? textScaleFactors,
     Key? key,
   }) {
     return Widgetbook<CupertinoThemeData>(
@@ -203,6 +213,7 @@ class Widgetbook<CustomTheme> extends StatefulWidget {
       scaffoldBuilder: scaffoldBuilder,
       useCaseBuilder: useCaseBuilder,
       frames: frames,
+      textScaleFactors: textScaleFactors,
     );
   }
 
@@ -220,6 +231,7 @@ class Widgetbook<CustomTheme> extends StatefulWidget {
     ThemeBuilderFunction<ThemeData>? themeBuilder,
     ScaffoldBuilderFunction? scaffoldBuilder,
     UseCaseBuilderFunction? useCaseBuilder,
+    List<double>? textScaleFactors,
     Key? key,
   }) {
     return Widgetbook<ThemeData>(
@@ -236,6 +248,7 @@ class Widgetbook<CustomTheme> extends StatefulWidget {
       scaffoldBuilder: scaffoldBuilder,
       useCaseBuilder: useCaseBuilder,
       frames: frames,
+      textScaleFactors: textScaleFactors,
     );
   }
 
@@ -268,6 +281,7 @@ class _WidgetbookState<CustomTheme> extends State<Widgetbook<CustomTheme>> {
       locales: widget.supportedLocales,
       devices: widget.devices,
       frames: widget.frames,
+      textScaleFactors: widget.textScaleFactors,
     );
 
     super.initState();
@@ -281,6 +295,7 @@ class _WidgetbookState<CustomTheme> extends State<Widgetbook<CustomTheme>> {
       locales: widget.supportedLocales,
       devices: widget.devices,
       frames: widget.frames,
+      textScaleFactors: widget.textScaleFactors,
     );
     super.didUpdateWidget(oldWidget);
   }