buzz/mobile/lib/shared/widgets/buzz_search_field.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:buzz/shared/theme/buzz_icons.dart';

import '../theme/theme.dart';

/// Height of an idle [BuzzSearchField].
const double buzzSearchIdleFieldHeight = 45;

/// Font size used for idle [BuzzSearchField] text.
const double buzzSearchIdleTextSize = 15;
const double _searchIdleIconSize = 26;

/// Base size for the Android search controls; search needs optical scaling.
const double buzzSearchControlIconSize = 24;
const double _searchCompactIconSize = 18;
const double _searchIdleIconInset = Grid.xxs;
const double _searchCompactTextInset =
    _searchIdleIconInset + _searchCompactIconSize + Grid.xxs;

/// Buzz's global-search text field treatment, shared by search-like inputs.
class BuzzSearchField extends StatelessWidget {
  /// Creates a search field with Buzz's shared styling.
  const BuzzSearchField({
    required this.controller,
    required this.focusNode,
    required this.hintText,
    required this.iconColor,
    required this.inputColor,
    required this.placeholderColor,
    required this.surfaceColor,
    required this.isEditing,
    required this.reduceMotion,
    required this.motionDuration,
    required this.onTap,
    required this.onChanged,
    required this.onSubmitted,
    this.fieldKey = const Key('search-field'),
    this.autocorrect = true,
    this.enableSuggestions = true,
    this.enabled = true,
    this.textInputAction = TextInputAction.search,
    super.key,
  });

  /// Controller that owns the field's editable text.
  final TextEditingController controller;

  /// Node that controls the field's focus.
  final FocusNode focusNode;

  /// Placeholder shown while the field is idle and empty.
  final String hintText;

  /// Color applied to the search icon.
  final Color iconColor;

  /// Color applied to entered text.
  final Color inputColor;

  /// Color applied to [hintText].
  final Color placeholderColor;

  /// Background color of the field.
  final Color surfaceColor;

  /// Whether the field is in its compact editing state.
  final bool isEditing;

  /// Whether to suppress field animations for reduced-motion users.
  final bool reduceMotion;

  /// Duration used by the field's editing-state animation.
  final Duration motionDuration;

  /// Called when the field is tapped.
  final VoidCallback onTap;

  /// Called whenever the field's text changes.
  final ValueChanged<String> onChanged;

  /// Called when the user submits the field.
  final ValueChanged<String> onSubmitted;

  /// Key assigned to the underlying text field.
  final Key fieldKey;

  /// Whether the text field should autocorrect user input.
  final bool autocorrect;

  /// Whether the platform should offer text suggestions.
  final bool enableSuggestions;

  /// Whether the text field accepts user input.
  final bool enabled;

  /// Action displayed on the keyboard's submit key.
  final TextInputAction textInputAction;

  @override
  Widget build(BuildContext context) {
    final idleIconSize = defaultTargetPlatform == TargetPlatform.android
        ? buzzSearchControlIconSize * 0.75
        : _searchIdleIconSize;
    final idleTextInset = _searchIdleIconInset + idleIconSize + Grid.xxs;
    return DecoratedBox(
      decoration: BoxDecoration(
        color: surfaceColor,
        borderRadius: BorderRadius.circular(
          defaultTargetPlatform == TargetPlatform.android
              ? Radii.full
              : Radii.lg,
        ),
      ),
      child: Stack(
        children: [
          Positioned.fill(
            child: Align(
              alignment: Alignment.centerLeft,
              child: SizedBox(
                width: double.infinity,
                child: TextField(
                  key: fieldKey,
                  controller: controller,
                  focusNode: focusNode,
                  autocorrect: autocorrect,
                  enableSuggestions: enableSuggestions,
                  enabled: enabled,
                  decoration: InputDecoration(
                    hintText: isEditing ? null : hintText,
                    hintStyle: searchInputTextStyle.copyWith(
                      color: placeholderColor,
                      fontSize: buzzSearchIdleTextSize,
                      height: 20 / buzzSearchIdleTextSize,
                    ),
                    border: InputBorder.none,
                    enabledBorder: InputBorder.none,
                    focusedBorder: InputBorder.none,
                    isDense: true,
                    contentPadding: EdgeInsets.only(
                      left: isEditing ? _searchCompactTextInset : idleTextInset,
                      right: Grid.xxs,
                      top: isEditing ? Grid.xxs : 0,
                      bottom: isEditing ? Grid.xxs : 0,
                    ),
                  ),
                  style: searchInputTextStyle.copyWith(color: inputColor),
                  textAlignVertical: TextAlignVertical.center,
                  textAlign: TextAlign.start,
                  textInputAction: textInputAction,
                  onTap: onTap,
                  onChanged: onChanged,
                  onSubmitted: onSubmitted,
                ),
              ),
            ),
          ),
          IgnorePointer(
            child: Align(
              alignment: Alignment.centerLeft,
              child: Padding(
                padding: const EdgeInsets.only(left: _searchIdleIconInset),
                child: AnimatedScale(
                  duration: reduceMotion ? Duration.zero : motionDuration,
                  curve: Curves.easeInOutCubic,
                  scale: isEditing ? _searchCompactIconSize / idleIconSize : 1,
                  child: Icon(
                    BuzzIcons.search,
                    key: const Key('search-moving-icon'),
                    size: idleIconSize,
                    color: iconColor,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}