FluoSignInStyle.web constructor

FluoSignInStyle.web({ ThemeData? appTheme, Color? backgroundColor, EdgeInsets? padding, Color? backButtonColor, TextStyle? titleTextStyle, TextStyle? inputTextStyle, InputDecorationTheme? inputDecorationTheme, TextAlignVertical? inputTextAlignVertical, TextStyle? inputErrorTextStyle, PinTheme? codeInputThemeDefault, PinTheme? codeInputThemeFocused, PinTheme? codeInputThemeSubmitted, PinTheme? codeInputThemeFollowing, PinTheme? codeInputThemeDisabled, PinTheme? codeInputThemeError, ButtonStyle? continueButtonStyle, Size? continueButtonProgressIndicatorSize, Color? continueButtonProgressIndicatorColor, double? continueButtonProgressIndicatorStrokeWidth, EdgeInsets? countryItemPadding, Color? countryItemHighlightColor, TextStyle? countryTextStyle, })

Creates a FluoSignInStyle with web defaults.

Implementation

factory FluoSignInStyle.web({
  ThemeData? appTheme,
  Color? backgroundColor,
  EdgeInsets? padding,
  Color? backButtonColor,
  TextStyle? titleTextStyle,
  TextStyle? inputTextStyle,
  InputDecorationTheme? inputDecorationTheme,
  TextAlignVertical? inputTextAlignVertical,
  TextStyle? inputErrorTextStyle,
  PinTheme? codeInputThemeDefault,
  PinTheme? codeInputThemeFocused,
  PinTheme? codeInputThemeSubmitted,
  PinTheme? codeInputThemeFollowing,
  PinTheme? codeInputThemeDisabled,
  PinTheme? codeInputThemeError,
  ButtonStyle? continueButtonStyle,
  Size? continueButtonProgressIndicatorSize,
  Color? continueButtonProgressIndicatorColor,
  double? continueButtonProgressIndicatorStrokeWidth,
  EdgeInsets? countryItemPadding,
  Color? countryItemHighlightColor,
  TextStyle? countryTextStyle,
}) {
  final primaryColor = appTheme?.colorScheme.primary ?? Colors.black;
  final accentColor = appTheme?.colorScheme.primary ?? Colors.black;

  backgroundColor ??= appTheme?.scaffoldBackgroundColor ?? Colors.white;
  padding ??= const EdgeInsets.all(20.0);
  backButtonColor ??= primaryColor;

  titleTextStyle ??= appTheme?.textTheme.headlineSmall ??
      TextStyle(
        fontSize: 16,
        fontWeight: FontWeight.w600,
        color: primaryColor,
        letterSpacing: 0.5,
      );

  inputTextStyle ??= appTheme?.textTheme.titleLarge ??
      const TextStyle(
        fontSize: 15,
        fontWeight: FontWeight.w500,
      );

  inputDecorationTheme ??= appTheme?.inputDecorationTheme as InputDecorationTheme? ??
      InputDecorationTheme(
        isDense: true,
        contentPadding: const EdgeInsets.symmetric(
          vertical: 15.0,
          horizontal: 12.0,
        ),
        hintStyle: TextStyle(
          fontSize: 15,
          fontWeight: FontWeight.w500,
          color: primaryColor.withAlpha(255 ~/ 3),
        ),
        enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(
            color: accentColor.withAlpha(255 ~/ 8),
          ),
          borderRadius: const BorderRadius.all(
            Radius.circular(4),
          ),
        ),
        focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(
            color: accentColor,
          ),
          borderRadius: const BorderRadius.all(
            Radius.circular(4),
          ),
        ),
        border: const OutlineInputBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(4),
          ),
        ),
        suffixIconConstraints: const BoxConstraints(
          maxHeight: 32,
          maxWidth: 32 + 10 + 15,
        ),
      );

  inputTextAlignVertical ??= TextAlignVertical.center;

  inputErrorTextStyle ??= appTheme?.inputDecorationTheme.errorStyle ??
      TextStyle(
        fontSize: 13,
        color: Colors.red.shade500,
      );

  codeInputThemeDefault ??= PinTheme(
    width: 54.0,
    height: 64.0,
    textStyle: const TextStyle(
      fontSize: 30.0,
      fontWeight: FontWeight.w600,
    ),
    decoration: BoxDecoration(
      border: Border.all(
        width: 1.2,
        color: primaryColor,
      ),
      borderRadius: BorderRadius.circular(4.0),
    ),
  );

  codeInputThemeFocused ??= codeInputThemeDefault.copyDecorationWith(
    border: Border.all(
      width: 1.2,
      color: primaryColor,
    ),
  );

  codeInputThemeFollowing ??= codeInputThemeDefault.copyDecorationWith(
    border: Border.all(
      width: 1.0,
      color: primaryColor.withAlpha(255 ~/ 8),
    ),
  );

  continueButtonStyle ??= appTheme?.filledButtonTheme.style ??
      ButtonStyle(
        splashFactory: NoSplash.splashFactory,
        elevation: WidgetStateProperty.all(0),
        backgroundColor: WidgetStateProperty.resolveWith((states) {
          return states.contains(WidgetState.disabled)
              ? Colors.grey.shade100
              : Colors.white;
        }),
        foregroundColor: WidgetStateProperty.resolveWith((states) {
          return states.contains(WidgetState.disabled)
              ? primaryColor.withAlpha(255 ~/ 4)
              : primaryColor;
        }),
        minimumSize: WidgetStateProperty.all(const Size.fromHeight(50)),
        mouseCursor: WidgetStateProperty.all(SystemMouseCursors.click),
        textStyle: WidgetStateProperty.all(
          const TextStyle(
            fontSize: 15,
            fontWeight: FontWeight.w500,
          ),
        ),
        overlayColor: WidgetStateProperty.resolveWith<Color?>(
          (Set<WidgetState> states) {
            return states.contains(WidgetState.hovered)
                ? Colors.grey.shade50
                : null;
          },
        ),
        shape: WidgetStateProperty.resolveWith<OutlinedBorder>(
          (Set<WidgetState> states) {
            return RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(4),
              side: BorderSide(
                color: states.contains(WidgetState.hovered)
                    ? Colors.grey.shade600
                    : const Color(0xffdadce0),
                width: 1.0,
              ),
            );
          },
        ),
      );

  final focusedState = <WidgetState>{WidgetState.focused};
  final textStyle = continueButtonStyle.textStyle?.resolve(focusedState);
  final fontSize = textStyle?.fontSize ?? 17;
  continueButtonProgressIndicatorSize ??= Size(fontSize, fontSize);

  final textColor =
      continueButtonStyle.foregroundColor?.resolve(focusedState);
  continueButtonProgressIndicatorColor ??= textColor ?? Colors.black;

  continueButtonProgressIndicatorStrokeWidth ??= 1.5;

  countryItemPadding ??= const EdgeInsets.symmetric(
    horizontal: 12.0,
    vertical: 8.0,
  );

  countryItemHighlightColor ??= primaryColor.withAlpha(255 ~/ 16);

  countryTextStyle ??= const TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.w600,
  );

  return FluoSignInStyle(
    backgroundColor: backgroundColor,
    padding: padding,
    backButtonColor: backButtonColor,
    titleTextStyle: titleTextStyle,
    inputTextStyle: inputTextStyle,
    inputDecorationTheme: inputDecorationTheme,
    inputTextAlignVertical: inputTextAlignVertical,
    inputErrorTextStyle: inputErrorTextStyle,
    codeInputThemeDefault: codeInputThemeDefault,
    codeInputThemeFocused: codeInputThemeFocused,
    codeInputThemeSubmitted: codeInputThemeSubmitted,
    codeInputThemeFollowing: codeInputThemeFollowing,
    codeInputThemeDisabled: codeInputThemeDisabled,
    codeInputThemeError: codeInputThemeError,
    continueButtonStyle: continueButtonStyle,
    continueButtonProgressIndicatorSize: continueButtonProgressIndicatorSize,
    continueButtonProgressIndicatorColor: continueButtonProgressIndicatorColor,
    continueButtonProgressIndicatorStrokeWidth:
        continueButtonProgressIndicatorStrokeWidth,
    countryItemPadding: countryItemPadding,
    countryItemHighlightColor: countryItemHighlightColor,
    countryTextStyle: countryTextStyle,
  );
}