Customize cursor opacity animates (#1165)

Author: bdlukaa

.vscode/settings.json

@@ -1,5 +1,11 @@
 {
     "dart.analysisExcludedFolders": [
         "lib/l10n"
-    ]
+    ],
+    "dart.lineLength": 80,
+    "[dart]": {
+        "editor.rulers": [
+            80
+        ],
+    }
 }

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [next]
 
 - fix: hide Tab's close button when `onClosed` is null
+- feat: Add `TextBox.cursorOpacityAnimates` (defaults to `FluentThemeData.cursorOpacityAnimates`, which defaults to `false`); default setting improves CPU/GPU efficiency while TextBox has focus ([#1164](https://github.com/bdlukaa/fluent_ui/issues/1164))
 
 ## 4.10.0
 

lib/src/controls/form/text_box.dart

@@ -176,6 +176,7 @@ class TextBox extends StatefulWidget {
     this.cursorHeight,
     this.cursorRadius = const Radius.circular(2.0),
     this.cursorColor,
+    this.cursorOpacityAnimates,
     this.selectionHeightStyle = ui.BoxHeightStyle.tight,
     this.selectionWidthStyle = ui.BoxWidthStyle.tight,
     this.keyboardAppearance,
@@ -447,6 +448,12 @@ class TextBox extends StatefulWidget {
   /// null, it uses the [FluentThemeData.inactiveColor] of the ambient theme.
   final Color? cursorColor;
 
+  /// When the widget has focus and the cursor should be blinking, indicates
+  /// whether or not to use high fidelity animation for the cursor's opacity,
+  /// or to just use simple blinking when the widget has focus.
+  /// Defaults to [FluentThemeData.cursorOpacityAnimates].
+  final bool? cursorOpacityAnimates;
+
   /// Controls how tall the selection highlight boxes are computed to be.
   ///
   /// See [ui.BoxHeightStyle] for details on available styles.
@@ -615,6 +622,8 @@ class TextBox extends StatefulWidget {
       ..add(DiagnosticsProperty<Radius>('cursorRadius', cursorRadius,
           defaultValue: null))
       ..add(ColorProperty('cursorColor', cursorColor, defaultValue: null))
+      ..add(DiagnosticsProperty<bool>(
+          'cursorOpacityAnimates', cursorOpacityAnimates))
       ..add(FlagProperty('selectionEnabled',
           value: selectionEnabled,
           defaultValue: true,
@@ -1008,6 +1017,8 @@ class _TextBoxState extends State<TextBox>
     final cursorColor = widget.cursorColor ??
         DefaultSelectionStyle.of(context).cursorColor ??
         themeData.inactiveColor;
+    final cursorOpacityAnimates =
+        widget.cursorOpacityAnimates ?? themeData.cursorOpacityAnimates;
 
     final selectionColor = DefaultSelectionStyle.of(context).selectionColor ??
         themeData.accentColor.normal;
@@ -1071,7 +1082,7 @@ class _TextBoxState extends State<TextBox>
             cursorHeight: widget.cursorHeight,
             cursorRadius: widget.cursorRadius,
             cursorColor: cursorColor,
-            cursorOpacityAnimates: true,
+            cursorOpacityAnimates: cursorOpacityAnimates,
             cursorOffset: cursorOffset,
             paintCursorAboveText: true,
             autocorrectionTextRectColor: selectionColor,

lib/src/styles/theme.dart

@@ -199,6 +199,11 @@ class FluentThemeData with Diagnosticable {
   final Duration slowAnimationDuration;
   final Curve animationCurve;
 
+  /// See [EditableText.cursorOpacityAnimates]. Whether or not to have high
+  /// fidelity animation for the opacity of the blinking text cursor, at the
+  /// expense of higher CPU/GPU usage. Defaults to false (recommended).
+  final bool cursorOpacityAnimates;
+
   final Brightness brightness;
   final VisualDensity visualDensity;
 
@@ -243,6 +248,7 @@ class FluentThemeData with Diagnosticable {
     Duration? mediumAnimationDuration,
     Duration? slowAnimationDuration,
     Curve? animationCurve,
+    bool? cursorOpacityAnimates,
     BottomNavigationThemeData? bottomNavigationTheme,
     ButtonThemeData? buttonTheme,
     CheckboxThemeData? checkboxTheme,
@@ -274,6 +280,7 @@ class FluentThemeData with Diagnosticable {
         ? const ResourceDictionary.light()
         : const ResourceDictionary.dark();
     animationCurve ??= standardCurve;
+    cursorOpacityAnimates ??= false;
     accentColor ??= Colors.blue;
     activeColor ??= Colors.white;
     inactiveColor ??= isLight ? Colors.black : Colors.white;
@@ -325,6 +332,7 @@ class FluentThemeData with Diagnosticable {
       mediumAnimationDuration: mediumAnimationDuration,
       slowAnimationDuration: slowAnimationDuration,
       animationCurve: animationCurve,
+      cursorOpacityAnimates: cursorOpacityAnimates,
       accentColor: accentColor,
       activeColor: activeColor,
       inactiveColor: inactiveColor,
@@ -369,6 +377,7 @@ class FluentThemeData with Diagnosticable {
     required this.mediumAnimationDuration,
     required this.slowAnimationDuration,
     required this.animationCurve,
+    required this.cursorOpacityAnimates,
     required this.brightness,
     required this.visualDensity,
     required this.scaffoldBackgroundColor,
@@ -432,6 +441,8 @@ class FluentThemeData with Diagnosticable {
       slowAnimationDuration:
           lerpDuration(a.slowAnimationDuration, b.slowAnimationDuration, t),
       animationCurve: t < 0.5 ? a.animationCurve : b.animationCurve,
+      cursorOpacityAnimates:
+          t < 0.5 ? a.cursorOpacityAnimates : b.cursorOpacityAnimates,
       buttonTheme: ButtonThemeData.lerp(a.buttonTheme, b.buttonTheme, t),
       checkboxTheme:
           CheckboxThemeData.lerp(a.checkboxTheme, b.checkboxTheme, t),
@@ -499,6 +510,7 @@ class FluentThemeData with Diagnosticable {
     Duration? mediumAnimationDuration,
     Duration? slowAnimationDuration,
     Curve? animationCurve,
+    bool? cursorOpacityAnimates,
     ButtonThemeData? buttonTheme,
     BottomNavigationThemeData? bottomNavigationTheme,
     CheckboxThemeData? checkboxTheme,
@@ -546,6 +558,8 @@ class FluentThemeData with Diagnosticable {
       slowAnimationDuration:
           slowAnimationDuration ?? this.slowAnimationDuration,
       animationCurve: animationCurve ?? this.animationCurve,
+      cursorOpacityAnimates:
+          cursorOpacityAnimates ?? this.cursorOpacityAnimates,
       buttonTheme: this.buttonTheme.merge(buttonTheme),
       bottomNavigationTheme:
           this.bottomNavigationTheme.merge(bottomNavigationTheme),
@@ -590,6 +604,8 @@ class FluentThemeData with Diagnosticable {
           'fastAnimationDuration', fastAnimationDuration))
       ..add(DiagnosticsProperty<Duration>(
           'fasterAnimationDuration', fasterAnimationDuration))
-      ..add(DiagnosticsProperty<Curve>('animationCurve', animationCurve));
+      ..add(DiagnosticsProperty<Curve>('animationCurve', animationCurve))
+      ..add(DiagnosticsProperty<bool>(
+          'cursorOpacityAnimates', cursorOpacityAnimates));
   }
 }