fix(ui_auth): make maxWidth configurable on all screens (#178)

Author: lesnitsky

packages/firebase_ui_auth/lib/src/screens/email_link_sign_in_screen.dart

@@ -43,6 +43,9 @@ class EmailLinkSignInScreen extends ProviderScreen<EmailLinkAuthProvider> {
   /// {@macro ui.auth.screens.responsive_page.breakpoint}
   final double breakpoint;
 
+  /// {@macro ui.auth.screens.responsive_page.max_width}
+  final double? maxWidth;
+
   const EmailLinkSignInScreen({
     super.key,
     super.auth,
@@ -53,6 +56,7 @@ class EmailLinkSignInScreen extends ProviderScreen<EmailLinkAuthProvider> {
     this.sideBuilder,
     this.desktopLayoutDirection,
     this.breakpoint = 500,
+    this.maxWidth = 1200,
   });
 
   @override
@@ -62,7 +66,7 @@ class EmailLinkSignInScreen extends ProviderScreen<EmailLinkAuthProvider> {
         breakpoint: breakpoint,
         headerBuilder: headerBuilder,
         headerMaxExtent: headerMaxExtent,
-        maxWidth: 1200,
+        maxWidth: maxWidth,
         sideBuilder: sideBuilder,
         desktopLayoutDirection: desktopLayoutDirection,
         child: Padding(

packages/firebase_ui_auth/lib/src/screens/email_verification_screen.dart

@@ -65,6 +65,9 @@ class EmailVerificationScreen extends StatelessWidget {
   /// A configuration object used to construct a dynamic link.
   final fba.ActionCodeSettings? actionCodeSettings;
 
+  /// {@macro ui.auth.screens.responsive_page.max_width}
+  final double? maxWidth;
+
   /// {@macro ui.auth.screens.email_verification_screen}
   const EmailVerificationScreen({
     super.key,
@@ -76,6 +79,7 @@ class EmailVerificationScreen extends StatelessWidget {
     this.desktopLayoutDirection,
     this.breakpoint = 500,
     this.actionCodeSettings,
+    this.maxWidth = 1200,
   });
 
   @override
@@ -89,7 +93,7 @@ class EmailVerificationScreen extends StatelessWidget {
           headerBuilder: headerBuilder,
           headerMaxExtent: headerMaxExtent,
           sideBuilder: sideBuilder,
-          maxWidth: 1200,
+          maxWidth: maxWidth,
           contentFlex: 2,
           child: Padding(
             padding: const EdgeInsets.all(32),

packages/firebase_ui_auth/lib/src/screens/forgot_password_screen.dart

@@ -41,6 +41,9 @@ class ForgotPasswordScreen extends StatelessWidget {
   /// {@macro ui.auth.screens.responsive_page.breakpoint}
   final double breakpoint;
 
+  /// {@macro ui.auth.screens.responsive_page.max_width}
+  final double? maxWidth;
+
   const ForgotPasswordScreen({
     super.key,
     this.auth,
@@ -53,6 +56,7 @@ class ForgotPasswordScreen extends StatelessWidget {
     this.desktopLayoutDirection,
     this.resizeToAvoidBottomInset,
     this.breakpoint = 600,
+    this.maxWidth = 1200,
   });
 
   @override
@@ -72,7 +76,7 @@ class ForgotPasswordScreen extends StatelessWidget {
         headerMaxExtent: headerMaxExtent,
         sideBuilder: sideBuilder,
         breakpoint: breakpoint,
-        maxWidth: 1200,
+        maxWidth: maxWidth,
         contentFlex: 1,
         child: Padding(
           padding: const EdgeInsets.all(32),

packages/firebase_ui_auth/lib/src/screens/internal/login_screen.dart

@@ -54,6 +54,9 @@ class LoginScreen extends StatelessWidget {
   /// {@macro ui.auth.widgets.email_form.showPasswordVisibilityToggle}
   final bool showPasswordVisibilityToggle;
 
+  /// {@macro ui.auth.screens.responsive_page.max_width}
+  final double? maxWidth;
+
   const LoginScreen({
     super.key,
     required this.action,
@@ -73,6 +76,7 @@ class LoginScreen extends StatelessWidget {
     this.breakpoint = 800,
     this.styles,
     this.showPasswordVisibilityToggle = false,
+    this.maxWidth,
   });
 
   @override
@@ -102,6 +106,7 @@ class LoginScreen extends StatelessWidget {
       headerBuilder: headerBuilder,
       headerMaxExtent: headerMaxExtent,
       sideBuilder: sideBuilder,
+      maxWidth: maxWidth,
       child: loginContent,
     );
 

packages/firebase_ui_auth/lib/src/screens/phone_input_screen.dart

@@ -69,6 +69,9 @@ class PhoneInputScreen extends StatelessWidget {
   /// {@macro ui.auth.providers.phone_auth_provider.mfa_hint}
   final fba.PhoneMultiFactorInfo? mfaHint;
 
+  /// {@macro ui.auth.screens.responsive_page.max_width}
+  final double? maxWidth;
+
   const PhoneInputScreen({
     super.key,
     this.action,
@@ -83,6 +86,7 @@ class PhoneInputScreen extends StatelessWidget {
     this.breakpoint = 500,
     this.multiFactorSession,
     this.mfaHint,
+    this.maxWidth,
   });
 
   void _next(BuildContext context, AuthAction? action, Object flowKey, _) {
@@ -114,6 +118,7 @@ class PhoneInputScreen extends StatelessWidget {
           headerBuilder: headerBuilder,
           headerMaxExtent: headerMaxExtent,
           breakpoint: breakpoint,
+          maxWidth: maxWidth,
           child: Padding(
             padding: const EdgeInsets.all(20),
             child: Column(

packages/firebase_ui_auth/lib/src/screens/register_screen.dart

@@ -87,6 +87,9 @@ class RegisterScreen extends MultiProviderScreen {
   /// * [EmailFormStyle]
   final Set<FirebaseUIStyle>? styles;
 
+  /// {@macro ui.auth.screens.responsive_page.max_width}
+  final double? maxWidth;
+
   const RegisterScreen({
     super.key,
     super.auth,
@@ -104,6 +107,7 @@ class RegisterScreen extends MultiProviderScreen {
     this.footerBuilder,
     this.breakpoint = 800,
     this.styles,
+    this.maxWidth,
   });
 
   @override
@@ -126,6 +130,7 @@ class RegisterScreen extends MultiProviderScreen {
         subtitleBuilder: subtitleBuilder,
         footerBuilder: footerBuilder,
         breakpoint: breakpoint,
+        maxWidth: maxWidth,
       ),
     );
   }

packages/firebase_ui_auth/lib/src/screens/sign_in_screen.dart

@@ -98,6 +98,9 @@ class SignInScreen extends MultiProviderScreen {
   /// {@macro ui.auth.widgets.email_form.showPasswordVisibilityToggle}
   final bool showPasswordVisibilityToggle;
 
+  /// {@macro ui.auth.screens.responsive_page.max_width}
+  final double? maxWidth;
+
   /// {@macro ui.auth.screens.sign_in_screen}
   const SignInScreen({
     super.key,
@@ -118,6 +121,7 @@ class SignInScreen extends MultiProviderScreen {
     this.breakpoint = 800,
     this.styles,
     this.showPasswordVisibilityToggle = false,
+    this.maxWidth,
   });
 
   Future<void> _signInWithDifferentProvider(
@@ -170,6 +174,7 @@ class SignInScreen extends MultiProviderScreen {
         footerBuilder: footerBuilder,
         breakpoint: breakpoint,
         showPasswordVisibilityToggle: showPasswordVisibilityToggle,
+        maxWidth: maxWidth,
       ),
     );
   }