fix: keep borderless form widgets borderless under an app's theme

packages/apptive_grid_form/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 2.4.1
+
+ - **FIX**: Form Widgets that bring their own layout no longer get a border from the embedding app. `CheckBoxFormWidget`, `AttachmentFormWidget`, `GeolocationFormWidget`, `AddressFormWidget`, `EnumFormWidget`, `EnumCollectionFormWidget` and the date and time fields inside `DateTimeFormWidget` only set `InputDecoration.border`, but an `InputDecorator` picks `enabledBorder`, `disabledBorder`, `focusedBorder`, `errorBorder` or `focusedErrorBorder` depending on the field's state and falls back to `border` only where the matching one is `null`. Since those are filled from the app's `InputDecorationTheme`, an app that styles the individual states – a line in the resting state, for example – drew a box around a checkbox or an option list. All five are now set.
+
 ## 2.4.0
 
  - **FEAT**: `ApptiveGridForm` and `ApptiveGridFormData` take a `labelPosition`. With `ApptiveGridLabelPosition.above` a field's label is shown as a separate `Text` above the field instead of as a floating label inside it, which also makes the field's placeholder visible while it is empty. `labelStyle` styles those labels, defaulting to `InputDecorationTheme.labelStyle` and then `TextTheme.titleMedium`. The default stays `ApptiveGridLabelPosition.floating`, so existing forms are unchanged.

packages/apptive_grid_form/lib/src/widgets/form_widget/address_form_widget.dart

@@ -133,13 +133,14 @@ class _AddressFormWidgetState extends State<AddressFormWidget>
             Provider.value(value: const PermissionManager()),
           ],
           builder: (providerContext, __) => InputDecorator(
-            decoration: widget.component.baseDecoration(context).copyWith(
+            decoration: widget.component
+                .baseDecoration(context)
+                .copyWith(
                   errorText: formState.errorText,
                   contentPadding: EdgeInsets.zero,
-                  border: InputBorder.none,
-                  errorBorder: InputBorder.none,
                   filled: false,
-                ),
+                )
+                .withoutBorder,
             child: Column(
               mainAxisSize: MainAxisSize.min,
               crossAxisAlignment: CrossAxisAlignment.stretch,

packages/apptive_grid_form/lib/src/widgets/form_widget/attachment_form_widget.dart

@@ -81,14 +81,15 @@ class _AttachmentFormWidgetState extends State<AttachmentFormWidget>
         initialValue: widget.component.data,
         builder: (formState) {
           return InputDecorator(
-            decoration: widget.component.baseDecoration(context).copyWith(
+            decoration: widget.component
+                .baseDecoration(context)
+                .copyWith(
                   errorText: formState.errorText,
                   contentPadding: EdgeInsets.zero,
-                  border: InputBorder.none,
-                  errorBorder: InputBorder.none,
                   isDense: true,
                   filled: false,
-                ),
+                )
+                .withoutBorder,
             child: Column(
               mainAxisSize: MainAxisSize.min,
               crossAxisAlignment: CrossAxisAlignment.stretch,

packages/apptive_grid_form/lib/src/widgets/form_widget/check_box_form_widget.dart

@@ -43,11 +43,9 @@ class _CheckBoxFormWidgetState extends State<CheckBoxFormWidget>
             helperMaxLines: 100,
             errorText: state.errorText,
             contentPadding: EdgeInsets.zero,
-            border: InputBorder.none,
-            errorBorder: InputBorder.none,
             isDense: true,
             filled: false,
-          ),
+          ).withoutBorder,
           child: ColorFiltered(
             colorFilter: ColorFilter.mode(
               Theme.of(context).colorScheme.error,

packages/apptive_grid_form/lib/src/widgets/form_widget/date_time_form_widget.dart

@@ -101,12 +101,11 @@ class _DateTimeFormWidgetState extends State<DateTimeFormWidget>
                       controller: _dateController,
                       decoration: InputDecoration(
                         hintText: localization.dateTimeFieldDate,
-                        border: InputBorder.none,
                         isDense: true,
                         filled: false,
                         contentPadding: EdgeInsets.zero,
                         enabled: widget.component.enabled,
-                      ),
+                      ).withoutBorder,
                       enabled: widget.component.enabled,
                     ),
                   ),
@@ -148,10 +147,9 @@ class _DateTimeFormWidgetState extends State<DateTimeFormWidget>
                         hintText: localization.dateTimeFieldTime,
                         isDense: true,
                         filled: false,
-                        border: InputBorder.none,
                         contentPadding: EdgeInsets.zero,
                         enabled: widget.component.enabled,
-                      ),
+                      ).withoutBorder,
                       enabled: widget.component.enabled,
                     ),
                   ),

