chore(dogfooding) improve desktop layout

dogfooding/lib/screens/call_screen.dart

@@ -242,6 +242,7 @@ class _CallScreenState extends State<CallScreen> {
                   padding: const EdgeInsets.only(
                     top: 16,
                     left: 8,
+                    bottom: 8,
                   ),
                   color: Colors.black,
                   child: SafeArea(

dogfooding/lib/screens/home_screen.dart

@@ -1,5 +1,6 @@
 // 🎯 Dart imports:
 import 'dart:async';
+import 'dart:math' as math;
 
 // 🐦 Flutter imports:
 import 'package:flutter/material.dart';
@@ -192,6 +193,7 @@ class _HomeScreenState extends State<HomeScreen> {
 
     final theme = Theme.of(context);
     final size = MediaQuery.sizeOf(context);
+    final width = math.min(size.width, kMaxWidthRegularScreen);
     final name = currentUser!.name;
 
     return Scaffold(
@@ -227,54 +229,58 @@ class _HomeScreenState extends State<HomeScreen> {
         ],
       ),
       body: Center(
-        child: SingleChildScrollView(
-          padding: const EdgeInsets.all(14),
-          child: Column(
-            children: [
-              Hero(
-                tag: 'stream_logo',
-                child: Image.asset(
-                  streamVideoIconAsset,
-                  width: size.width * 0.6,
+        child: ConstrainedBox(
+          constraints: const BoxConstraints(maxWidth: kMaxWidthRegularScreen),
+          child: SingleChildScrollView(
+            padding: const EdgeInsets.all(14),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Hero(
+                  tag: 'stream_logo',
+                  child: Image.asset(
+                    streamVideoIconAsset,
+                    width: width * 0.6,
+                  ),
                 ),
-              ),
-              const SizedBox(height: 24),
-              Text('Stream', style: theme.textTheme.headlineMedium),
-              Text(
-                '[Video Calling]',
-                style: theme.textTheme.headlineMedium?.apply(
-                  color: AppColorPalette.appGreen,
+                const SizedBox(height: 24),
+                Text('Stream', style: theme.textTheme.headlineMedium),
+                Text(
+                  '[Video Calling]',
+                  style: theme.textTheme.headlineMedium?.apply(
+                    color: AppColorPalette.appGreen,
+                  ),
                 ),
-              ),
-              const SizedBox(height: 48),
-              Text(
-                'Start a new call, join a meeting by\n'
-                'entering the call ID or by scanning\n'
-                'a QR code.',
-                textAlign: TextAlign.center,
-                style: theme.textTheme.bodyMedium?.apply(
-                  color: AppColorPalette.secondaryText,
+                const SizedBox(height: 48),
+                Text(
+                  'Start a new call, join a meeting by\n'
+                  'entering the call ID or by scanning\n'
+                  'a QR code.',
+                  textAlign: TextAlign.center,
+                  style: theme.textTheme.bodyMedium?.apply(
+                    color: AppColorPalette.secondaryText,
+                  ),
                 ),
-              ),
-              const SizedBox(height: 36),
-              const SizedBox(height: 8),
-              _JoinForm(
-                callIdController: _callIdController,
-                onJoinPressed: _getOrCreateCall,
-              ),
-              const SizedBox(height: 24),
-              StreamButton.primary(
-                label: 'Start New Call',
-                icon: const Icon(Icons.video_call, color: Colors.white),
-                onPressed: _getOrCreateCall,
-              ),
-              const SizedBox(height: 8),
-              StreamButton.tertiary(
-                label: 'Direct Call',
-                icon: const Icon(Icons.person, color: Colors.white),
-                onPressed: () => _directCall(context),
-              ),
-            ],
+                const SizedBox(height: 36),
+                const SizedBox(height: 8),
+                _JoinForm(
+                  callIdController: _callIdController,
+                  onJoinPressed: _getOrCreateCall,
+                ),
+                const SizedBox(height: 24),
+                StreamButton.primary(
+                  label: 'Start New Call',
+                  icon: const Icon(Icons.video_call, color: Colors.white),
+                  onPressed: _getOrCreateCall,
+                ),
+                const SizedBox(height: 8),
+                StreamButton.tertiary(
+                  label: 'Direct Call',
+                  icon: const Icon(Icons.person, color: Colors.white),
+                  onPressed: () => _directCall(context),
+                ),
+              ],
+            ),
           ),
         ),
       ),

dogfooding/lib/screens/login_screen.dart

@@ -20,6 +20,7 @@ import 'package:package_info_plus/package_info_plus.dart';
 // 🌎 Project imports:
 import '../di/injector.dart';
 import '../utils/assets.dart';
+import '../utils/consts.dart';
 import '../utils/loading_dialog.dart';
 import '../widgets/environment_switcher.dart';
 
@@ -107,6 +108,7 @@ class _LoginScreenState extends State<LoginScreen> {
   @override
   Widget build(BuildContext context) {
     final size = MediaQuery.sizeOf(context);
+    final width = math.min(size.width, kMaxWidthRegularScreen);
     final theme = Theme.of(context);
 
     return Scaffold(
@@ -121,106 +123,110 @@ class _LoginScreenState extends State<LoginScreen> {
       ),
       body: SafeArea(
         child: Center(
-          child: SingleChildScrollView(
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                Hero(
-                  tag: 'stream_logo',
-                  child: Image.asset(
-                    streamVideoIconAsset,
-                    width: size.width * 0.8,
+          child: ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: kMaxWidthRegularScreen),
+            child: SingleChildScrollView(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Hero(
+                    tag: 'stream_logo',
+                    child: Image.asset(
+                      streamVideoIconAsset,
+                      width: width * 0.8,
+                    ),
                   ),
-                ),
-                const SizedBox(height: 36),
-                Text('Stream', style: theme.textTheme.headlineMedium),
-                Text(
-                  '[Video Calling]',
-                  style: theme.textTheme.headlineMedium?.apply(
-                    color: AppColorPalette.appGreen,
+                  const SizedBox(height: 36),
+                  Text('Stream', style: theme.textTheme.headlineMedium),
+                  Text(
+                    '[Video Calling]',
+                    style: theme.textTheme.headlineMedium?.apply(
+                      color: AppColorPalette.appGreen,
+                    ),
                   ),
-                ),
-                const SizedBox(height: 48),
-                Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 16),
-                  child: TextField(
-                    controller: _emailController,
-                    style:
-                        theme.textTheme.bodyMedium?.apply(color: Colors.white),
-                    decoration: const InputDecoration(
-                      labelText: 'Enter Email',
-                      isDense: true,
-                      border: OutlineInputBorder(),
+                  const SizedBox(height: 48),
+                  Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 16),
+                    child: TextField(
+                      controller: _emailController,
+                      style: theme.textTheme.bodyMedium
+                          ?.apply(color: Colors.white),
+                      decoration: const InputDecoration(
+                        labelText: 'Enter Email',
+                        isDense: true,
+                        border: OutlineInputBorder(),
+                      ),
                     ),
                   ),
-                ),
-                const SizedBox(height: 16),
-                Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 16),
-                  child: StreamButton.active(
-                    label: 'Sign up with email',
-                    icon: const Icon(
-                      Icons.email_outlined,
-                      color: Colors.white,
+                  const SizedBox(height: 16),
+                  Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 16),
+                    child: StreamButton.active(
+                      label: 'Sign up with email',
+                      icon: const Icon(
+                        Icons.email_outlined,
+                        color: Colors.white,
+                      ),
+                      onPressed: _loginWithEmail,
                     ),
-                    onPressed: _loginWithEmail,
                   ),
-                ),
-                const SizedBox(height: 16),
-                Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 24),
-                  child: Row(
-                    children: [
-                      Expanded(
-                        child: Container(
-                          height: 1,
-                          color: Colors.grey,
+                  const SizedBox(height: 16),
+                  Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 24),
+                    child: Row(
+                      children: [
+                        Expanded(
+                          child: Container(
+                            height: 1,
+                            color: Colors.grey,
+                          ),
                         ),
-                      ),
-                      const Padding(
-                        padding: EdgeInsets.symmetric(horizontal: 8),
-                        child: Text('OR'),
-                      ),
-                      Expanded(
-                        child: Container(
-                          height: 1,
-                          color: Colors.grey,
+                        const Padding(
+                          padding: EdgeInsets.symmetric(horizontal: 8),
+                          child: Text('OR'),
                         ),
-                      ),
-                    ],
+                        Expanded(
+                          child: Container(
+                            height: 1,
+                            color: Colors.grey,
+                          ),
+                        ),
+                      ],
+                    ),
                   ),
-                ),
-                const SizedBox(height: 16),
-                Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 16),
-                  child: GoogleLoginButton(
-                    onPressed: _loginWithGoogle,
+                  const SizedBox(height: 16),
+                  Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 16),
+                    child: GoogleLoginButton(
+                      onPressed: _loginWithGoogle,
+                    ),
                   ),
-                ),
-                const SizedBox(height: 16),
-                Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 16),
-                  child: StreamButton.tertiary(
-                    onPressed: _loginAsGuest,
-                    label: 'Join As Guest',
+                  const SizedBox(height: 16),
+                  Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 16),
+                    child: StreamButton.tertiary(
+                      onPressed: _loginAsGuest,
+                      label: 'Join As Guest',
+                    ),
                   ),
-                ),
-                FutureBuilder<PackageInfo>(
-                  future: PackageInfo.fromPlatform(),
-                  builder: (context, snapshot) {
-                    if (!snapshot.hasData) return const SizedBox.shrink();
-                    final platformInfo = snapshot.data;
+                  FutureBuilder<PackageInfo>(
+                    future: PackageInfo.fromPlatform(),
+                    builder: (context, snapshot) {
+                      if (!snapshot.hasData) return const SizedBox.shrink();
+                      final platformInfo = snapshot.data;
 
-                    return Padding(
-                      padding: const EdgeInsets.all(16),
-                      child: Text(
-                        'Version ${platformInfo?.version}+${platformInfo?.buildNumber}',
-                        style: theme.textTheme.labelSmall,
-                      ),
-                    );
-                  },
-                ),
-              ],
+                      return Padding(
+                        padding: const EdgeInsets.all(16),
+                        child: Text(
+                          'Version ${platformInfo?.version}+${platformInfo?.buildNumber}',
+                          style: theme.textTheme.labelSmall,
+                        ),
+                      );
+                    },
+                  ),
+                ],
+              ),
             ),
           ),
         ),

dogfooding/lib/utils/consts.dart

@@ -3,3 +3,4 @@ import 'package:stream_video_flutter/stream_video_flutter.dart';
 final StreamCallType kCallType = StreamCallType.defaultType();
 const String kMessageChannelType = 'videocall';
 const String kAppName = 'Stream Dogfooding';
+const double kMaxWidthRegularScreen = 500;

packages/stream_video_flutter/CHANGELOG.md

@@ -1,3 +1,8 @@
+## Upcoming
+
+🐞 Fixed
+* Center alignment of buttons in `StreamLobbyVideo` to support more screen sizes.
+
 ## 0.7.2
 
 🐞 Fixed