Skip to content

Commit 5c2b6cb

Browse files
rkistnerrkistner
committed
Improved status icons on demos.
1 parent 905b510 commit 5c2b6cb

File tree

3 files changed

+114
-33
lines changed

3 files changed

+114
-33
lines changed

‎demos/supabase-anonymous-auth/lib/widgets/status_app_bar.dart‎

Lines changed: 38 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'dart:async';
22

3+
import 'package:flutter/foundation.dart';
34
import 'package:flutter/material.dart';
45
import 'package:powersync/powersync.dart';
56
import '../powersync.dart';
@@ -39,22 +40,48 @@ class _StatusAppBarState extends State<StatusAppBar> {
3940

4041
@override
4142
Widget build(BuildContext context) {
42-
const connectedIcon = IconButton(
43-
icon: Icon(Icons.wifi),
44-
tooltip: 'Connected',
45-
onPressed: null,
46-
);
47-
const disconnectedIcon = IconButton(
48-
icon: Icon(Icons.wifi_off),
49-
tooltip: 'Not connected',
50-
onPressed: null,
51-
);
43+
final statusIcon = _getStatusIcon(_connectionState);
5244

5345
return AppBar(
5446
title: Text(widget.title),
5547
actions: <Widget>[
56-
_connectionState.connected ? connectedIcon : disconnectedIcon
48+
statusIcon,
49+
// Make some space for the "Debug" banner, so that the status
50+
// icon isn't hidden
51+
if (kDebugMode) _makeIcon('Debug mode', Icons.developer_mode),
5752
],
5853
);
5954
}
6055
}
56+
57+
Widget _makeIcon(String text, IconData icon) {
58+
return Tooltip(
59+
message: text,
60+
child: SizedBox(width: 40, height: null, child: Icon(icon, size: 24)));
61+
}
62+
63+
Widget _getStatusIcon(SyncStatus status) {
64+
if (status.exception != null) {
65+
// The exception message is verbose, could be replaced with something
66+
// more user-friendly
67+
if (!status.connected) {
68+
return _makeIcon(status.exception!.toString(), Icons.cloud_off);
69+
} else {
70+
return _makeIcon(status.exception!.toString(), Icons.sync_problem);
71+
}
72+
} else if (status.connecting) {
73+
return _makeIcon('Connecting', Icons.cloud_sync_outlined);
74+
} else if (!status.connected) {
75+
return _makeIcon('Not connected', Icons.cloud_off);
76+
} else if (status.uploading && status.downloading) {
77+
// The status changes often between downloading, uploading and both,
78+
// so we use the same icon for all three
79+
return _makeIcon('Uploading and downloading', Icons.cloud_sync_outlined);
80+
} else if (status.uploading) {
81+
return _makeIcon('Uploading', Icons.cloud_sync_outlined);
82+
} else if (status.downloading) {
83+
return _makeIcon('Downloading', Icons.cloud_sync_outlined);
84+
} else {
85+
return _makeIcon('Connected', Icons.cloud_queue);
86+
}
87+
}

‎demos/supabase-edge-function-auth/lib/widgets/status_app_bar.dart‎

Lines changed: 38 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'dart:async';
22

