fix: spacing.

lib/app.dart

@@ -1,19 +0,0 @@
-import 'package:appwrite_flutter_starter_kit/home.dart';
-import 'package:flutter/material.dart';
-
-class AppwriteApp extends StatelessWidget {
-  const AppwriteApp({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return MaterialApp(
-      title: 'Appwrite StarterKit',
-      debugShowCheckedModeBanner: false,
-      theme: ThemeData(
-        useMaterial3: true,
-        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
-      ),
-      home: const AppwriteStarterKit(),
-    );
-  }
-}

lib/home.dart

@@ -1,75 +0,0 @@
-import 'package:appwrite_flutter_starter_kit/data/models/log.dart';
-import 'package:appwrite_flutter_starter_kit/data/models/status.dart';
-import 'package:appwrite_flutter_starter_kit/data/repository/appwrite_repository.dart';
-import 'package:appwrite_flutter_starter_kit/ui/components/checkered_background.dart';
-import 'package:appwrite_flutter_starter_kit/ui/components/collapsible_bottomsheet.dart';
-import 'package:appwrite_flutter_starter_kit/ui/components/connection_status_view.dart';
-import 'package:appwrite_flutter_starter_kit/ui/components/getting_started_cards.dart';
-import 'package:appwrite_flutter_starter_kit/ui/components/top_platform_view.dart';
-import 'package:appwrite_flutter_starter_kit/utils/extensions/build_context.dart';
-import 'package:flutter/material.dart';
-
-class AppwriteStarterKit extends StatefulWidget {
-  const AppwriteStarterKit({super.key});
-
-  @override
-  State<AppwriteStarterKit> createState() => _AppwriteStarterKit();
-}
-
-class _AppwriteStarterKit extends State<AppwriteStarterKit> {
-  final List<Log> _logs = [];
-  Status _status = Status.idle;
-  final AppwriteRepository _repository = AppwriteRepository();
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      body: CheckeredBackground(
-        child: SafeArea(
-          minimum: EdgeInsets.only(top: context.isLargeScreen ? 24 : 16),
-          child: Stack(
-            children: [
-              SingleChildScrollView(
-                child: Column(
-                  spacing: 16,
-                  children: [
-                    TopPlatformView(status: _status),
-                    ConnectionStatusView(
-                      status: _status,
-                      onButtonClick: () async {
-                        setState(() => _status = Status.loading);
-                        final log = await _repository.ping();
-                        _logs.add(log);
-
-                        await Future.delayed(
-                          const Duration(milliseconds: 1250),
-                        );
-
-                        setState(
-                          () => _status =
-                              (200 <= log.status && log.status <= 399)
-                                  ? Status.success
-                                  : Status.error,
-                        );
-                      },
-                    ),
-                    GettingStartedCards()
-                  ],
-                ),
-              ),
-
-              // bottomsheet
-              Align(
-                alignment: Alignment.bottomCenter,
-                child: CollapsibleBottomSheet(
-                  logs: _logs,
-                  projectInfo: _repository.getProjectInfo(),
-                ),
-              ),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-}

lib/main.dart

@@ -1,8 +1,98 @@
-import 'package:appwrite_flutter_starter_kit/app.dart';
+import 'package:appwrite_flutter_starter_kit/data/models/log.dart';
+import 'package:appwrite_flutter_starter_kit/data/models/status.dart';
+import 'package:appwrite_flutter_starter_kit/data/repository/appwrite_repository.dart';
+import 'package:appwrite_flutter_starter_kit/ui/components/checkered_background.dart';
+import 'package:appwrite_flutter_starter_kit/ui/components/collapsible_bottomsheet.dart';
+import 'package:appwrite_flutter_starter_kit/ui/components/connection_status_view.dart';
+import 'package:appwrite_flutter_starter_kit/ui/components/getting_started_cards.dart';
+import 'package:appwrite_flutter_starter_kit/ui/components/top_platform_view.dart';
 import 'package:appwrite_flutter_starter_kit/utils/app_initializer.dart';
+import 'package:appwrite_flutter_starter_kit/utils/extensions/build_context.dart';
 import 'package:flutter/material.dart';
 
 void main() async {
   await AppInitializer.initialize();
   runApp(AppwriteApp());
 }
+
+class AppwriteApp extends StatelessWidget {
+  const AppwriteApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Appwrite StarterKit',
+      debugShowCheckedModeBanner: false,
+      theme: ThemeData(
+        useMaterial3: true,
+        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
+      ),
+      home: const AppwriteStarterKit(),
+    );
+  }
+}
+
+class AppwriteStarterKit extends StatefulWidget {
+  const AppwriteStarterKit({super.key});
+
+  @override
+  State<AppwriteStarterKit> createState() => _AppwriteStarterKit();
+}
+
+class _AppwriteStarterKit extends State<AppwriteStarterKit> {
+  final List<Log> _logs = [];
+  Status _status = Status.idle;
+  final AppwriteRepository _repository = AppwriteRepository();
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: CheckeredBackground(
+        child: SafeArea(
+          minimum: EdgeInsets.only(top: context.isLargeScreen ? 24 : 16),
+          child: Stack(
+            children: [
+              SingleChildScrollView(
+                child: Column(
+                  spacing: context.isLargeScreen ? 64 : 32,
+                  children: [
+                    TopPlatformView(status: _status),
+                    ConnectionStatusView(
+                      status: _status,
+                      onButtonClick: () async {
+                        setState(() => _status = Status.loading);
+                        final log = await _repository.ping();
+                        _logs.add(log);
+
+                        await Future.delayed(
+                          const Duration(milliseconds: 1250),
+                        );
+
+                        setState(
+                          () => _status =
+                              (200 <= log.status && log.status <= 399)
+                                  ? Status.success
+                                  : Status.error,
+                        );
+                      },
+                    ),
+                    GettingStartedCards()
+                  ],
+                ),
+              ),
+
+              // bottomsheet
+              Align(
+                alignment: Alignment.bottomCenter,
+                child: CollapsibleBottomSheet(
+                  logs: _logs,
+                  projectInfo: _repository.getProjectInfo(),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/ui/components/collapsible_bottomsheet.dart

@@ -491,7 +491,7 @@ class LogsTableRow extends StatelessWidget {
           child: MouseRegion(
             cursor: SystemMouseCursors.click,
             child: Text(
-              response.substring(0, 50),
+              response.length > 50 ? response.substring(0, 50) : response,
               maxLines: 1,
               overflow: TextOverflow.ellipsis,
               style: const TextStyle(

lib/ui/components/connection_line.dart

@@ -15,7 +15,7 @@ class ConnectionLine extends StatelessWidget {
     return SizedBox(
       width: context.widthFactor(
         mobileFactor: 0.25,
-        largeScreenFactor: 0.15,
+        largeScreenFactor: 0.125,
       ),
       child: Flex(
         direction: Axis.horizontal,

lib/ui/components/getting_started_cards.dart

@@ -2,6 +2,30 @@ import 'package:appwrite_flutter_starter_kit/utils/extensions/build_context.dart
 import 'package:flutter/material.dart';
 import 'package:url_launcher/url_launcher.dart';
 
+const cardWidgets = [
+  GeneralInfoCard(
+    title: "Edit your app",
+    link: null,
+    subtitle: HighlightedText(),
+  ),
+  GeneralInfoCard(
+    title: "Head to Appwrite Cloud",
+    link: "https://cloud.appwrite.io",
+    subtitle: Text(
+      "Start managing your project from the Appwrite console",
+      style: TextStyle(fontSize: 14, color: Color(0xFF56565C)),
+    ),
+  ),
+  GeneralInfoCard(
+    title: "Explore docs",
+    link: "https://appwrite.io/docs",
+    subtitle: Text(
+      "Discover the full power of Appwrite by diving into our documentation",
+      style: TextStyle(fontSize: 14, color: Color(0xFF56565C)),
+    ),
+  ),
+];
+
 /// A widget that contains a list of informational cards displayed vertically.
 class GettingStartedCards extends StatelessWidget {
   const GettingStartedCards({super.key});
@@ -9,38 +33,27 @@ class GettingStartedCards extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
-      child: Column(
+      padding: const EdgeInsets.all(16.0),
+      child: context.isLargeScreen
+          ? Wrap(
+              spacing: 16,
+              runSpacing: 16,
+              alignment: WrapAlignment.center,
+              children: cardWidgets
+                  .map((card) => SizedBox(
+                        width: 350,
+                        child: card,
+                      ))
+                  .toList(),
+            )
+          : Column(
               mainAxisSize: MainAxisSize.min,
-        children: [
-          GeneralInfoCard(
-            title: "Edit your app",
-            link: null,
-            subtitle: const HighlightedText(),
-          ),
-          GeneralInfoCard(
-            title: "Head to Appwrite Cloud",
-            link: "https://cloud.appwrite.io",
-            subtitle: const Text(
-              "Start managing your project from the Appwrite console",
-              style: TextStyle(
-                fontSize: 14,
-                color: Color(0xFF56565C),
-              ),
-            ),
-          ),
-          GeneralInfoCard(
-            title: "Explore docs",
-            link: "https://appwrite.io/docs",
-            subtitle: const Text(
-              "Discover the full power of Appwrite by diving into our documentation",
-              style: TextStyle(
-                fontSize: 14,
-                color: Color(0xFF56565C),
-              ),
-            ),
-          ),
-        ],
+              children: cardWidgets
+                  .map((card) => Padding(
+                        padding: const EdgeInsets.only(bottom: 16),
+                        child: card,
+                      ))
+                  .toList(),
             ),
     );
   }

lib/ui/components/top_platform_view.dart

@@ -1,5 +1,6 @@
 import 'package:appwrite_flutter_starter_kit/data/models/status.dart';
 import 'package:appwrite_flutter_starter_kit/ui/icons/appwrite.dart';
+import 'package:appwrite_flutter_starter_kit/utils/extensions/build_context.dart';
 import 'package:flutter/material.dart';
 
 import 'connection_line.dart';
@@ -18,13 +19,24 @@ class TopPlatformView extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Row(
+    return Padding(
+      // web has extra padding on top.
+      padding:
+          context.isLargeScreen ? EdgeInsets.only(top: 85) : EdgeInsets.zero,
+      child: Row(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
-        PlatformIcon(child: FlutterLogo(size: 40)),
+          PlatformIcon(
+            size: context.isLargeScreen ? 185 : 100,
+            child: FlutterLogo(size: context.isLargeScreen ? 100 : 40),
+          ),
           ConnectionLine(show: status == Status.success),
-        PlatformIcon(child: AppwriteIcon(size: 40)),
+          PlatformIcon(
+            size: context.isLargeScreen ? 185 : 100,
+            child: AppwriteIcon(size: context.isLargeScreen ? 100 : 40),
+          ),
         ],
+      ),
     );
   }
 }
@@ -51,7 +63,7 @@ class PlatformIcon extends StatelessWidget {
       height: size,
       decoration: BoxDecoration(
         color: const Color(0xFFFAFAFD),
-        borderRadius: BorderRadius.circular(24),
+        borderRadius: BorderRadius.circular(context.isLargeScreen ? 44 : 24),
         border: Border.all(color: const Color(0x0A19191C), width: 1),
         boxShadow: [
           BoxShadow(
@@ -67,7 +79,7 @@ class PlatformIcon extends StatelessWidget {
           height: size * 0.86,
           decoration: BoxDecoration(
             color: Colors.white,
-            borderRadius: BorderRadius.circular(16),
+            borderRadius: BorderRadius.circular(context.isLargeScreen ? 32 : 16),
             border: Border.all(color: const Color(0xFFFAFAFB), width: 1),
             boxShadow: [
               BoxShadow(

lib/ui/icons/appwrite.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 
 class AppwriteIcon extends StatelessWidget {
-  final double size; // Desired width, height scales accordingly
+  final double size;
   final Color color;
 
   const AppwriteIcon({

pubspec.yaml

@@ -5,7 +5,7 @@ publish_to: 'none'
 version: 1.0.0
 
 environment:
-  sdk: ^3.5.4
+  sdk: ^3.6.0
 
 dependencies:
   flutter: