fix: Correctly handle system text scaling on DatePicker, TimePicker, AutoSuggestBox popups (#1286)

Copilot · bdlukaa · web-flow · commit 5597bcd99dc5 · 2026-02-21T18:12:50.000-03:00
* Initial plan

* fix: overflow on TimePicker/DatePicker with system text scaling

Co-authored-by: bdlukaa &lt;45696119+bdlukaa@users.noreply.github.com&gt;

* fix: Support large text scales on example app

* fix: Support larger text scales on date and time picker buttons

* fix: Adapt info badge to text scale

* fix: Do not apply text scaling to auto suggest box overlay

* fix: Improve media query usage

* chore: Update changelog

---------

Co-authored-by: copilot-swe-agent[bot] &lt;198982749+Copilot@users.noreply.github.com&gt;
Co-authored-by: bdlukaa &lt;45696119+bdlukaa@users.noreply.github.com&gt;
Co-authored-by: Bruno D'Luka &lt;brunodlukaa@gmail.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## [next]
+
+- fix: Correctly handle system text scaling on `DatePicker`, `TimePicker`, `AutoSuggestBox` popups ([#1321](https://github.com/bdlukaa/fluent_ui/issues/1321), [#1286](https://github.com/bdlukaa/fluent_ui/pull/1286))
+
 ## 4.14.0
 
 - refactor: Consistent theme classes
diff --git a/example/lib/screens/forms/date_picker.dart b/example/lib/screens/forms/date_picker.dart
@@ -68,8 +68,8 @@ DatePicker(
                   showMonth: showMonth,
                   showYear: showYear,
                 ),
-                SizedBox(
-                  width: 150,
+                ConstrainedBox(
+                  constraints: const BoxConstraints(minWidth: 150),
                   child: Column(
                     mainAxisSize: MainAxisSize.min,
                     crossAxisAlignment: CrossAxisAlignment.start,
diff --git a/example/lib/screens/popups/teaching_tip.dart b/example/lib/screens/popups/teaching_tip.dart
@@ -150,8 +150,8 @@ showTeachingTip(
                 ),
               ),
               const SizedBox(width: 18),
-              SizedBox(
-                width: 150,
+              ConstrainedBox(
+                constraints: const BoxConstraints(minWidth: 150),
                 child: ComboBox<String>(
                   placeholder: const Text('Alignment'),
                   items: List.generate(alignments.length, (final index) {
diff --git a/example/lib/screens/theming/colors.dart b/example/lib/screens/theming/colors.dart
@@ -190,8 +190,8 @@ class ColorBlock extends StatelessWidget {
             focused: states.isFocused,
             renderOutside: false,
             child: Container(
-              height: 85,
-              width: 85,
+              height: MediaQuery.textScalerOf(context).scale(85),
+              width: MediaQuery.textScalerOf(context).scale(85),
               padding: const EdgeInsetsDirectional.all(6),
               color: color,
               child: Column(
diff --git a/example/lib/widgets/code_snippet_card.dart b/example/lib/widgets/code_snippet_card.dart
@@ -73,8 +73,13 @@ class _CodeSnippetCardState extends State<CodeSnippetCard>
               },
               trailing: isOpen
                   ? Container(
-                      height: 31,
-                      constraints: const BoxConstraints(minWidth: 80),
+                      margin: const EdgeInsetsDirectional.symmetric(
+                        vertical: 4,
+                      ),
+                      constraints: const BoxConstraints(
+                        minWidth: 80,
+                        minHeight: 32,
+                      ),
                       child: Button(
                         style: ButtonStyle(
                           backgroundColor: isCopying
diff --git a/example/lib/widgets/material_equivalents.dart b/example/lib/widgets/material_equivalents.dart
@@ -272,7 +272,7 @@ class _UIEquivalentsState extends State<UIEquivalents> {
                     height: 216,
                     padding: const EdgeInsetsDirectional.only(top: 6),
                     margin: EdgeInsetsDirectional.only(
-                      bottom: MediaQuery.of(context).viewInsets.bottom,
+                      bottom: MediaQuery.viewInsetsOf(context).bottom,
                     ),
                     color: c.CupertinoColors.systemBackground.resolveFrom(
                       context,
@@ -327,7 +327,7 @@ class _UIEquivalentsState extends State<UIEquivalents> {
                     height: 216,
                     padding: const EdgeInsetsDirectional.only(top: 6),
                     margin: EdgeInsetsDirectional.only(
-                      bottom: MediaQuery.of(context).viewInsets.bottom,
+                      bottom: MediaQuery.viewInsetsOf(context).bottom,
                     ),
                     color: c.CupertinoColors.systemBackground.resolveFrom(
                       context,
diff --git a/lib/src/controls/flyouts/menu_bar.dart b/lib/src/controls/flyouts/menu_bar.dart
@@ -219,7 +219,7 @@ class MenuBarState extends State<MenuBar> {
       groupId: MenuBar,
       onTapOutside: (_) => closeFlyout(),
       child: Container(
-        height: 40,
+        constraints: const BoxConstraints(minHeight: 40),
         padding: EdgeInsetsDirectional.only(
           top: barMargin.top,
           bottom: barMargin.bottom,
diff --git a/lib/src/controls/form/auto_suggest_box.dart b/lib/src/controls/form/auto_suggest_box.dart
@@ -607,7 +607,7 @@ class AutoSuggestBoxState<T> extends State<AutoSuggestBox<T>> {
         );
 
         final screenHeight =
-            MediaQuery.sizeOf(context).height -
+            MediaQuery.heightOf(context) -
             MediaQuery.viewPaddingOf(context).bottom;
         final overlayY = globalOffset.dy + box.size.height;
         final maxHeight = (screenHeight - overlayY).clamp(
@@ -964,68 +964,70 @@ class _AutoSuggestBoxOverlayState<T> extends State<_AutoSuggestBoxOverlay<T>> {
     final theme = FluentTheme.of(context);
     final localizations = FluentLocalizations.of(context);
 
-    return TextFieldTapRegion(
-      child: FocusScope(
-        node: widget.node,
-        child: Container(
-          constraints: BoxConstraints(maxHeight: widget.maxHeight),
-          decoration: ShapeDecoration(
-            shape: const RoundedRectangleBorder(
-              borderRadius: BorderRadius.vertical(bottom: Radius.circular(4)),
-            ),
-            color: theme.resources.cardBackgroundFillColorDefault,
-            shadows: [
-              BoxShadow(
-                color: Colors.black.withValues(alpha: 0.05),
-                offset: const Offset(-1, 1),
-                blurRadius: 2,
-                spreadRadius: 3,
+    return MediaQuery.withNoTextScaling(
+      child: TextFieldTapRegion(
+        child: FocusScope(
+          node: widget.node,
+          child: Container(
+            constraints: BoxConstraints(maxHeight: widget.maxHeight),
+            decoration: ShapeDecoration(
+              shape: const RoundedRectangleBorder(
+                borderRadius: BorderRadius.vertical(bottom: Radius.circular(4)),
               ),
-              BoxShadow(
-                color: Colors.black.withValues(alpha: 0.05),
-                offset: const Offset(1, 1),
-                blurRadius: 2,
-                spreadRadius: 3,
+              color: theme.resources.cardBackgroundFillColorDefault,
+              shadows: [
+                BoxShadow(
+                  color: Colors.black.withValues(alpha: 0.05),
+                  offset: const Offset(-1, 1),
+                  blurRadius: 2,
+                  spreadRadius: 3,
+                ),
+                BoxShadow(
+                  color: Colors.black.withValues(alpha: 0.05),
+                  offset: const Offset(1, 1),
+                  blurRadius: 2,
+                  spreadRadius: 3,
+                ),
+              ],
+            ),
+            child: Acrylic(
+              child: ValueListenableBuilder<TextEditingValue>(
+                valueListenable: widget.controller,
+                builder: (context, value, _) {
+                  final sortedItems = widget.sorter(value.text, items);
+                  late Widget result;
+                  if (sortedItems.isEmpty) {
+                    result =
+                        widget.noResultsFoundBuilder?.call(context) ??
+                        Padding(
+                          padding: const EdgeInsetsDirectional.only(bottom: 4),
+                          child: _AutoSuggestBoxOverlayTile(
+                            text: Text(localizations.noResultsFoundLabel),
+                          ),
+                        );
+                  } else {
+                    result = ListView.builder(
+                      itemExtent: tileHeight,
+                      controller: scrollController,
+                      key: ValueKey<int>(sortedItems.length),
+                      shrinkWrap: true,
+                      padding: const EdgeInsetsDirectional.only(bottom: 4),
+                      itemCount: sortedItems.length,
+                      itemBuilder: (context, index) {
+                        final item = sortedItems[index];
+                        return widget.itemBuilder?.call(context, item) ??
+                            _AutoSuggestBoxOverlayTile(
+                              text: item.child ?? Text(item.label),
+                              semanticLabel: item.semanticLabel ?? item.label,
+                              selected: item._selected || widget.node.hasFocus,
+                              onSelected: () => widget.onSelected(item),
+                            );
+                      },
+                    );
+                  }
+                  return result;
+                },
               ),
-            ],
-          ),
-          child: Acrylic(
-            child: ValueListenableBuilder<TextEditingValue>(
-              valueListenable: widget.controller,
-              builder: (context, value, _) {
-                final sortedItems = widget.sorter(value.text, items);
-                late Widget result;
-                if (sortedItems.isEmpty) {
-                  result =
-                      widget.noResultsFoundBuilder?.call(context) ??
-                      Padding(
-                        padding: const EdgeInsetsDirectional.only(bottom: 4),
-                        child: _AutoSuggestBoxOverlayTile(
-                          text: Text(localizations.noResultsFoundLabel),
-                        ),
-                      );
-                } else {
-                  result = ListView.builder(
-                    itemExtent: tileHeight,
-                    controller: scrollController,
-                    key: ValueKey<int>(sortedItems.length),
-                    shrinkWrap: true,
-                    padding: const EdgeInsetsDirectional.only(bottom: 4),
-                    itemCount: sortedItems.length,
-                    itemBuilder: (context, index) {
-                      final item = sortedItems[index];
-                      return widget.itemBuilder?.call(context, item) ??
-                          _AutoSuggestBoxOverlayTile(
-                            text: item.child ?? Text(item.label),
-                            semanticLabel: item.semanticLabel ?? item.label,
-                            selected: item._selected || widget.node.hasFocus,
-                            onSelected: () => widget.onSelected(item),
-                          );
-                    },
-                  );
-                }
-                return result;
-              },
             ),
           ),
         ),
diff --git a/lib/src/controls/form/selection_controls.dart b/lib/src/controls/form/selection_controls.dart
@@ -396,7 +396,7 @@ class _FluentTextSelectionControlsToolbarState
     final midpointAnchor = Offset(
       (widget.selectionMidpoint.dx - widget.globalEditableRegion.left).clamp(
         MediaQuery.paddingOf(context).left,
-        MediaQuery.sizeOf(context).width - MediaQuery.paddingOf(context).right,
+        MediaQuery.widthOf(context) - MediaQuery.paddingOf(context).right,
       ),
       widget.selectionMidpoint.dy - widget.globalEditableRegion.top,
     );
diff --git a/lib/src/controls/layout/page.dart b/lib/src/controls/layout/page.dart
@@ -252,7 +252,7 @@ class PageHeader extends StatelessWidget {
   /// [kPageDefaultVerticalPadding]
   static double horizontalPadding(BuildContext context) {
     assert(debugCheckHasMediaQuery(context));
-    final screenWidth = MediaQuery.sizeOf(context).width;
+    final screenWidth = MediaQuery.widthOf(context);
     final isSmallScreen = screenWidth < 640.0;
     final horizontalPadding = isSmallScreen
         ? 12.0
diff --git a/lib/src/controls/navigation/navigation_view/pane.dart b/lib/src/controls/navigation/navigation_view/pane.dart
@@ -472,7 +472,7 @@ class NavigationPane with Diagnosticable {
 /// NavigationView(
 ///   pane: NavigationPane(
 ///     size: NavigationPaneSize(
-///       openWidth: MediaQuery.sizeOf(context).width / 5,
+///       openWidth: MediaQuery.widthOf(context) / 5,
 ///       openMinWidth: 250,
 ///       openMaxWidth: 320,
 ///     ),
diff --git a/lib/src/controls/pickers/date_picker.dart b/lib/src/controls/pickers/date_picker.dart
@@ -450,7 +450,7 @@ class DatePickerState extends State<DatePicker> {
             child: AnimatedContainer(
               duration: theme.fastAnimationDuration,
               curve: theme.animationCurve,
-              height: kPickerHeight,
+              constraints: const BoxConstraints(minHeight: kPickerHeight),
               decoration: kPickerDecorationBuilder(context, states),
               child: DefaultTextStyle.merge(
                 style: TextStyle(
diff --git a/lib/src/controls/pickers/pickers.dart b/lib/src/controls/pickers/pickers.dart
@@ -401,7 +401,7 @@ class PickerState extends State<Picker> {
 
           // If the screen is smaller than 260, we ensure the popup will fit in the
           // screen. https://github.com/bdlukaa/fluent_ui/issues/544
-          final minWidth = min(260, MediaQuery.sizeOf(context).width);
+          final minWidth = min(260, MediaQuery.widthOf(context));
           final width = max(box.size.width, minWidth);
           final x = () {
             if (box.size.width > minWidth) return childOffset.dx;
@@ -434,7 +434,9 @@ class PickerState extends State<Picker> {
                         ),
                       ),
                     ),
-                    child: widget.pickerContent(context),
+                    child: MediaQuery.withNoTextScaling(
+                      child: widget.pickerContent(context),
+                    ),
                   ),
                 ),
               ),
diff --git a/lib/src/controls/pickers/time_picker.dart b/lib/src/controls/pickers/time_picker.dart
@@ -317,7 +317,7 @@ class TimePickerState extends State<TimePicker>
             child: AnimatedContainer(
               duration: theme.fastAnimationDuration,
               curve: theme.animationCurve,
-              height: kPickerHeight,
+              constraints: const BoxConstraints(minHeight: kPickerHeight),
               decoration: kPickerDecorationBuilder(context, states),
               child: DefaultTextStyle.merge(
                 style: TextStyle(
diff --git a/lib/src/controls/utils/info_badge.dart b/lib/src/controls/utils/info_badge.dart
@@ -94,8 +94,8 @@ class InfoBadge extends StatelessWidget {
 
     if (source == null) {
       return Container(
-        width: 6,
-        height: 6,
+        width: MediaQuery.textScalerOf(context).scale(6),
+        height: MediaQuery.textScalerOf(context).scale(6),
         decoration: BoxDecoration(
           color: color,
           borderRadius: BorderRadius.circular(100),
@@ -104,10 +104,10 @@ class InfoBadge extends StatelessWidget {
     }
 
     return Container(
-      constraints: const BoxConstraints(
+      constraints: BoxConstraints(
         minWidth: 16,
         minHeight: 16,
-        maxHeight: 16,
+        maxHeight: MediaQuery.textScalerOf(context).scale(16),
       ),
       padding: const EdgeInsetsDirectional.only(start: 4, end: 4, bottom: 1),
       decoration: BoxDecoration(
diff --git a/lib/src/styles/color_resources.dart b/lib/src/styles/color_resources.dart
@@ -3,8 +3,8 @@
 
 // ignore_for_file: constant_identifier_names, public_member_api_docs
 
-import 'package:flutter/widgets.dart' show Color, ColorProperty;
 import 'package:flutter/foundation.dart';
+import 'package:flutter/widgets.dart' show Color, ColorProperty;
 
 /// A dictionary of colors used by all the components.
 ///
