TextBoxForm

CHANGELOG.md

@@ -2,6 +2,7 @@ Date format: DD/MM/YYYY
 
 ## Unreleased
 
+- Added TextFormBox witch integrates with the Form widget. TextFormBox has the ability to be validated and to show an error message.
 - New FluentIcons gallery showcase in example project https://github.com/bdlukaa/fluent_ui/issues/123
 - Updated FluentIcons as per 30/12/2021
 - Renamed `FluentIcons.close` to `FluentIcons.chrome_close`

README.md

@@ -999,6 +999,17 @@ Which produces the following:
 
 ![TextBox Example Preview](https://docs.microsoft.com/en-us/windows/apps/design/controls/images/text-box-ex1.png)
 
+If you want to validate the text box, use a `TextFormBox`:
+
+```dart
+TextFormBox(
+  placeholder: 'Your email',
+  validator: (text) {
+    if (text == null || text.isEmpty) return 'Provide an email';
+  }
+),
+```
+
 ## Auto Suggest Box
 
 Use an AutoSuggestBox to provide a list of suggestions for a user to select from as they type. [Learn more](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/auto-suggest-box)
@@ -1621,6 +1632,7 @@ The list of equivalents between this library and `flutter/material.dart`
 | -                         | ToggleButton     |
 | Switch                    | ToggleSwitch     |
 | TextField                 | TextBox          |
+| TextFormField             | TextFormBox      |
 | DropdownButton            | Combobox         |
 | PopupMenuButton           | DropDownButton   |
 | -                         | AutoSuggestBox   |

example/lib/screens/forms.dart

@@ -2,6 +2,8 @@
 
 import 'package:fluent_ui/fluent_ui.dart';
 
+import 'package:email_validator/email_validator.dart';
+
 class Forms extends StatefulWidget {
   const Forms({Key? key}) : super(key: key);
 
@@ -44,9 +46,19 @@ class _FormsState extends State<Forms> {
           right: PageHeader.horizontalPadding(context),
         ),
         children: [
-          const TextBox(
+          TextFormBox(
             header: 'Email',
             placeholder: 'Type your email here :)',
+            autovalidateMode: AutovalidateMode.always,
+            validator: (text) {
+              if (text == null || text.isEmpty) return 'Provide an email';
+              if (!EmailValidator.validate(text)) return 'Email not valid';
+            },
+            textInputAction: TextInputAction.next,
+            prefix: const Padding(
+              padding: EdgeInsets.only(left: 8.0),
+              child: Icon(FluentIcons.edit_mail),
+            ),
           ),
           const SizedBox(height: 20),
           Row(children: [
@@ -87,7 +99,7 @@ class _FormsState extends State<Forms> {
             suffixMode: OverlayVisibilityMode.always,
             minHeight: 100,
             suffix: IconButton(
-              icon:  const Icon(FluentIcons.chrome_close),
+              icon: const Icon(FluentIcons.chrome_close),
               onPressed: () {
                 _clearController.clear();
               },

example/pubspec.lock

@@ -106,6 +106,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "3.0.1"
+  email_validator:
+    dependency: "direct main"
+    description:
+      name: email_validator
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.1"
   fake_async:
     dependency: transitive
     description:

example/pubspec.yaml

@@ -20,6 +20,7 @@ dependencies:
   url_strategy: ^0.2.0
   url_launcher: ^6.0.15
   clipboard: ^0.1.3
+  email_validator: ^2.0.1
 
 dev_dependencies:
   flutter_test:

lib/fluent_ui.dart

@@ -22,7 +22,8 @@ export 'package:flutter/material.dart'
         ReorderableDragStartListener,
         kThemeAnimationDuration,
         TooltipVisibility,
-        TooltipTriggerMode;
+        TooltipTriggerMode,
+        TextInputAction;
 export 'package:scroll_pos/scroll_pos.dart';
 
 export 'src/app.dart';
@@ -79,6 +80,8 @@ export 'src/controls/form/text_box.dart';
 export 'src/controls/form/combo_box.dart';
 export 'src/controls/form/pickers/date_picker.dart';
 export 'src/controls/form/pickers/time_picker.dart';
+export 'src/controls/form/text_form_box.dart';
+export 'src/controls/form/form_row.dart';
 
 export 'src/styles/motion/page_transitions.dart';
 export 'src/styles/acrylic.dart';

lib/src/controls/form/form_row.dart

@@ -0,0 +1,59 @@
+import 'package:fluent_ui/fluent_ui.dart';
+
+const EdgeInsetsGeometry _kDefaultPadding =
+    EdgeInsetsDirectional.fromSTEB(20.0, 6.0, 6.0, 6.0);
+
+class FormRow extends StatelessWidget {
+  const FormRow({
+    Key? key,
+    required this.child,
+    this.padding,
+    this.helper,
+    this.error,
+    this.textStyle,
+  }) : super(key: key);
+
+  final EdgeInsetsGeometry? padding;
+
+  final TextStyle? textStyle;
+
+  final Widget? helper;
+
+  final Widget? error;
+
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: padding ?? _kDefaultPadding,
+      child: Column(
+        children: <Widget>[
+          Align(
+            alignment: AlignmentDirectional.centerEnd,
+            child: child,
+          ),
+          if (helper != null)
+            Align(
+              alignment: AlignmentDirectional.centerStart,
+              child: DefaultTextStyle(
+                style: textStyle!,
+                child: helper!,
+              ),
+            ),
+          if (error != null)
+            Align(
+              alignment: AlignmentDirectional.centerStart,
+              child: DefaultTextStyle(
+                style: const TextStyle(
+                  color: Colors.warningPrimaryColor,
+                  fontWeight: FontWeight.w500,
+                ),
+                child: error!,
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}

lib/src/controls/form/text_box.dart

@@ -110,6 +110,7 @@ class TextBox extends StatefulWidget {
     this.header,
     this.headerStyle,
     this.iconButtonThemeData,
+    this.decoration,
   })  : assert(obscuringCharacter.length == 1),
         smartDashesType = smartDashesType ??
             (obscureText ? SmartDashesType.disabled : SmartDashesType.enabled),
@@ -180,6 +181,8 @@ class TextBox extends StatefulWidget {
 
   final TextStyle? style;
 
+  final BoxDecoration? decoration;
+
   final StrutStyle? strutStyle;
 
   final TextAlign textAlign;
@@ -608,6 +611,22 @@ class _TextBoxState extends State<TextBox>
           fontWeight: FontWeight.w400,
         );
 
+    final BoxDecoration decoration = widget.decoration ??
+        BoxDecoration(
+          border: Border(
+            bottom: BorderSide(
+              color: _effectiveFocusNode.hasFocus
+                  ? theme.accentColor
+                  : !enabled
+                      ? Colors.transparent
+                      : theme.brightness.isLight
+                          ? const Color.fromRGBO(0, 0, 0, 0.45)
+                          : const Color.fromRGBO(255, 255, 255, 0.54),
+              width: _effectiveFocusNode.hasFocus ? 2 : 0,
+            ),
+          ),
+        );
+
     final Color selectionColor = theme.accentColor.withOpacity(0.2);
 
     final Widget paddedEditable = Padding(
@@ -701,20 +720,7 @@ class _TextBoxState extends State<TextBox>
                     ? const Color.fromRGBO(249, 249, 249, 0.3)
                     : const Color.fromRGBO(255, 255, 255, 0.04),
           ),
-          foregroundDecoration: BoxDecoration(
-            border: Border(
-              bottom: BorderSide(
-                color: _effectiveFocusNode.hasFocus
-                    ? theme.accentColor
-                    : !enabled
-                        ? Colors.transparent
-                        : theme.brightness.isLight
-                            ? const Color.fromRGBO(0, 0, 0, 0.45)
-                            : const Color.fromRGBO(255, 255, 255, 0.54),
-                width: _effectiveFocusNode.hasFocus ? 2 : 0,
-              ),
-            ),
-          ),
+          foregroundDecoration: decoration,
           constraints: BoxConstraints(minHeight: widget.minHeight ?? 0),
           child: _selectionGestureDetectorBuilder.buildGestureDetector(
             behavior: HitTestBehavior.translucent,