diff --git a/.vscode/settings.json b/.vscode/settings.json index ba9c70231..bf3c8a0bf 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,11 @@ { "dart.analysisExcludedFolders": [ "lib/l10n" - ] + ], + "dart.lineLength": 80, + "[dart]": { + "editor.rulers": [ + 80 + ], + } } \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 3c7b40340..9ef1c5a28 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/lib/src/controls/form/text_box.dart b/lib/src/controls/form/text_box.dart index 332cf49d2..c96a973bb 100644 --- a/lib/src/controls/form/text_box.dart +++ b/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('cursorRadius', cursorRadius, defaultValue: null)) ..add(ColorProperty('cursorColor', cursorColor, defaultValue: null)) + ..add(DiagnosticsProperty( + 'cursorOpacityAnimates', cursorOpacityAnimates)) ..add(FlagProperty('selectionEnabled', value: selectionEnabled, defaultValue: true, @@ -1008,6 +1017,8 @@ class _TextBoxState extends State 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 cursorHeight: widget.cursorHeight, cursorRadius: widget.cursorRadius, cursorColor: cursorColor, - cursorOpacityAnimates: true, + cursorOpacityAnimates: cursorOpacityAnimates, cursorOffset: cursorOffset, paintCursorAboveText: true, autocorrectionTextRectColor: selectionColor, diff --git a/lib/src/styles/theme.dart b/lib/src/styles/theme.dart index beade86bb..157dd32c6 100644 --- a/lib/src/styles/theme.dart +++ b/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( 'fasterAnimationDuration', fasterAnimationDuration)) - ..add(DiagnosticsProperty('animationCurve', animationCurve)); + ..add(DiagnosticsProperty('animationCurve', animationCurve)) + ..add(DiagnosticsProperty( + 'cursorOpacityAnimates', cursorOpacityAnimates)); } }