feat: add background / surface setting to BlueForms

Author: iOSonntag

lib/architect/plans/text_field/data.dart

@@ -22,6 +22,10 @@ class TextFieldData extends PlanData {
   final bool autocorrect;
   final bool obscureText;
   final bool enableSuggestions;
+
+  /// The Textfield will assume it will be displayed on a surface, if it is
+  /// displayed on a background, set this to true to adjust the colors accordingly.
+  final bool onBackground;
   final TextInputType? textInputType;
   final ValueChanged<String>? onChanged;
   final ValueChanged<String?>? onSave;
@@ -50,6 +54,7 @@ class TextFieldData extends PlanData {
     this.autocorrect = true,
     this.obscureText = false,
     this.enableSuggestions = true,
+    this.onBackground = false,
     this.textInputType,
     this.onChanged,
     this.onSave,

lib/architect/plans/text_field/default.regular.dart

@@ -121,7 +121,7 @@ class DefaultTextFieldRegular extends ArchBaseStatelessWidget<TextFieldData> {
         children: [
           TextLabel.small(
             data.label!,
-            color: hasError ? context.colors.error : data.labelColor ?? context.colors.onBackgroundLessFocus,
+            color: hasError ? context.colors.error : data.labelColor ?? (data.onBackground ? context.colors.onBackgroundLessFocus : context.colors.onSurfaceLessFocus),
           ),
 
           if (data.visuallyMarkAsRequired) TextLabel.small(

lib/blue_forms/blue_forms.dart

@@ -11,6 +11,9 @@ class BlueForms extends StatefulWidget {
 
   final VoidCallback? onCancel;
   final OnCompleteForms onComplete;
+  /// BlueForms assume it will be displayed on a surface, if it is displayed on
+  /// a background, set this to true to adjust the colors accordingly.
+  final bool onBackground;
   final bool isLoading;
   final String? errorMessage;
   final FormError? error;
@@ -30,6 +33,7 @@ class BlueForms extends StatefulWidget {
     super.key,
     this.onCancel,
     required this.onComplete,
+    this.onBackground = false,
     this.isLoading = false,
     this.error,
     this.errorMessage,
@@ -197,6 +201,7 @@ class _BlueFormsState extends State<BlueForms> {
       return _FormPageWidget(
         controller: page._controller!,
         definition: page,
+        onBackground: widget.onBackground,
         labelColor: widget.labelColor,
         visuallyMarkRequiredFields: widget.visuallyMarkRequiredFields,
         currentSavedValues: _savedInputs,

lib/blue_forms/widgets/form_async_dependency.dart

@@ -9,6 +9,7 @@ class _FormAsyncDependency extends material.StatefulWidget {
 
   final FormAsyncDependency definition;
   final Color? labelColor;
+  final bool onBackground;
   final bool isFirstElement;
   final bool isLastElement;
   final bool visuallyMarkRequired;
@@ -22,6 +23,7 @@ class _FormAsyncDependency extends material.StatefulWidget {
     super.key,
     required this.definition,
     this.labelColor,
+    required this.onBackground,
     required this.isFirstElement,
     required this.isLastElement,
     required this.visuallyMarkRequired,
@@ -76,6 +78,7 @@ class _FormAsyncDependencyState extends material.State<_FormAsyncDependency> {
           key: key,
           definition: formElement,
           labelColor: widget.labelColor,
+          onBackground: widget.onBackground,
           isFirstElement: widget.isFirstElement,
           isLastElement: widget.isLastElement,
           visuallyMarkRequired: widget.visuallyMarkRequired,

lib/blue_forms/widgets/form_element.dart

@@ -7,6 +7,7 @@ class _FormElementWidget extends StatelessWidget {
 
   final FormElement definition;
   final Color? labelColor;
+  final bool onBackground;
   final bool isFirstElement;
   final bool isLastElement;
   final bool visuallyMarkRequired;
@@ -20,6 +21,7 @@ class _FormElementWidget extends StatelessWidget {
     super.key,
     required this.definition,
     this.labelColor,
+    required this.onBackground,
     required this.isFirstElement,
     required this.isLastElement,
     required this.visuallyMarkRequired,
@@ -48,6 +50,7 @@ class _FormElementWidget extends StatelessWidget {
         key: Key(definition.id),
         definition: definition as FormInputText,
         labelColor: labelColor,
+        onBackground: onBackground,
         visuallyMarkRequired: visuallyMarkRequired,
         currentSavedValue: currentSavedValues[definition.id],
         externalError: externalErrors[definition.id],
@@ -62,6 +65,7 @@ class _FormElementWidget extends StatelessWidget {
         key: Key(definition.id),
         definition: definition as FormInputDateTime,
         labelColor: labelColor,
+        onBackground: onBackground,
         visuallyMarkRequired: visuallyMarkRequired,
         currentSavedValue: currentSavedValues[definition.id],
         externalError: externalErrors[definition.id],
@@ -76,6 +80,7 @@ class _FormElementWidget extends StatelessWidget {
         key: Key(definition.id),
         definition: definition as FormInputImages,
         labelColor: labelColor,
+        onBackground: onBackground,
         visuallyMarkRequired: visuallyMarkRequired,
         currentSavedValue: currentSavedValues[definition.id],
         externalError: externalErrors[definition.id],
@@ -89,6 +94,7 @@ class _FormElementWidget extends StatelessWidget {
         key: Key(definition.id),
         definition: definition as FormInputPickOption,
         labelColor: labelColor,
+        onBackground: onBackground,
         visuallyMarkRequired: visuallyMarkRequired,
         currentSavedValue: currentSavedValues[definition.id],
         externalError: externalErrors[definition.id],
@@ -101,6 +107,7 @@ class _FormElementWidget extends StatelessWidget {
       return _FormAsyncDependency(
         definition: definition as FormAsyncDependency,
         labelColor: labelColor,
+        onBackground: onBackground,
         isFirstElement: isFirstElement,
         isLastElement: isLastElement,
         visuallyMarkRequired: visuallyMarkRequired,
@@ -116,6 +123,7 @@ class _FormElementWidget extends StatelessWidget {
       return _FormGroup(
         definition: definition as FormGroup,
         labelColor: labelColor,
+        onBackground: onBackground,
         isFirstElement: isFirstElement,
         isLastElement: isLastElement,
         visuallyMarkRequired: visuallyMarkRequired,

lib/blue_forms/widgets/form_group.dart

@@ -9,6 +9,7 @@ class _FormGroup extends StatelessWidget {
 
   final FormGroup definition;
   final Color? labelColor;
+  final bool onBackground;
   final bool isFirstElement;
   final bool isLastElement;
   final bool visuallyMarkRequired;
@@ -22,6 +23,7 @@ class _FormGroup extends StatelessWidget {
     super.key,
     required this.definition,
     this.labelColor,
+    required this.onBackground,
     required this.isFirstElement,
     required this.isLastElement,
     required this.visuallyMarkRequired,
@@ -58,6 +60,7 @@ class _FormGroup extends StatelessWidget {
             child: fiInputDefinition.isActive == false ? EmptyWidget() : _FormElementWidget(
               definition: fiInputDefinition, 
               labelColor: labelColor,
+              onBackground: onBackground,
               isFirstElement: isFirst, 
               isLastElement: isLast, 
               visuallyMarkRequired: visuallyMarkRequired,
@@ -120,6 +123,7 @@ class _FormGroup extends StatelessWidget {
         _FormElementWidget(
           definition: fiInputDefinition, 
           labelColor: labelColor,
+          onBackground: onBackground,
           isFirstElement: isFirst, 
           isLastElement: isLast, 
           visuallyMarkRequired: visuallyMarkRequired,

lib/blue_forms/widgets/form_input_container.dart

@@ -8,6 +8,7 @@ class _FormInputContainerWidget extends StatelessWidget {
 
   final String? description;
   final bool hasLabel;
+  final bool onBackground;
   final List<FormElementButton> extraButtons;
   final Widget child;
 
@@ -17,6 +18,7 @@ class _FormInputContainerWidget extends StatelessWidget {
     this.description,
     this.extraButtons = const [],
     required this.hasLabel,
+    required this.onBackground,
     required this.child,
   });
 
@@ -87,7 +89,7 @@ class _FormInputContainerWidget extends StatelessWidget {
           padding: context.paddingM_0.setTop(context.dimensions.spaceLValue),
           child: TextBody.medium(description!,
             italic: true,
-            color: context.colors.onBackgroundLessFocus,
+            color: onBackground ? context.colors.onBackgroundLessFocus : context.colors.onSurfaceLessFocus,
           ),
         ),
 

lib/blue_forms/widgets/form_input_date_time.dart

@@ -8,6 +8,7 @@ class _FormInputDateTimeWidget extends material.StatefulWidget {
 
   final FormInputDateTime definition;
   final Color? labelColor;
+  final bool onBackground;
   final bool visuallyMarkRequired;
   final dynamic currentSavedValue;
   final String? externalError;
@@ -18,6 +19,7 @@ class _FormInputDateTimeWidget extends material.StatefulWidget {
     super.key,
     required this.definition,
     this.labelColor,
+    required this.onBackground,
     required this.visuallyMarkRequired,
     required this.currentSavedValue,
     required this.onSave,
@@ -104,10 +106,12 @@ class _FormInputDateTimeWidgetState extends material.State<_FormInputDateTimeWid
       description: widget.definition.description,
       extraButtons: widget.definition.extraButtons,
       hasLabel: widget.definition.label != null,
+      onBackground: widget.onBackground,
       child: TapDetector(
         onTap: _pickDateTime,
         child: _FakeTextField<DateTime>(
           labelColor: widget.labelColor,
+          onBackground: widget.onBackground,
           visuallyMarkAsRequired: widget.visuallyMarkRequired && widget.definition.isOptional == false,
           label: widget.definition.label,
           hint: widget.definition.hint,
@@ -145,6 +149,7 @@ class _FakeTextField<T> extends material.StatefulWidget {
   final String? externalError;
   final String? label;
   final Color? labelColor;
+  final bool onBackground;
   final bool visuallyMarkAsRequired;
   final String? hint;
   final String Function(T? value) toDisplayString;
@@ -156,6 +161,7 @@ class _FakeTextField<T> extends material.StatefulWidget {
     this.externalError,
     this.label,
     this.labelColor,
+    required this.onBackground,
     this.hint,
     this.visuallyMarkAsRequired = false,
     required this.toDisplayString,
@@ -272,7 +278,7 @@ class _FakeTextFieldState<T> extends material.State<_FakeTextField<T>> {
         children: [
           TextLabel.small(
             widget.label!,
-            color: hasError ? context.colors.error : widget.labelColor ?? context.colors.onBackgroundLessFocus,
+            color: hasError ? context.colors.error : widget.labelColor ?? (widget.onBackground ? context.colors.onBackgroundLessFocus : context.colors.onSurfaceLessFocus),
           ),
 
           if (widget.visuallyMarkAsRequired) TextLabel.small(

lib/blue_forms/widgets/form_input_images.dart

@@ -8,6 +8,7 @@ class _FormInputImagesWidget extends StatelessWidget {
 
   final FormInputImages definition;
   final Color? labelColor;
+  final bool onBackground;
   final bool visuallyMarkRequired;
   final dynamic currentSavedValue;
   final String? externalError;
@@ -17,6 +18,7 @@ class _FormInputImagesWidget extends StatelessWidget {
     super.key,
     required this.definition,
     this.labelColor,
+    required this.onBackground,
     required this.visuallyMarkRequired,
     required this.currentSavedValue,
     required this.onSave,
@@ -38,6 +40,7 @@ class _FormInputImagesWidget extends StatelessWidget {
       return _FormInputImagesWidgetSingle(
         definition: definition,
         labelColor: labelColor,
+        onBackground: onBackground,
         visuallyMarkRequired: visuallyMarkRequired,
         currentSavedValue: currentSavedFile,
         onSave: (image) => onSave(image == null ? [] : [image]),
@@ -48,6 +51,7 @@ class _FormInputImagesWidget extends StatelessWidget {
     return _FormInputImagesWidgetMulti(
       definition: definition,
       labelColor: labelColor,
+      onBackground: onBackground,
       visuallyMarkRequired: visuallyMarkRequired,
       currentSavedValue: currentSavedValue,
       onSave: onSave,
@@ -64,6 +68,7 @@ class _FormInputImagesWidgetMulti extends StatefulWidget {
 
   final FormInputImages definition;
   final Color? labelColor;
+  final bool onBackground;
   final bool visuallyMarkRequired;
   final dynamic currentSavedValue;
   final String? externalError;
@@ -74,6 +79,7 @@ class _FormInputImagesWidgetMulti extends StatefulWidget {
     super.key,
     required this.definition,
     required this.labelColor,
+    required this.onBackground,
     required this.visuallyMarkRequired,
     required this.currentSavedValue,
     required this.onSave,
@@ -114,6 +120,7 @@ class _FormInputImagesWidgetMultiState extends State<_FormInputImagesWidgetMulti
       description: widget.definition.description,
       extraButtons: widget.definition.extraButtons,
       hasLabel: widget.definition.label != null,
+      onBackground: widget.onBackground,
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         mainAxisSize: MainAxisSize.min,

lib/blue_forms/widgets/form_input_images_single.dart

@@ -10,6 +10,7 @@ class _FormInputImagesWidgetSingle extends StatefulWidget {
 
   final FormInputImages definition;
   final Color? labelColor;
+  final bool onBackground;
   final bool visuallyMarkRequired;
   final dynamic currentSavedValue;
   final String? externalError;
@@ -20,6 +21,7 @@ class _FormInputImagesWidgetSingle extends StatefulWidget {
     super.key,
     required this.definition,
     this.labelColor,
+    required this.onBackground,
     required this.visuallyMarkRequired,
     required this.currentSavedValue,
     required this.onSave,
@@ -126,6 +128,7 @@ class _FormInputImagesWidgetSingleState extends State<_FormInputImagesWidgetSing
       description: widget.definition.description,
       extraButtons: widget.definition.extraButtons,
       hasLabel: widget.definition.label != null,
+      onBackground: widget.onBackground,
       child: FormField<Uint8List?>(
         initialValue: _getImageFromSavedOrInitialValue(),
         onSaved: widget.onSave,

lib/blue_forms/widgets/form_input_pick_option.dart

@@ -9,6 +9,7 @@ class _FormInputPickOptionWidget extends StatefulWidget {
 
   final FormInputPickOption definition;
   final Color? labelColor;
+  final bool onBackground;
   final bool visuallyMarkRequired;
   final dynamic currentSavedValue;
   final String? externalError;
@@ -18,6 +19,7 @@ class _FormInputPickOptionWidget extends StatefulWidget {
     super.key,
     required this.definition,
     this.labelColor,
+    required this.onBackground,
     required this.visuallyMarkRequired,
     required this.currentSavedValue,
     required this.onSave,
@@ -102,6 +104,7 @@ class _FormInputPickOptionWidgetState extends State<_FormInputPickOptionWidget>
       description: widget.definition.description,
       extraButtons: widget.definition.extraButtons,
       hasLabel: widget.definition.label != null,
+      onBackground: widget.onBackground,
       child: Column(
         children: [
 
@@ -127,7 +130,7 @@ class _FormInputPickOptionWidgetState extends State<_FormInputPickOptionWidget>
                   Padding(
                     padding: context.paddingM_0,
                     child: TextBody.small(LibStrings.lib_blueForms_inputPickOption_pleaseChoose.tr(),
-                      color: context.colors.onBackgroundLessFocus,
+                      color: widget.onBackground ? context.colors.onBackgroundLessFocus : context.colors.onSurfaceLessFocus,
                     ),
                   ),
                 );
@@ -228,7 +231,7 @@ class _FormInputPickOptionWidgetState extends State<_FormInputPickOptionWidget>
         if (!selected) context.spaceXXS,
 
         TextBody.small(item.subtitle!,
-          color: context.colors.onSurfaceLessFocus,
+          color: !selected ? context.colors.onSurfaceLessFocus : (widget.onBackground ? context.colors.onBackgroundLessFocus : context.colors.onSurfaceLessFocus),
           italic: true,
         ),
       ],
@@ -239,8 +242,8 @@ class _FormInputPickOptionWidgetState extends State<_FormInputPickOptionWidget>
   {
     if (selected)
     {
-      return TextBody.small(title,
-        color: context.colors.onSurface,
+      return TextLabel.small(title,
+        color: widget.onBackground ? context.colors.onBackground : context.colors.onSurface,
       );
     }
 
@@ -258,7 +261,7 @@ class _FormInputPickOptionWidgetState extends State<_FormInputPickOptionWidget>
         children: [
           TextLabel.small(
             widget.definition.label,
-            color: hasError ? context.colors.error : widget.labelColor ?? context.colors.onBackgroundLessFocus,
+            color: hasError ? context.colors.error : widget.labelColor ?? (widget.onBackground ? context.colors.onBackgroundLessFocus : context.colors.onSurfaceLessFocus),
           ),
 
           if (widget.visuallyMarkRequired && widget.definition.isRequired) TextLabel.small(