fix: layout issues and add a nice spinner.

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

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(

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,

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

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(