Fix connectivity banner style on android, put it on puzzle tab

lichess-org · Feb 25, 2024 · bc3956a · bc3956a
1 parent bf0ad4c
commit bc3956a
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 44 deletions.
diff --git a/lib/src/view/home/home_tab_screen.dart b/lib/src/view/home/home_tab_screen.dart
@@ -104,7 +104,7 @@ class _HomeScreenState extends ConsumerState<HomeTabScreen> {
         child: const Column(
           children: [
             Expanded(child: _HomeBody()),
-            _ConnectivityBanner(),
+            ConnectivityBanner(),
           ],
         ),
       ),
@@ -150,7 +150,7 @@ class _HomeScreenState extends ConsumerState<HomeTabScreen> {
           CupertinoSliverRefreshControl(
             onRefresh: () => _refreshData(),
           ),
-          const SliverToBoxAdapter(child: _ConnectivityBanner()),
+          const SliverToBoxAdapter(child: ConnectivityBanner()),
           const SliverSafeArea(
             top: false,
             sliver: _HomeBody(),
@@ -368,46 +368,6 @@ class _HelloWidget extends ConsumerWidget {
   }
 }
 
-class _ConnectivityBanner extends ConsumerWidget {
-  const _ConnectivityBanner();
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final connectivity = ref.watch(connectivityChangesProvider);
-    final themeData = CupertinoTheme.of(context);
-    return connectivity.when(
-      data: (data) {
-        if (data.isOnline) {
-          return const SizedBox.shrink();
-        }
-        return Container(
-          height: 45,
-          color: themeData.barBackgroundColor,
-          child: Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 8.0),
-            child: Row(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                Icon(Icons.report, color: themeData.textTheme.textStyle.color),
-                const SizedBox(width: 5),
-                const Flexible(
-                  child: Text(
-                    'Network connectivity unavailable.',
-                    maxLines: 2,
-                    overflow: TextOverflow.ellipsis,
-                  ),
-                ),
-              ],
-            ),
-          ),
-        );
-      },
-      loading: () => const SizedBox.shrink(),
-      error: (error, stack) => const SizedBox.shrink(),
-    );
-  }
-}
-
 class _CreateAGameSection extends ConsumerWidget {
   const _CreateAGameSection({this.isExpanded = false});
 

diff --git a/lib/src/view/puzzle/puzzle_tab_screen.dart b/lib/src/view/puzzle/puzzle_tab_screen.dart
@@ -25,6 +25,7 @@ import 'package:lichess_mobile/src/view/puzzle/puzzle_dashboard_widget.dart';
 import 'package:lichess_mobile/src/view/puzzle/puzzle_history_screen.dart';
 import 'package:lichess_mobile/src/widgets/board_preview.dart';
 import 'package:lichess_mobile/src/widgets/buttons.dart';
+import 'package:lichess_mobile/src/widgets/feedback.dart';
 import 'package:lichess_mobile/src/widgets/list.dart';
 import 'package:lichess_mobile/src/widgets/platform.dart';
 import 'package:lichess_mobile/src/widgets/shimmer.dart';
@@ -54,15 +55,23 @@ class _PuzzleTabScreenState extends ConsumerState<PuzzleTabScreen> {
   }
 
   Widget _androidBuilder(BuildContext context, AuthSessionState? userSession) {
+    final body = Column(
+      children: [
+        Expanded(
+          child: _Body(userSession),
+        ),
+        const ConnectivityBanner(),
+      ],
+    );
     return Scaffold(
       appBar: AppBar(title: Text(context.l10n.puzzles)),
       body: userSession != null
           ? RefreshIndicator(
               key: _androidRefreshKey,
               onRefresh: _refreshData,
-              child: Center(child: _Body(userSession)),
+              child: body,
             )
-          : Center(child: _Body(userSession)),
+          : body,
     );
   }
 
@@ -78,6 +87,7 @@ class _PuzzleTabScreenState extends ConsumerState<PuzzleTabScreen> {
             CupertinoSliverRefreshControl(
               onRefresh: _refreshData,
             ),
+          const SliverToBoxAdapter(child: ConnectivityBanner()),
           SliverSafeArea(
             top: false,
             sliver: _Body(userSession),

diff --git a/lib/src/widgets/feedback.dart b/lib/src/widgets/feedback.dart
@@ -1,9 +1,59 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:lichess_mobile/src/styles/styles.dart';
+import 'package:lichess_mobile/src/utils/connectivity.dart';
 import 'package:lichess_mobile/src/utils/l10n_context.dart';
 import 'package:lichess_mobile/src/widgets/buttons.dart';
 
+class ConnectivityBanner extends ConsumerWidget {
+  const ConnectivityBanner();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final connectivity = ref.watch(connectivityChangesProvider);
+    final cupertinoTheme = CupertinoTheme.of(context);
+    final theme = Theme.of(context);
+    return connectivity.when(
+      data: (data) {
+        if (data.isOnline) {
+          return const SizedBox.shrink();
+        }
+        return Container(
+          height: 45,
+          color: theme.platform == TargetPlatform.iOS
+              ? cupertinoTheme.barBackgroundColor
+              : theme.colorScheme.surfaceVariant,
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 8.0),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                const Icon(Icons.report),
+                const SizedBox(width: 5),
+                Flexible(
+                  child: Text(
+                    'Network connectivity unavailable.',
+                    maxLines: 2,
+                    overflow: TextOverflow.ellipsis,
+                    style: TextStyle(
+                      color: theme.platform == TargetPlatform.iOS
+                          ? null
+                          : theme.colorScheme.onSurfaceVariant,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        );
+      },
+      loading: () => const SizedBox.shrink(),
+      error: (error, stack) => const SizedBox.shrink(),
+    );
+  }
+}
+
 /// A adaptive circular progress indicator which size is constrained so it can fit
 /// in buttons.
 class ButtonLoadingIndicator extends StatelessWidget {