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: Builder(
                builder: (context) {
                  return 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: Icon(
                      context.rounded ? ZetaIcons.search_round : ZetaIcons.search_sharp,
                      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,
                          ),
                      ],
                    ),
                  );
                },
              ),
            ),
          );
        },
      );