diff --git a/lib/home.dart b/lib/home.dart index 6cd2e5b..fcc30da 100644 --- a/lib/home.dart +++ b/lib/home.dart @@ -26,7 +26,12 @@ class _AppwriteStarterKit extends State { return Scaffold( body: CheckeredBackground( child: SafeArea( - minimum: EdgeInsets.only(top: context.isLargeScreen ? 24 : 16), + minimum: EdgeInsets.only( + top: context.isExtraWideScreen + ? 156 + : context.isLargeScreen + ? 24 + : 32), child: Stack( children: [ SingleChildScrollView( diff --git a/lib/ui/components/collapsible_bottomsheet.dart b/lib/ui/components/collapsible_bottomsheet.dart index 0b46a07..c13a533 100644 --- a/lib/ui/components/collapsible_bottomsheet.dart +++ b/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( diff --git a/lib/ui/components/connection_line.dart b/lib/ui/components/connection_line.dart index d66e67b..6d281d1 100644 --- a/lib/ui/components/connection_line.dart +++ b/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.1, ), child: Flex( direction: Axis.horizontal, diff --git a/lib/ui/components/getting_started_cards.dart b/lib/ui/components/getting_started_cards.dart index ede9089..cdfb83a 100644 --- a/lib/ui/components/getting_started_cards.dart +++ b/lib/ui/components/getting_started_cards.dart @@ -1,3 +1,4 @@ +import 'package:appwrite_flutter_starter_kit/ui/components/responsive_layout.dart'; import 'package:appwrite_flutter_starter_kit/utils/extensions/build_context.dart'; import 'package:flutter/material.dart'; import 'package:url_launcher/url_launcher.dart'; @@ -8,39 +9,85 @@ class GettingStartedCards extends StatelessWidget { @override Widget build(BuildContext context) { - return Padding( - padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0), - child: 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), + return ResponsiveLayout( + smallDeviceLayout: Padding( + padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0), + child: 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), + 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), + ), ), ), - ), - ], + ], + ), + ), + largeDeviceLayout: Padding( + padding: EdgeInsets.symmetric( + horizontal: context.isExtraWideScreen ? 64 : 16.0, vertical: 16.0), + child: Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.center, + spacing: 16, + children: [ + Flexible( + child: GeneralInfoCard( + title: "Edit your app", + link: null, + subtitle: const HighlightedText(), + ), + ), + Flexible( + child: 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), + ), + ), + ), + ), + Flexible( + child: 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), + ), + ), + ), + ), + ], + ), ), ); } @@ -68,9 +115,12 @@ class GeneralInfoCard extends StatelessWidget { @override Widget build(BuildContext context) { return LayoutBuilder(builder: (context, constraints) { + final double cardWidth = context.isExtraWideScreen + ? constraints.maxWidth.clamp(0, 350) + : constraints.maxWidth; + return SizedBox( - // `1` because we already have padding on sides. - width: constraints.maxWidth * (context.isExtraWideScreen ? 0.55 : 1), + width: cardWidth, child: Card( elevation: 0, shape: RoundedRectangleBorder( diff --git a/lib/ui/components/top_platform_view.dart b/lib/ui/components/top_platform_view.dart index e457b06..54e512c 100644 --- a/lib/ui/components/top_platform_view.dart +++ b/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'; @@ -21,9 +22,15 @@ class TopPlatformView extends StatelessWidget { return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - PlatformIcon(child: FlutterLogo(size: 40)), + PlatformIcon( + size: context.isExtraWideScreen ? 142 : 100, + child: FlutterLogo(size: context.isExtraWideScreen ? 56 : 40), + ), ConnectionLine(show: status == Status.success), - PlatformIcon(child: AppwriteIcon(size: 40)), + PlatformIcon( + size: context.isExtraWideScreen ? 142 : 100, + child: AppwriteIcon(size: context.isExtraWideScreen ? 56 : 40), + ), ], ); } @@ -51,7 +58,7 @@ class PlatformIcon extends StatelessWidget { height: size, decoration: BoxDecoration( color: const Color(0xFFFAFAFD), - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.circular(context.isExtraWideScreen ? size * 0.2 : 24), border: Border.all(color: const Color(0x0A19191C), width: 1), boxShadow: [ BoxShadow( @@ -65,9 +72,10 @@ class PlatformIcon extends StatelessWidget { child: Container( width: size * 0.86, height: size * 0.86, + margin: context.isExtraWideScreen ? EdgeInsets.all(8) : null, decoration: BoxDecoration( color: Colors.white, - borderRadius: BorderRadius.circular(16), + borderRadius: BorderRadius.circular(context.isExtraWideScreen ? size * 0.2: 16), border: Border.all(color: const Color(0xFFFAFAFB), width: 1), boxShadow: [ BoxShadow( diff --git a/pubspec.lock b/pubspec.lock index aedf45c..359de51 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -45,10 +45,10 @@ packages: dependency: transitive description: name: characters - sha256: f71061c654a3380576a52b451dd5532377954cf9dbd272a78fc8479606670803 + sha256: "04a925763edad70e8443c99234dc3328f442e811f1d8fd1a72f1c8ad0f69a605" url: "https://pub.dev" source: hosted - version: "1.4.0" + version: "1.3.0" checked_yaml: dependency: transitive description: @@ -77,10 +77,10 @@ packages: dependency: transitive description: name: collection - sha256: "2f5709ae4d3d59dd8f7cd309b4e023046b57d8a6c82130785d2b0e5868084e76" + sha256: a1ace0a119f20aabc852d165077c036cd864315bd99b7eaa10a60100341941bf url: "https://pub.dev" source: hosted - version: "1.19.1" + version: "1.19.0" cookie_jar: dependency: transitive description: @@ -271,10 +271,10 @@ packages: dependency: transitive description: name: meta - sha256: e3641ec5d63ebf0d9b41bd43201a66e3fc79a65db5f61fc181f04cd27aab950c + sha256: bdb68674043280c3428e9ec998512fb681678676b3c54e773629ffe74419f8c7 url: "https://pub.dev" source: hosted - version: "1.16.0" + version: "1.15.0" package_info_plus: dependency: transitive description: @@ -625,5 +625,5 @@ packages: source: hosted version: "3.1.3" sdks: - dart: ">=3.7.0-0 <4.0.0" + dart: ">=3.6.0 <4.0.0" flutter: ">=3.27.0" diff --git a/web/favicon.png b/web/favicon.png deleted file mode 100644 index 77222aa..0000000 Binary files a/web/favicon.png and /dev/null differ diff --git a/web/favicon.svg b/web/favicon.svg new file mode 100644 index 0000000..08e32ac --- /dev/null +++ b/web/favicon.svg @@ -0,0 +1,8 @@ + + + + \ No newline at end of file diff --git a/web/index.html b/web/index.html index f71fbe5..f29a865 100644 --- a/web/index.html +++ b/web/index.html @@ -1,4 +1,6 @@ - + + + - + AppwriteStarterKit + - + - + to { + transform: rotate(360deg); + } + } + + .rotate { + width: 100%; + height: 100%; + transform-origin: center center; + animation: rotate 1.5s infinite linear; + } + + @media (prefers-color-scheme: dark) { + body { + background-color: #19191D; + } + } + + @media (prefers-reduced-motion: reduce) { + .rotate { + animation: none; + } + } + + + - - - + + + + - - - - - - - - - - - - - - - - + +
+ + + + +
- - - - \ No newline at end of file + +