FluoTheme.web constructor

Implementation

factory FluoTheme.web({
  ThemeData? appTheme,
  Color? primaryColor,
  Color? inversePrimaryColor,
  Color? accentColor,
  EdgeInsets? screenPadding,
  ButtonStyle? connectButtonStyle,
  ButtonStyle? connectButtonStyleGoogle,
  ButtonStyle? connectButtonStyleApple,
  TextStyle? connectButtonTextStyle,
  TextStyle? connectButtonTextStyleGoogle,
  TextStyle? connectButtonTextStyleApple,
  double? connectButtonIconSize,
  Widget? connectButtonIconEmail,
  Widget? connectButtonIconMobile,
  Widget? connectButtonIconGoogle,
  Widget? connectButtonIconApple,
  TextStyle? legalTextStyle,
  EdgeInsets? legalTextPadding,
  TextStyle? modalTitleTextStyle,
  TextStyle? titleStyle,
  InputDecorationThemeData? inputDecorationTheme,
  TextStyle? inputTextStyle,
  TextStyle? inputErrorStyle,
  TextAlignVertical? inputTextAlignVertical,
  ButtonStyle? continueButtonStyle,
  Size? continueButtonProgressIndicatorSize,
  Color? continueButtonProgressIndicatorColor,
  double? continueButtonProgressIndicatorStrokeWidth,
  EdgeInsets? countryItemPadding,
  Color? countryItemHighlightColor,
  TextStyle? countryTextStyle,
  PinTheme? codeInputThemeDefault,
  PinTheme? codeInputThemeFocused,
  PinTheme? codeInputThemeSubmitted,
  PinTheme? codeInputThemeFollowing,
  PinTheme? codeInputThemeDisabled,
  PinTheme? codeInputThemeError,
}) {
  primaryColor ??= appTheme?.colorScheme.primary ?? Colors.black;

  inversePrimaryColor ??=
      appTheme?.colorScheme.inversePrimary ?? Colors.white;

  accentColor ??= appTheme?.colorScheme.primary ?? Colors.black;

  screenPadding ??= const EdgeInsets.all(20.0);

  connectButtonStyle ??= appTheme?.filledButtonTheme.style ??
      ButtonStyle(
        splashFactory: NoSplash.splashFactory,
        backgroundColor: WidgetStateProperty.all(Colors.white),
        foregroundColor: WidgetStateProperty.all(Colors.black),
        fixedSize: WidgetStateProperty.all(const Size(360, 40)),
        mouseCursor: WidgetStateProperty.all(SystemMouseCursors.click),
        elevation: WidgetStateProperty.all(0),
        overlayColor: WidgetStateProperty.resolveWith<Color?>(
          (Set<WidgetState> states) {
            if (states.contains(WidgetState.hovered)) {
              return Colors.grey.shade50;
            }
            return 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,
              ),
            );
          },
        ),
      );

  connectButtonStyleGoogle ??= connectButtonStyle;

  connectButtonStyleApple ??= connectButtonStyle;

  connectButtonTextStyle ??= TextStyle(
    fontSize: 14,
    color: Colors.grey.shade800,
    fontWeight: FontWeight.w600,
    letterSpacing: 1.0,
  );

  connectButtonTextStyleGoogle ??= connectButtonTextStyle;

  connectButtonTextStyleApple ??= connectButtonTextStyle;

  connectButtonIconSize ??= 18.0;

  connectButtonIconEmail ??= Icon(
    Icons.mail_outline_rounded,
    color: connectButtonTextStyle.color,
    size: connectButtonIconSize,
  );

  connectButtonIconMobile ??= Icon(
    Icons.phone_android_rounded,
    color: connectButtonTextStyle.color,
    size: connectButtonIconSize,
  );

  connectButtonIconGoogle ??= Image.asset(
    'packages/fluo/assets/images/google.png',
    width: connectButtonIconSize,
  );

  connectButtonIconApple ??= Image.asset(
    'packages/fluo/assets/images/apple.png',
    color: connectButtonTextStyleApple.color,
    width: connectButtonIconSize,
  );

  legalTextStyle ??= appTheme?.textTheme.bodySmall ??
      TextStyle(
        fontSize: 13,
        color: primaryColor.withAlpha((255 * 0.6).toInt()),
      );

  legalTextPadding ??= const EdgeInsets.only(
    top: 30.0,
    right: 30.0,
    left: 30.0,
  );

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

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

  inputDecorationTheme ??= appTheme?.inputDecorationTheme ??
      InputDecorationThemeData(
        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,
        ),
      );

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

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

  inputTextAlignVertical ??= TextAlignVertical.center;

  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,
  );

  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),
    ),
  );

  return FluoTheme._(
    primaryColor,
    inversePrimaryColor,
    accentColor,
    screenPadding,
    connectButtonStyle,
    connectButtonStyleGoogle,
    connectButtonStyleApple,
    connectButtonTextStyle,
    connectButtonTextStyleGoogle,
    connectButtonTextStyleApple,
    connectButtonIconSize,
    connectButtonIconEmail,
    connectButtonIconMobile,
    connectButtonIconGoogle,
    connectButtonIconApple,
    legalTextStyle,
    legalTextPadding,
    modalTitleTextStyle,
    titleStyle,
    inputDecorationTheme,
    inputTextStyle,
    inputErrorStyle,
    inputTextAlignVertical,
    continueButtonStyle,
    continueButtonProgressIndicatorSize,
    continueButtonProgressIndicatorColor,
    continueButtonProgressIndicatorStrokeWidth,
    countryItemPadding,
    countryItemHighlightColor,
    countryTextStyle,
    codeInputThemeDefault,
    codeInputThemeFocused,
    codeInputThemeSubmitted,
    codeInputThemeFollowing,
    codeInputThemeDisabled,
    codeInputThemeError,
  );
}