From 4dd3398038cb7ab1a37f0fb0af176cf58db87469 Mon Sep 17 00:00:00 2001 From: Bruno D'Luka Date: Sat, 4 Mar 2023 11:23:52 -0300 Subject: [PATCH 1/2] Perform updates to TextBox - Use correct height and padding on `TextBox` - Updated `TextBox` cursor to match the native implementation - `TextBox` state is now updated correctly when focused --- CHANGELOG.md | 4 ++++ example/lib/screens/forms/text_box.dart | 23 +++++++++++------- example/pubspec.lock | 4 ++-- lib/src/controls/form/text_box.dart | 32 ++++++++++++++++++------- 4 files changed, 44 insertions(+), 19 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e1716836a..1aacd8c1d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,5 @@ ## [next] + - Dynamically adding/removing items in NavigationPane ([#744](https://github.com/bdlukaa/fluent_ui/issues/744)) ```dart if (_itemKeys.length != widget.pane?.effectiveItems.length) { @@ -30,6 +31,9 @@ } ) ``` +- Use correct height and padding on `TextBox` +- Updated `TextBox` cursor to match the native implementation +- `TextBox` state is now updated correctly when focused ## 4.4.0 diff --git a/example/lib/screens/forms/text_box.dart b/example/lib/screens/forms/text_box.dart index 22a56fa27..2cb89935e 100644 --- a/example/lib/screens/forms/text_box.dart +++ b/example/lib/screens/forms/text_box.dart @@ -29,7 +29,12 @@ class TextBoxPage extends ScrollablePage { child: Row(children: const [ Expanded(child: TextBox()), SizedBox(width: 10.0), - Expanded(child: TextBox(enabled: false, placeholder: 'Disabled')) + Expanded( + child: TextBox( + enabled: false, + placeholder: 'Disabled TextBox', + ), + ) ]), codeSnippet: '''TextBox()''', ), @@ -44,11 +49,13 @@ class TextBoxPage extends ScrollablePage { expands: false, ), ), - codeSnippet: '''TextBox( - header: 'Enter your name:', - placeholder: 'Name', - expands: false, -),''', + codeSnippet: '''InfoLabel( + label: 'Enter your name:', + child: const TextBox( + placeholder: 'Name', + expands: false, + ), +)''', ), subtitle( content: const Text('A read-only TextBox with various properties set'), @@ -60,7 +67,7 @@ class TextBoxPage extends ScrollablePage { style: TextStyle( fontFamily: 'Arial', fontSize: 24.0, - letterSpacing: 8, + letterSpacing: 8.0, color: Color(0xFF5178BE), fontStyle: FontStyle.italic, ), @@ -71,7 +78,7 @@ class TextBoxPage extends ScrollablePage { style: TextStyle( fontFamily: 'Arial, fontSize: 24.0, - letterSpacing: 8, + letterSpacing: 8.0, color: Color(0xFF5178BE), fontStyle: FontStyle.italic, ), diff --git a/example/pubspec.lock b/example/pubspec.lock index a510b1a14..d4df0af8a 100644 --- a/example/pubspec.lock +++ b/example/pubspec.lock @@ -201,10 +201,10 @@ packages: dependency: "direct main" description: name: go_router - sha256: f611d4396469c46db1c61e934a86e2a590ce02de2a6050d01f677879ce151f4a + sha256: b4bb06205ec607278b6fc23db238278417bca84a3905779cc68d1eb7afae37e2 url: "https://pub.dev" source: hosted - version: "6.0.1" + version: "6.2.0" html: dependency: transitive description: diff --git a/lib/src/controls/form/text_box.dart b/lib/src/controls/form/text_box.dart index 388094c7d..5c92a5999 100644 --- a/lib/src/controls/form/text_box.dart +++ b/lib/src/controls/form/text_box.dart @@ -6,7 +6,7 @@ import 'package:flutter/gestures.dart'; import 'package:flutter/rendering.dart'; import 'package:flutter/services.dart'; -const kTextBoxPadding = EdgeInsets.symmetric(horizontal: 10.0, vertical: 5); +const kTextBoxPadding = EdgeInsetsDirectional.fromSTEB(10, 5, 6, 6); /// Visibility of text field overlays based on the state of the current text entry. /// @@ -170,7 +170,7 @@ class TextBox extends StatefulWidget { this.onTapOutside, this.inputFormatters, this.enabled, - this.cursorWidth = 1.5, + this.cursorWidth = 1, this.cursorHeight, this.cursorRadius = const Radius.circular(2.0), this.cursorColor, @@ -257,7 +257,7 @@ class TextBox extends StatefulWidget { /// Padding around the text entry area between the [prefix] and [suffix]. /// - /// Defaults to a padding of 10 pixels horizontally and 5 pixels vertically. + /// Defaults to [kTextBoxPadding] final EdgeInsetsGeometry padding; /// A lighter colored placeholder hint that appears on the first line of the @@ -566,7 +566,11 @@ class TextBox extends StatefulWidget { ..add(DiagnosticsProperty('focusNode', focusNode, defaultValue: null)) ..add(DiagnosticsProperty('decoration', decoration)) - ..add(DiagnosticsProperty('padding', padding)) + ..add(DiagnosticsProperty( + 'padding', + padding, + defaultValue: kTextBoxPadding, + )) ..add(StringProperty('placeholder', placeholder)) ..add( DiagnosticsProperty('placeholderStyle', placeholderStyle)) @@ -601,7 +605,7 @@ class TextBox extends StatefulWidget { ..add(EnumProperty( 'maxLengthEnforcement', maxLengthEnforcement, defaultValue: null)) - ..add(DoubleProperty('cursorWidth', cursorWidth, defaultValue: 2.0)) + ..add(DoubleProperty('cursorWidth', cursorWidth, defaultValue: 1.0)) ..add(DoubleProperty('cursorHeight', cursorHeight, defaultValue: null)) ..add(DiagnosticsProperty('cursorRadius', cursorRadius, defaultValue: null)) @@ -974,7 +978,7 @@ class _TextBoxState extends State } final enabled = widget.enabled ?? true; - const cursorOffset = Offset(0, -1); + const cursorOffset = Offset(0, 0); final formatters = [ ...?widget.inputFormatters, if (widget.maxLength != null) @@ -1171,6 +1175,15 @@ class _TextBoxState extends State forceEnabled: enabled, hitTestBehavior: HitTestBehavior.translucent, builder: (context, states) { + // Since we manage focus outside of the HoverButton (see focusEnabled: false) + // we need to add the focused state when the field is focused + // + // widgets below this can call `HoverButton.of(context).states.isFocused` + // and have the correct value + if (_effectiveFocusNode.hasFocus) { + states = {...states, ButtonStates.focused}; + } + return DecoratedBox( decoration: BoxDecoration( borderRadius: radius, @@ -1193,10 +1206,11 @@ class _TextBoxState extends State image: widget.decoration?.image, shape: widget.decoration?.shape, ), - child: AnimatedContainer( - duration: themeData.fasterAnimationDuration, - curve: themeData.animationCurve, + child: Container( foregroundDecoration: foregroundDecoration, + constraints: const BoxConstraints( + minHeight: 32.0, + ), child: _selectionGestureDetectorBuilder.buildGestureDetector( behavior: HitTestBehavior.translucent, From 03a6fb0a6f6218346cbb3d299210e7223096c9fd Mon Sep 17 00:00:00 2001 From: Bruno D'Luka Date: Sat, 4 Mar 2023 11:27:40 -0300 Subject: [PATCH 2/2] update changelog --- CHANGELOG.md | 6 +++--- example/lib/screens/forms/text_box.dart | 5 ++--- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1aacd8c1d..09ee45496 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -31,9 +31,9 @@ } ) ``` -- Use correct height and padding on `TextBox` -- Updated `TextBox` cursor to match the native implementation -- `TextBox` state is now updated correctly when focused +- Use correct height and padding on `TextBox` ([#754](https://github.com/bdlukaa/fluent_ui/pull/754)) +- Updated `TextBox` cursor to match the native implementation ([#754](https://github.com/bdlukaa/fluent_ui/pull/754)) +- `TextBox` state is now updated correctly when focused ([#754](https://github.com/bdlukaa/fluent_ui/pull/754)) ## 4.4.0 diff --git a/example/lib/screens/forms/text_box.dart b/example/lib/screens/forms/text_box.dart index 2cb89935e..6911fde6e 100644 --- a/example/lib/screens/forms/text_box.dart +++ b/example/lib/screens/forms/text_box.dart @@ -20,9 +20,8 @@ class TextBoxPage extends ScrollablePage { 'uniform, plaintext format.\n\n' 'TextBox has a number of features that can simplify text entry. It comes ' 'with a familiar, built-in context menu with support for copying and ' - 'pasting text. The "clear all" button lets a user quickly delete all ' - 'text that has been entered. It also has spell checking capabilities ' - 'built in and enabled by default.', + 'pasting text. It also has spell checking capabilities built in and ' + 'enabled by default.', ), subtitle(content: const Text('A simple TextBox')), CardHighlight(