ZetaSearchBar constructor

Implementation

ZetaSearchBar({
  super.autovalidateMode,
  super.validator,
  super.onSaved,
  super.onChange,
  super.onFieldSubmitted,
  super.requirementLevel,
  super.controller,
  super.disabled = false,
  super.initialValue,
  this.size = ZetaWidgetSize.medium,
  this.shape = ZetaWidgetBorder.rounded,
  this.placeholder,
  this.onSpeechToText,
  this.showSpeechToText = true,
  this.focusNode,
  this.textInputAction,
  this.microphoneSemanticLabel,
  this.clearSemanticLabel,
  super.key,
}) : super(
        builder: (field) {
          final zeta = Zeta.of(field.context);

          final _ZetaSearchBarState state = field as _ZetaSearchBarState;

          final Radius borderRadius = switch (shape) {
            ZetaWidgetBorder.rounded => zeta.radius.minimal,
            ZetaWidgetBorder.full => zeta.radius.full,
            _ => zeta.radius.none,
          };

          late final double iconSize;

          switch (size) {
            case ZetaWidgetSize.large:
              iconSize = zeta.spacing.xl_2;
            case ZetaWidgetSize.medium:
              iconSize = zeta.spacing.xl;
            case ZetaWidgetSize.small:
              iconSize = zeta.spacing.large;
          }

          return ZetaRoundedScope(
            rounded: shape != ZetaWidgetBorder.sharp,
            child: Semantics(
              excludeSemantics: disabled,
              label: disabled ? placeholder ?? 'Search' : null, // TODO(UX-1003): Localize
              enabled: disabled ? false : null,
              child: InternalTextInput(
                focusNode: focusNode,
                size: size,
                disabled: disabled,
                constrained: true,
                borderRadius: BorderRadius.all(borderRadius),
                controller: state.effectiveController,
                keyboardType: TextInputType.text,
                textInputAction: textInputAction,
                placeholder: placeholder ?? 'Search', // TODO(UX-1003): Localize
                onSubmit: onFieldSubmitted,
                onChange: state.onChange,
                prefix: ZetaIcon(
                  ZetaIcons.search,
                  color: !disabled ? zeta.colors.mainSubtle : zeta.colors.mainDisabled,
                  size: iconSize,
                ),
                suffix: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    if (state.effectiveController.text.isNotEmpty && !disabled) ...[
                      InputIconButton(
                        icon: ZetaIcons.cancel,
                        onTap: () => state.onChange(''),
                        disabled: disabled,
                        size: size,
                        semanticLabel: clearSemanticLabel,
                        color: zeta.colors.mainSubtle,
                        key: const ValueKey('search-clear-btn'),
                      ),
                      if (showSpeechToText)
                        SizedBox(
                          height: iconSize,
                          child: VerticalDivider(
                            color: zeta.colors.mainSubtle,
                            width: 5,
                            thickness: 1,
                          ),
                        ),
                    ],
                    if (showSpeechToText)
                      InputIconButton(
                        icon: ZetaIcons.microphone,
                        onTap: state.onSpeechToText,
                        key: const ValueKey('speech-to-text-btn'),
                        disabled: disabled,
                        semanticLabel: microphoneSemanticLabel,
                        size: size,
                        color: zeta.colors.mainDefault,
                      ),
                  ],
                ),
              ),
            ),
          );
        },
      );