3+
import 'package:flutter/foundation.dart';
34
import 'package:flutter/material.dart';
45
import 'package:powersync/powersync.dart';
56
import '../powersync.dart';
@@ -39,22 +40,48 @@ class _StatusAppBarState extends State<StatusAppBar> {
3940

4041
@override
4142
Widget build(BuildContext context) {
42-
const connectedIcon = IconButton(
43-
icon: Icon(Icons.wifi),
44-
tooltip: 'Connected',
45-
onPressed: null,
46-
);
47-
const disconnectedIcon = IconButton(
48-
icon: Icon(Icons.wifi_off),
49-
tooltip: 'Not connected',
50-
onPressed: null,
51-
);
43+
final statusIcon = _getStatusIcon(_connectionState);
5244

5345
return AppBar(
5446
title: Text(widget.title),
5547
actions: <Widget>[
56-
_connectionState.connected ? connectedIcon : disconnectedIcon
48+
statusIcon,
49+
// Make some space for the "Debug" banner, so that the status
50+
// icon isn't hidden
51+
if (kDebugMode) _makeIcon('Debug mode', Icons.developer_mode),
5752
],
5853
);
5954
}
6055
}
56+
57+
Widget _makeIcon(String text, IconData icon) {
58+
return Tooltip(
59+
message: text,
60+
child: SizedBox(width: 40, height: null, child: Icon(icon, size: 24)));
61+
}
62+
63+
Widget _getStatusIcon(SyncStatus status) {
64+
if (status.exception != null) {
65+
// The exception message is verbose, could be replaced with something
66+
// more user-friendly
67+
if (!status.connected) {
68+
return _makeIcon(status.exception!.toString(), Icons.cloud_off);
69+
} else {
70+
return _makeIcon(status.exception!.toString(), Icons.sync_problem);
71+
}
72+
} else if (status.connecting) {
73+
return _makeIcon('Connecting', Icons.cloud_sync_outlined);
74+
} else if (!status.connected) {
75+
return _makeIcon('Not connected', Icons.cloud_off);
76+
} else if (status.uploading && status.downloading) {
77+
// The status changes often between downloading, uploading and both,
78+
// so we use the same icon for all three
79+
return _makeIcon('Uploading and downloading', Icons.cloud_sync_outlined);
80+
} else if (status.uploading) {
81+
return _makeIcon('Uploading', Icons.cloud_sync_outlined);
82+
} else if (status.downloading) {
83+
return _makeIcon('Downloading', Icons.cloud_sync_outlined);
84+
} else {
85+
return _makeIcon('Connected', Icons.cloud_queue);
86+
}
87+
}

‎demos/supabase-todolist/lib/widgets/status_app_bar.dart‎

Lines changed: 38 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'dart:async';
22

3+
import 'package:flutter/foundation.dart';
34
import 'package:flutter/material.dart';
45
import 'package:powersync/powersync.dart';
56
import 'package:powersync_flutter_demo/widgets/fts_search_delegate.dart';
@@ -40,16 +41,7 @@ class _StatusAppBarState extends State<StatusAppBar> {
4041

4142
@override
4243
Widget build(BuildContext context) {
43-
const connectedIcon = IconButton(
44-
icon: Icon(Icons.wifi),
45-
tooltip: 'Connected',
46-
onPressed: null,
47-
);
48-
const disconnectedIcon = IconButton(
49-
icon: Icon(Icons.wifi_off),
50-
tooltip: 'Not connected',
51-
onPressed: null,
52-
);
44+
final statusIcon = _getStatusIcon(_connectionState);
5345

5446
return AppBar(
5547
title: Text(widget.title),
@@ -60,8 +52,43 @@ class _StatusAppBarState extends State<StatusAppBar> {
6052
},
6153
icon: const Icon(Icons.search),
6254
),
63-
_connectionState.connected ? connectedIcon : disconnectedIcon
55+
statusIcon,
56+
// Make some space for the "Debug" banner, so that the status
57+
// icon isn't hidden
58+
if (kDebugMode) _makeIcon('Debug mode', Icons.developer_mode),
6459
],
6560
);
6661
}
6762
}
63+
64+
Widget _makeIcon(String text, IconData icon) {
65+
return Tooltip(
66+
message: text,
67+
child: SizedBox(width: 40, height: null, child: Icon(icon, size: 24)));
68+
}
69+
70+
Widget _getStatusIcon(SyncStatus status) {
71+
if (status.exception != null) {
72+
// The exception message is verbose, could be replaced with something
73+
// more user-friendly
74+
if (!status.connected) {
75+
return _makeIcon(status.exception!.toString(), Icons.cloud_off);
76+
} else {
77+
return _makeIcon(status.exception!.toString(), Icons.sync_problem);
78+
}
79+
} else if (status.connecting) {
80+
return _makeIcon('Connecting', Icons.cloud_sync_outlined);
81+
} else if (!status.connected) {
82+
return _makeIcon('Not connected', Icons.cloud_off);
83+
} else if (status.uploading && status.downloading) {
84+
// The status changes often between downloading, uploading and both,
85+
// so we use the same icon for all three
86+
return _makeIcon('Uploading and downloading', Icons.cloud_sync_outlined);
87+
} else if (status.uploading) {
88+
return _makeIcon('Uploading', Icons.cloud_sync_outlined);
89+
} else if (status.downloading) {
90+
return _makeIcon('Downloading', Icons.cloud_sync_outlined);
91+
} else {
92+
return _makeIcon('Connected', Icons.cloud_queue);
93+
}
94+
}

0 commit comments

Comments
 (0)