inputDecorationTheme static method

InputDecorationTheme inputDecorationTheme({ required ColorScheme colorScheme, SchemeColor? baseSchemeColor, double? radius, FlexInputBorderType borderType = FlexInputBorderType.outline, bool filled = true, Color? fillColor, double focusedBorderWidth = kThickBorderWidth, double unfocusedBorderWidth = kThinBorderWidth, double gapPadding = 4, bool unfocusedHasBorder = true, })

An opinionated OutlineInputBorder or UnderlineInputBorder using InputDecorationTheme, with optional fill color and adjustable corner radius.

Requires a ColorScheme in colorScheme. The color scheme would typically be equal the color scheme also used to define the color scheme for your app theme.

Its corner radius can be adjusted, it defaults to kButtonRadius (20).

Implementation

static InputDecorationTheme inputDecorationTheme({
  /// Typically the same [ColorScheme] that is also use for your [ThemeData].
  required final ColorScheme colorScheme,

  /// Selects which color from the passed in colorScheme to use for the border
  /// and fill color of the input decorator.
  ///
  /// All colors in the color scheme are not good choices, but some work well.
  ///
  /// If not defined, [colorScheme.primary] will be used.
  final SchemeColor? baseSchemeColor,

  /// The button corner radius.
  ///
  /// Defaults to 20 [kButtonRadius].
  final double? radius,

  /// Selects input border type.
  ///
  /// Defaults to [FlexInputBorderType.outline].
  final FlexInputBorderType borderType = FlexInputBorderType.outline,

  /// If true the decoration's container is filled with [fillColor].
  ///
  /// Typically this field set to true if [border] is an
  /// [UnderlineInputBorder].
  ///
  /// The decoration's container is the area, defined by the border's
  /// [InputBorder.getOuterPath], which is filled if [filled] is
  /// true and bordered per the [border].
  ///
  /// Defaults to true.
  final bool filled = true,

  /// An optional totally custom fill color used to fill the
  /// `InputDecorator` background with, when `filled` is true.
  ///
  /// If null, defaults to color scheme color defined by `baseColor`
  /// withAlpha(0x0D) (5%) if color scheme is light and withAlpha(0x14) (8%)
  /// if color scheme is dark.
  final Color? fillColor,

  /// The border width when the input is selected.
  ///
  /// Defaults to 2.0.
  final double focusedBorderWidth = kThickBorderWidth,

  /// The border width when the input is unselected or disabled.
  ///
  /// Defaults to 1.5.
  final double unfocusedBorderWidth = kThinBorderWidth,

  /// Horizontal padding on either side of the border's
  /// [InputDecoration.labelText] width gap.
  ///
  /// Defaults to 4, which is also the default in SDK default input decorator.
  final double gapPadding = 4,

  /// Unfocused input decoration has a border.
  ///
  /// Defaults to true.
  ///
  /// Applies to both outline and underline mode. You would typically
  /// use this in a design where you use a fill color and want unfocused
  /// input fields to only be highlighted by the fill color and not even
  /// have an unfocused input border style.
  ///
  /// When set to false, there is no border bored on states enabledBorder and
  /// disabledBorder, there is a border on focusedBorder, focusedErrorBorder
  /// and errorBorder, so error thus has a border also when it is not focused.
  final bool unfocusedHasBorder = true,
}) {
  // Get selected color, defaults to primary.
  final Color _baseColor = baseSchemeColor == null
      ? colorScheme.primary
      : schemeColor(baseSchemeColor, colorScheme);

  final Color _fillColor = fillColor ??
      (colorScheme.brightness == Brightness.dark
          ? _baseColor.withAlpha(kFillColorAlphaDark)
          : _baseColor.withAlpha(kFillColorAlphaLight));

  switch (borderType) {
    case FlexInputBorderType.outline:
      return InputDecorationTheme(
        filled: filled,
        fillColor: _fillColor,
        hoverColor: _baseColor.withAlpha(kHoverBackgroundAlpha),
        focusColor: _baseColor.withAlpha(kFocusBackgroundAlpha),
        focusedBorder: OutlineInputBorder(
          gapPadding: gapPadding,
          borderRadius:
              BorderRadius.all(Radius.circular(radius ?? kButtonRadius)),
          borderSide: BorderSide(
            color: _baseColor,
            width: focusedBorderWidth,
          ),
        ),
        enabledBorder: OutlineInputBorder(
          gapPadding: gapPadding,
          borderRadius:
              BorderRadius.all(Radius.circular(radius ?? kButtonRadius)),
          borderSide: unfocusedHasBorder
              ? BorderSide(
                  color: _baseColor.withAlpha(kEnabledBorderAlpha),
                  width: unfocusedBorderWidth,
                )
              : BorderSide.none,
        ),
        disabledBorder: OutlineInputBorder(
          gapPadding: gapPadding,
          borderRadius:
              BorderRadius.all(Radius.circular(radius ?? kButtonRadius)),
          borderSide: unfocusedHasBorder
              ? BorderSide(
                  color: _baseColor
                      .blendAlpha(colorScheme.onSurface, kDisabledAlphaBlend)
                      .withAlpha(kDisabledBackgroundAlpha),
                  width: unfocusedBorderWidth,
                )
              : BorderSide.none,
        ),
        focusedErrorBorder: OutlineInputBorder(
          gapPadding: gapPadding,
          borderRadius:
              BorderRadius.all(Radius.circular(radius ?? kButtonRadius)),
          borderSide: BorderSide(
            color: colorScheme.error,
            width: focusedBorderWidth,
          ),
        ),
        errorBorder: OutlineInputBorder(
          gapPadding: gapPadding,
          borderRadius:
              BorderRadius.all(Radius.circular(radius ?? kButtonRadius)),
          borderSide: BorderSide(
            color: colorScheme.error.withAlpha(kEnabledBorderAlpha),
            width: unfocusedBorderWidth,
          ),
        ),
      );
    case FlexInputBorderType.underline:
      return InputDecorationTheme(
        filled: filled,
        fillColor: _fillColor,
        hoverColor: _baseColor.withAlpha(kHoverBackgroundAlpha),
        focusColor: _baseColor.withAlpha(kFocusBackgroundAlpha),
        focusedBorder: UnderlineInputBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(radius ?? kButtonRadius),
            topRight: Radius.circular(radius ?? kButtonRadius),
          ),
          borderSide: BorderSide(
            color: _baseColor,
            width: focusedBorderWidth,
          ),
        ),
        enabledBorder: UnderlineInputBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(radius ?? kButtonRadius),
            topRight: Radius.circular(radius ?? kButtonRadius),
          ),
          borderSide: unfocusedHasBorder
              ? BorderSide(
                  color: _baseColor.withAlpha(kEnabledBorderAlpha),
                  width: unfocusedBorderWidth,
                )
              : BorderSide.none,
        ),
        disabledBorder: UnderlineInputBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(radius ?? kButtonRadius),
            topRight: Radius.circular(radius ?? kButtonRadius),
          ),
          borderSide: unfocusedHasBorder
              ? BorderSide(
                  color: _baseColor
                      .blendAlpha(colorScheme.onSurface, kDisabledAlphaBlend)
                      .withAlpha(kDisabledBackgroundAlpha),
                  width: unfocusedBorderWidth,
                )
              : BorderSide.none,
        ),
        focusedErrorBorder: UnderlineInputBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(radius ?? kButtonRadius),
            topRight: Radius.circular(radius ?? kButtonRadius),
          ),
          borderSide: BorderSide(
            color: colorScheme.error,
            width: focusedBorderWidth,
          ),
        ),
        errorBorder: UnderlineInputBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(radius ?? kButtonRadius),
            topRight: Radius.circular(radius ?? kButtonRadius),
          ),
          borderSide: BorderSide(
            color: colorScheme.error.withAlpha(kEnabledBorderAlpha),
            width: unfocusedBorderWidth,
          ),
        ),
      );
  }
}