packages/apptive_grid_form/lib/src/widgets/form_widget/enum_collection_form_widget.dart

@@ -42,12 +42,14 @@ class _EnumCollectionFormWidgetState extends State<EnumCollectionFormWidget>
       enabled: widget.component.enabled,
       builder: (fieldState) {
         return InputDecorator(
-          decoration: widget.component.baseDecoration(context).copyWith(
+          decoration: widget.component
+              .baseDecoration(context)
+              .copyWith(
                 errorText: fieldState.errorText,
                 contentPadding: EdgeInsets.zero,
                 filled: false,
-                border: InputBorder.none,
-              ),
+              )
+              .withoutBorder,
           child: Padding(
             padding: const EdgeInsets.only(top: 0),
             child: Builder(

packages/apptive_grid_form/lib/src/widgets/form_widget/enum_form_widget.dart

@@ -34,12 +34,14 @@ class _EnumFormWidgetState extends State<EnumFormWidget>
         enabled: widget.component.enabled,
         builder: (fieldState) {
           return InputDecorator(
-            decoration: widget.component.baseDecoration(context).copyWith(
+            decoration: widget.component
+                .baseDecoration(context)
+                .copyWith(
                   errorText: fieldState.errorText,
                   contentPadding: EdgeInsets.zero,
                   filled: false,
-                  border: InputBorder.none,
-                ),
+                )
+                .withoutBorder,
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.stretch,
               mainAxisSize: MainAxisSize.min,

packages/apptive_grid_form/lib/src/widgets/form_widget/form_widget_helpers.dart

@@ -1,5 +1,6 @@
 import 'package:apptive_grid_form/apptive_grid_form.dart';
-import 'package:flutter/material.dart' show BuildContext, InputDecoration;
+import 'package:flutter/material.dart'
+    show BuildContext, InputBorder, InputDecoration, InputDecorationTheme;
 
 /// Extension on [FormComponent]
 extension FormComponentX on FormComponent {
@@ -28,3 +29,33 @@ extension FormComponentX on FormComponent {
     );
   }
 }
+
+/// Extension on [InputDecoration]
+extension InputDecorationX on InputDecoration {
+  /// Uses [border] in every state of the field
+  ///
+  /// Setting [InputDecoration.border] alone is not enough. An
+  /// [InputDecorator] picks [InputDecoration.enabledBorder],
+  /// [InputDecoration.disabledBorder], [InputDecoration.focusedBorder],
+  /// [InputDecoration.errorBorder] or [InputDecoration.focusedErrorBorder]
+  /// depending on the field's state and only falls back to
+  /// [InputDecoration.border] where the matching one is `null`. Since
+  /// [InputDecoration.applyDefaults] fills the missing ones from the
+  /// [InputDecorationTheme] of the embedding app, a border set through
+  /// [InputDecoration.border] is overridden as soon as an app styles the
+  /// individual states.
+  InputDecoration borderInEveryState(InputBorder border) => copyWith(
+        border: border,
+        enabledBorder: border,
+        disabledBorder: border,
+        focusedBorder: border,
+        errorBorder: border,
+        focusedErrorBorder: border,
+      );
+
+  /// Hides the field's border in every state
+  ///
+  /// Use this for Widgets that bring their own layout and must not be boxed in
+  /// by the [InputDecorationTheme] of the app they are displayed in.
+  InputDecoration get withoutBorder => borderInEveryState(InputBorder.none);
+}

packages/apptive_grid_form/lib/src/widgets/form_widget/geolocation_form_widget.dart

@@ -82,13 +82,14 @@ class _GeolocationFormWidgetState extends State<GeolocationFormWidget>
             Provider.value(value: const PermissionManager()),
           ],
           builder: (_, __) => InputDecorator(
-            decoration: widget.component.baseDecoration(context).copyWith(
+            decoration: widget.component
+                .baseDecoration(context)
+                .copyWith(
                   errorText: formState.errorText,
                   contentPadding: EdgeInsets.zero,
-                  border: InputBorder.none,
-                  errorBorder: InputBorder.none,
                   filled: false,
-                ),
+                )
+                .withoutBorder,
             child: Column(
               mainAxisSize: MainAxisSize.min,
               crossAxisAlignment: CrossAxisAlignment.stretch,

packages/apptive_grid_form/pubspec.yaml

@@ -1,6 +1,6 @@
 name: apptive_grid_form
 description: A Flutter Package to display ApptiveGrid Forms inside a Flutter App.
-version: 2.4.0
+version: 2.4.1
 homepage: https://www.apptivegrid.de
 repository: https://github.com/ApptiveGrid/apptive_grid_flutter/tree/main/packages/apptive_grid_form