refactor(perf): Reduce calls to setState and frames scheduling in several widgets.

Author: bdlukaa

CHANGELOG.md

@@ -20,6 +20,7 @@
 - **MINOR BREAKING** refactor: Remove `Brightness.isLight`, `Brightness.isDark` and `Brightness.opposite` extension methods. Use `switch` statements instead.
 - feat: Add latest color resources from Microsoft UI XAML.
 - refactor(perf): Optimize animation handling in Scrollbar, NavigationView, Acrylic and buttons.
+- refactor(perf): Reduce calls to `setState` and frames scheduling in several widgets.
 
 ## 4.13.0
 

lib/src/controls/form/auto_suggest_box.dart

@@ -568,13 +568,10 @@ class AutoSuggestBoxState<T> extends State<AutoSuggestBox<T>> {
     } else if (_controller.text.isNotEmpty) {
       showOverlay();
     }
-    setState(() {});
   }
 
   void _handleTextChanged() {
     if (!mounted) return;
-    if (_controller.text.length < 2) setState(() {});
-
     _updateLocalItems();
 
     // Update the overlay when the text box size has changed
@@ -674,7 +671,6 @@ class AutoSuggestBoxState<T> extends State<AutoSuggestBox<T>> {
 
     if (_textBoxKey.currentContext != null) {
       overlayState.insert(_entry!);
-      if (mounted) setState(() {});
     }
   }
 
@@ -945,7 +941,7 @@ class _AutoSuggestBoxOverlayState<T> extends State<_AutoSuggestBoxOverlay<T>> {
         duration: theme.fastAnimationDuration,
         curve: Curves.easeInOut,
       );
-      setState(() {});
+      if (mounted) setState(() {});
     });
     itemsSubscription = widget.itemsStream.listen((items) {
       this.items = items;

lib/src/controls/inputs/split_button.dart

@@ -151,7 +151,6 @@ class SplitButtonState extends State<SplitButton> {
 
   /// Shows the flyout attached to the dropdown button
   Future<void> showFlyout() async {
-    setState(() {});
     await flyoutController.showFlyout<void>(
       barrierColor: Colors.transparent,
       autoModeConfiguration: FlyoutAutoConfiguration(
@@ -161,7 +160,6 @@ class SplitButtonState extends State<SplitButton> {
         return widget.flyout;
       },
     );
-    if (mounted) setState(() {});
   }
 
   void _updateFocusHighlight(bool focused) {

lib/src/controls/navigation/navigation_view/pane.dart

@@ -932,7 +932,7 @@ class _MenuFlyoutPaneItem extends MenuFlyoutItemBase {
           ).add(padding ?? EdgeInsetsDirectional.zero),
           height: 36,
           color: ButtonThemeData.uncheckedInputColor(
-            FluentTheme.of(context),
+            fluentTheme,
             states,
             transparentWhenNone: true,
             transparentWhenDisabled: true,

lib/src/controls/navigation/navigation_view/view.dart

@@ -389,17 +389,13 @@ class NavigationViewState extends State<NavigationView> {
 
   void _generateKeys() {
     if (widget.pane == null) return;
-    _itemKeys
-      ..clear()
-      ..addAll(
-        Map.fromIterables(
-          List.generate(widget.pane!.effectiveItems.length, (i) => i),
-          List.generate(
-            widget.pane!.effectiveItems.length,
-            (i) => GlobalKey(debugLabel: 'NavigationView item key#$i'),
-          ),
-        ),
-      );
+    final itemCount = widget.pane!.effectiveItems.length;
+    if (_itemKeys.length == itemCount) return;
+
+    _itemKeys.clear();
+    for (var i = 0; i < itemCount; i++) {
+      _itemKeys[i] = GlobalKey(debugLabel: 'NavigationView item key#$i');
+    }
   }
 
   @override
@@ -445,7 +441,9 @@ class NavigationViewState extends State<NavigationView> {
     );
 
     final theme = NavigationPaneTheme.of(context);
+    final fluentTheme = FluentTheme.of(context);
     final localizations = FluentLocalizations.of(context);
+    final mediaQuerySize = MediaQuery.sizeOf(context);
     final EdgeInsetsGeometry appBarPadding = EdgeInsetsDirectional.only(
       top: widget.appBar?.finalHeight(context) ?? 0.0,
     );
@@ -486,7 +484,7 @@ class NavigationViewState extends State<NavigationView> {
           /// (641px to 1007px).
           /// - Only a menu button (minimal) on small window widths (640px or less).
           var width = consts.biggest.width;
-          if (width.isInfinite) width = MediaQuery.sizeOf(context).width;
+          if (width.isInfinite) width = mediaQuerySize.width;
 
           PaneDisplayMode autoDisplayMode;
           if (width <= 640) {
@@ -801,7 +799,7 @@ class NavigationViewState extends State<NavigationView> {
                       end: 0,
                       height: widget.appBar?.finalHeight(context) ?? 0.0,
                       child: ColoredBox(
-                        color: FluentTheme.of(context).scaffoldBackgroundColor,
+                        color: fluentTheme.scaffoldBackgroundColor,
                       ),
                     ),
                     PositionedDirectional(
@@ -829,7 +827,7 @@ class NavigationViewState extends State<NavigationView> {
                       curve: theme.animationCurve ?? Curves.linear,
                       start: minimalPaneOpen ? 0.0 : -openSize,
                       width: openSize,
-                      height: MediaQuery.sizeOf(context).height,
+                      height: mediaQuerySize.height,
                       onEnd: () {
                         _isTransitioning = false;
                         if (mounted) setState(() {});
@@ -1014,6 +1012,7 @@ class NavigationAppBar with Diagnosticable {
           assert(debugCheckHasFluentLocalizations(context));
           assert(debugCheckHasFluentTheme(context));
           final localizations = FluentLocalizations.of(context);
+          final localFluentTheme = FluentTheme.of(context);
           final onPressed = canPop ? () => Navigator.maybePop(context) : null;
           widget = NavigationPaneTheme(
             data: NavigationPaneTheme.of(context).merge(
@@ -1023,7 +1022,7 @@ class NavigationAppBar with Diagnosticable {
                     return ButtonThemeData.buttonColor(context, states);
                   }
                   return ButtonThemeData.uncheckedInputColor(
-                    FluentTheme.of(context),
+                    localFluentTheme,
                     states,
                   ).basedOnLuminance();
                 }),
@@ -1088,6 +1087,7 @@ class _NavigationAppBar extends StatelessWidget {
       if (appBar.title != null) {
         assert(debugCheckHasFluentTheme(context));
         final theme = NavigationPaneTheme.of(context);
+        final fluentTheme = FluentTheme.of(context);
 
         return AnimatedPadding(
           duration: theme.animationDuration ?? Duration.zero,
@@ -1096,7 +1096,7 @@ class _NavigationAppBar extends StatelessWidget {
             const EdgeInsetsDirectional.only(start: 6),
           ),
           child: DefaultTextStyle.merge(
-            style: FluentTheme.of(context).typography.caption,
+            style: fluentTheme.typography.caption,
             maxLines: 1,
             softWrap: false,
             child: appBar.title!,
@@ -1154,13 +1154,13 @@ class _NavigationAppBar extends StatelessWidget {
       default:
         return const SizedBox.shrink();
     }
-    final topPadding = MediaQuery.paddingOf(context).top;
+    final mediaQueryPadding = MediaQuery.paddingOf(context);
 
     return Container(
       color: appBar.backgroundColor,
       decoration: appBar.decoration,
       height: appBar.finalHeight(context),
-      padding: EdgeInsetsDirectional.only(top: topPadding),
+      padding: EdgeInsetsDirectional.only(top: mediaQueryPadding.top),
       child: result,
     );
   }

lib/src/controls/navigation/tab_view/tab_view.dart

@@ -283,13 +283,7 @@ class _TabViewState extends State<TabView> {
           itemCount: widget.tabs.length,
           animationDuration: const Duration(milliseconds: 100),
         );
-    scrollController
-      ..itemCount = widget.tabs.length
-      ..addListener(_handleScrollUpdate);
-  }
-
-  void _handleScrollUpdate() {
-    if (mounted) setState(() {});
+    scrollController.itemCount = widget.tabs.length;
   }
 
   @override

lib/src/controls/pickers/time_picker.dart

@@ -3,6 +3,7 @@ import 'package:fluent_ui/src/controls/pickers/pickers.dart';
 import 'package:fluent_ui/src/intl_script_locale_apply_mixin.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/rendering.dart';
+import 'package:flutter/scheduler.dart';
 import 'package:intl/intl.dart';
 
 String _formatHour(int hour, String locale) {
@@ -449,9 +450,11 @@ class __TimePickerContentPopupState extends State<_TimePickerContentPopup> {
 
   void handleDateChanged(DateTime time) {
     localDate = time;
-    Future<void>.delayed(const Duration(milliseconds: 1), () {
-      if (mounted) setState(() {});
-    });
+    if (mounted) {
+      SchedulerBinding.instance.addPostFrameCallback((_) {
+        if (mounted) setState(() {});
+      });
+    }
   }
 
   int getClosestMinute(List<int> possibleMinutes, int goal) {

lib/src/controls/surfaces/commandbar.dart

@@ -276,10 +276,11 @@ class CommandBarState extends State<CommandBar> {
         );
       },
     );
-    // Update the widget to update the tooltip of the default overflow item
+    // Update immediately to show tooltip change
     if (mounted) setState(() {});
 
     await future;
+    // Update after flyout closes to restore visual state
     if (mounted) setState(() {});
   }