josiadmin/MyNewAppWriteTankApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: layout issues and add a nice spinner.

Browse Source
This commit is contained in:
Darshan 2025-04-28 18:47:10 +05:30
parent 3ab962f00a
commit c23ce74bc4
9 changed files with 199 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
lib/home.dart
View File

@ -26,7 +26,12 @@ class _AppwriteStarterKit extends State<AppwriteStarterKit> {
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(

2
lib/ui/components/collapsible_bottomsheet.dart
View File

@ -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(

2
lib/ui/components/connection_line.dart
View File

@ -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,

56
lib/ui/components/getting_started_cards.dart
View File

@ -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,7 +9,8 @@ class GettingStartedCards extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
return ResponsiveLayout(
smallDeviceLayout: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
@ -42,6 +44,51 @@ class GettingStartedCards extends StatelessWidget {
),
],
),
),
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(

16
lib/ui/components/top_platform_view.dart
View File

@ -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: <Widget>[
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(

14
pubspec.lock
View File

@ -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"

BIN
web/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 399 B

8
web/favicon.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M24.4429 16.4322V21.9096H10.7519C6.76318 21.9096 3.28044 19.7067 1.4171 16.4322C1.14622 15.9561 0.909137 15.4567 0.710264 14.9383C0.319864 13.9225 0.0744552 12.8325 0 11.6952V10.2143C0.0161646 9.96089 0.0416361 9.70942 0.0749451 9.46095C0.143032 8.95105 0.245898 8.45211 0.381093 7.96711C1.66006 3.36909 5.81877 0 10.7519 0C15.6851 0 19.8433 3.36909 21.1223 7.96711H15.2682C14.3072 6.4683 12.6437 5.4774 10.7519 5.4774C8.86017 5.4774 7.19668 6.4683 6.23562 7.96711C5.9427 8.42274 5.71542 8.92516 5.56651 9.46095C5.43425 9.93599 5.36371 10.4369 5.36371 10.9548C5.36371 12.5248 6.01324 13.94 7.05463 14.9383C8.01961 15.865 9.32061 16.4322 10.7519 16.4322H24.4429Z"
fill="#FD366E" />
<path
d="M24.4429 9.46094V14.9383H14.4492C15.4906 13.94 16.1401 12.5248 16.1401 10.9548C16.1401 10.4369 16.0696 9.93598 15.9373 9.46094H24.4429Z"
fill="#FD366E" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1012 B

121
web/index.html
View File

@ -1,4 +1,6 @@
<!DOCTYPE html><html><head>
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
@ -25,61 +27,31 @@
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png">
<link rel="icon" type="image/png" href="favicon.svg">
<title>AppwriteStarterKit</title>
<link rel="manifest" href="manifest.json">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
name="viewport">
<style id="splash-screen-style">
html {
height: 100%
}
body {
html, body {
height: 100%;
margin: 0;
min-height: 100%;
background-color: #EDEDF0;
background-size: 100% 100%;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.contain {
display:block;
width:100%; height:100%;
object-fit: contain;
}
.stretch {
display:block;
width:100%; height:100%;
}
.cover {
display:block;
width:100%; height:100%;
object-fit: cover;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
}
.bottom {
@ -87,20 +59,23 @@
bottom: 0;
left: 50%;
padding-bottom: 24px;
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
transform: translateX(-50%);
}
.bottomLeft {
position: absolute;
bottom: 0;
left: 0;
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.bottomRight {
position: absolute;
bottom: 0;
right: 0;
.rotate {
width: 100%;
height: 100%;
transform-origin: center center;
animation: rotate 1.5s infinite linear;
}
@media (prefers-color-scheme: dark) {
@ -108,7 +83,14 @@
background-color: #19191D;
}
}
@media (prefers-reduced-motion: reduce) {
.rotate {
animation: none;
}
}
</style>
<script id="splash-screen-script">
function removeSplashFromWeb() {
document.getElementById("splash")?.remove();
@ -118,30 +100,25 @@
</script>
</head>
<body>
<picture id="splash-branding">
<source srcset="splash/img/branding-1x.png 1x, splash/img/branding-2x.png 2x, splash/img/branding-3x.png 3x, splash/img/branding-4x.png 4x" media="(prefers-color-scheme: light)">
<source srcset="splash/img/branding-dark-1x.png 1x, splash/img/branding-dark-2x.png 2x, splash/img/branding-dark-3x.png 3x, splash/img/branding-dark-4x.png 4x" media="(prefers-color-scheme: dark)">
<source srcset="splash/img/branding-1x.png 1x, splash/img/branding-2x.png 2x, splash/img/branding-3x.png 3x, splash/img/branding-4x.png 4x"
media="(prefers-color-scheme: light)">
<source srcset="splash/img/branding-dark-1x.png 1x, splash/img/branding-dark-2x.png 2x, splash/img/branding-dark-3x.png 3x, splash/img/branding-dark-4x.png 4x"
media="(prefers-color-scheme: dark)">
<img class="bottom" aria-hidden="true" src="splash/img/branding-1x.png" alt="">
</picture>
<picture id="splash">
<source srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x, splash/img/light-4x.png 4x" media="(prefers-color-scheme: light)">
<source srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x, splash/img/dark-4x.png 4x" media="(prefers-color-scheme: dark)">
<img class="center" aria-hidden="true" src="splash/img/light-1x.png" alt="">
</picture>
<div id="splash" class="center">
<svg class="rotate" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
<path opacity="0.2"
d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM2.4 12C2.4 17.3019 6.69807 21.6 12 21.6C17.3019 21.6 21.6 17.3019 21.6 12C21.6 6.69807 17.3019 2.4 12 2.4C6.69807 2.4 2.4 6.69807 2.4 12Z"
fill="#56565C"/>
<path d="M5.11708 2.17017C6.66833 1.08398 8.45463 0.380338 10.3299 0.116783C12.2052 -0.146772 14.1163 0.0372409 15.9068 0.653778C17.6974 1.27031 19.3166 2.30187 20.6321 3.6641C21.9476 5.02633 22.922 6.68056 23.4757 8.49154C24.0293 10.3025 24.1465 12.2188 23.8177 14.0838C23.4888 15.9487 22.7233 17.7094 21.5836 19.2218C20.444 20.7342 18.9625 21.9554 17.2605 22.7855C15.5584 23.6157 13.684 24.0312 11.7906 23.9982L11.8325 21.5985C13.3472 21.625 14.8467 21.2925 16.2084 20.6284C17.57 19.9643 18.7552 18.9873 19.6669 17.7774C20.5786 16.5675 21.1911 15.159 21.4542 13.667C21.7172 12.1751 21.6235 10.642 21.1805 9.19323C20.7376 7.74445 19.9581 6.42107 18.9057 5.33128C17.8533 4.2415 16.5579 3.41625 15.1255 2.92302C13.693 2.42979 12.1642 2.28258 10.6639 2.49343C9.1637 2.70427 7.73467 3.26718 6.49367 4.13614L5.11708 2.17017Z"
fill="#56565C"/>
</svg>
</div>
<script src="flutter_bootstrap.js" async=""></script>
</body></html>
</body>
</html>