admin/rely
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine views for mobile-first and responsive layouts

Browse Source
This commit is contained in:
Rijad Zuzo
2026-02-15 17:20:52 +01:00
parent 4d21c6df82
commit 90c1a21d71
10 changed files with 1431 additions and 728 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/sync/sync_view.dart
+97 -38
View File
@@ -23,42 +23,54 @@ class _SyncViewState extends ConsumerState<SyncView> {
syncQueueRepositoryProvider,
);
return Padding(
padding: const EdgeInsets.fromLTRB(28, 24, 28, 28),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Sync', style: Theme.of(context).textTheme.headlineMedium),
const SizedBox(height: 6),
Text(
'Queue local changes, then push and pull when network is available.',
style: Theme.of(
context,
).textTheme.bodyLarge?.copyWith(color: AppTheme.textSecondary),
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
final bool compact = constraints.maxWidth < 760;
return Padding(
padding: EdgeInsets.fromLTRB(
compact ? 16 : 28,
compact ? 16 : 24,
compact ? 16 : 28,
compact ? 20 : 28,
),
const SizedBox(height: 16),
Expanded(
child: syncState.when(
data: (SyncState state) => _buildBody(context, state),
loading: () => const Center(child: CircularProgressIndicator()),
error: (Object error, StackTrace stackTrace) {
return Center(
child: Text(
'Unable to load sync state. $error',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: AppTheme.textSecondary,
),
),
);
},
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Sync', style: Theme.of(context).textTheme.headlineMedium),
const SizedBox(height: 6),
Text(
'Queue local changes, then push and pull when network is available.',
style: Theme.of(
context,
).textTheme.bodyLarge?.copyWith(color: AppTheme.textSecondary),
),
const SizedBox(height: 16),
Expanded(
child: syncState.when(
data: (SyncState state) =>
_buildBody(context, state, compact),
loading: () =>
const Center(child: CircularProgressIndicator()),
error: (Object error, StackTrace stackTrace) {
return Center(
child: Text(
'Unable to load sync state. $error',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: AppTheme.textSecondary,
),
),
);
},
),
),
],
),
],
),
);
},
);
}
Widget _buildBody(BuildContext context, SyncState state) {
Widget _buildBody(BuildContext context, SyncState state, bool compact) {
return ListView(
children: <Widget>[
FrostedCard(
@@ -111,12 +123,36 @@ class _SyncViewState extends ConsumerState<SyncView> {
style: Theme.of(context).textTheme.titleMedium,
),
const SizedBox(height: 10),
_infoRow('Pending changes', '${state.pendingChanges.length}'),
_infoRow('Cursor', state.cursor ?? 'not set'),
_infoRow('Last sync', _formatDateTime(state.lastSyncAt)),
_infoRow('Last attempt', _formatDateTime(state.lastAttemptAt)),
_infoRow('Last rejected count', '${state.lastRejected.length}'),
_infoRow('Last error', state.lastError ?? 'none'),
_infoRow(
label: 'Pending changes',
value: '${state.pendingChanges.length}',
compact: compact,
),
_infoRow(
label: 'Cursor',
value: state.cursor ?? 'not set',
compact: compact,
),
_infoRow(
label: 'Last sync',
value: _formatDateTime(state.lastSyncAt),
compact: compact,
),
_infoRow(
label: 'Last attempt',
value: _formatDateTime(state.lastAttemptAt),
compact: compact,
),
_infoRow(
label: 'Last rejected count',
value: '${state.lastRejected.length}',
compact: compact,
),
_infoRow(
label: 'Last error',
value: state.lastError ?? 'none',
compact: compact,
),
],
),
),
@@ -131,7 +167,30 @@ class _SyncViewState extends ConsumerState<SyncView> {
);
}
Widget _infoRow(String label, String value) {
Widget _infoRow({
required String label,
required String value,
required bool compact,
}) {
if (compact) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 4),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
label,
style: Theme.of(
context,
).textTheme.labelLarge?.copyWith(color: AppTheme.textSecondary),
),
const SizedBox(height: 2),
Text(value, style: Theme.of(context).textTheme.bodyMedium),
],
),
);
}
return Padding(
padding: const EdgeInsets.symmetric(vertical: 2),
child: Row(