feat(neon_framework): Support custom backgrounds

packages/neon/neon_dashboard/lib/src/pages/main.dart

@@ -16,41 +16,43 @@ class DashboardMainPage extends StatelessWidget {
   Widget build(final BuildContext context) {
     final bloc = NeonProvider.of<DashboardBloc>(context);
 
-    return ResultBuilder.behaviorSubject(
-      subject: bloc.widgets,
-      builder: (final context, final snapshot) {
-        Widget? child;
-        if (snapshot.hasData) {
-          child = Wrap(
-            alignment: WrapAlignment.center,
-            spacing: 8,
-            runSpacing: 8,
-            children: snapshot.requireData.entries
-                .map(
-                  (final widget) => DashboardWidget(
-                    widget: widget.key,
-                    items: widget.value,
-                  ),
-                )
-                .toList(),
-          );
-        }
+    return NeonCustomBackground(
+      child: ResultBuilder.behaviorSubject(
+        subject: bloc.widgets,
+        builder: (final context, final snapshot) {
+          Widget? child;
+          if (snapshot.hasData) {
+            child = Wrap(
+              alignment: WrapAlignment.center,
+              spacing: 8,
+              runSpacing: 8,
+              children: snapshot.requireData.entries
+                  .map(
+                    (final widget) => DashboardWidget(
+                      widget: widget.key,
+                      items: widget.value,
+                    ),
+                  )
+                  .toList(),
+            );
+          }
 
-        return Center(
-          child: NeonListView.custom(
-            scrollKey: 'dashboard',
-            isLoading: snapshot.isLoading,
-            error: snapshot.error,
-            onRefresh: bloc.refresh,
-            sliver: SliverFillRemaining(
-              hasScrollBody: false,
-              child: Center(
-                child: child,
+          return Center(
+            child: NeonListView.custom(
+              scrollKey: 'dashboard',
+              isLoading: snapshot.isLoading,
+              error: snapshot.error,
+              onRefresh: bloc.refresh,
+              sliver: SliverFillRemaining(
+                hasScrollBody: false,
+                child: Center(
+                  child: child,
+                ),
               ),
             ),
-          ),
-        );
-      },
+          );
+        },
+      ),
     );
   }
 }

packages/neon_framework/lib/l10n/en.arb

@@ -132,6 +132,7 @@
   "globalOptionsThemeModeAutomatic": "Automatic",
   "globalOptionsThemeOLEDAsDark": "OLED theme as dark theme",
   "globalOptionsThemeUseNextcloudTheme": "Use Nextcloud theme",
+  "globalOptionsThemeCustomBackground": "Custom background",
   "globalOptionsPushNotificationsEnabled": "Enabled",
   "globalOptionsPushNotificationsEnabledDisabledNotice": "No UnifiedPush distributor could be found or you denied the permission for showing notifications. Please go to the app settings and allow notifications and go to https://unifiedpush.org/users/distributors and setup any of the listed distributors. Then re-open this app and you should be able to enable notifications",
   "globalOptionsPushNotificationsDistributor": "UnifiedPush Distributor",

packages/neon_framework/lib/l10n/localizations.dart

@@ -515,6 +515,12 @@ abstract class NeonLocalizations {
   /// **'Use Nextcloud theme'**
   String get globalOptionsThemeUseNextcloudTheme;
 
+  /// No description provided for @globalOptionsThemeCustomBackground.
+  ///
+  /// In en, this message translates to:
+  /// **'Custom background'**
+  String get globalOptionsThemeCustomBackground;
+
   /// No description provided for @globalOptionsPushNotificationsEnabled.
   ///
   /// In en, this message translates to:

packages/neon_framework/lib/l10n/localizations_en.dart

@@ -254,6 +254,9 @@ class NeonLocalizationsEn extends NeonLocalizations {
   @override
   String get globalOptionsThemeUseNextcloudTheme => 'Use Nextcloud theme';
 
+  @override
+  String get globalOptionsThemeCustomBackground => 'Custom background';
+
   @override
   String get globalOptionsPushNotificationsEnabled => 'Enabled';
 

packages/neon_framework/lib/src/app.dart

@@ -16,6 +16,7 @@ import 'package:neon_framework/src/models/push_notification.dart';
 import 'package:neon_framework/src/platform/platform.dart';
 import 'package:neon_framework/src/router.dart';
 import 'package:neon_framework/src/theme/neon.dart';
+import 'package:neon_framework/src/theme/server.dart';
 import 'package:neon_framework/src/theme/theme.dart';
 import 'package:neon_framework/src/utils/findable.dart';
 import 'package:neon_framework/src/utils/global_options.dart';
@@ -298,7 +299,9 @@ class _NeonAppState extends State<NeonApp> with WidgetsBindingObserver, tray.Tra
                     : null,
                 builder: (final context, final capabilitiesSnapshot) {
                   final appTheme = AppTheme(
-                    nextcloudTheme: capabilitiesSnapshot.data?.capabilities.themingPublicCapabilities?.theming,
+                    serverTheme: ServerTheme(
+                      nextcloudTheme: capabilitiesSnapshot.data?.capabilities.themingPublicCapabilities?.theming,
+                    ),
                     useNextcloudTheme: options.themeUseNextcloudTheme.value,
                     deviceThemeLight: deviceThemeLight,
                     deviceThemeDark: deviceThemeDark,

packages/neon_framework/lib/src/pages/settings.dart

@@ -147,6 +147,9 @@ class _SettingsPageState extends State<SettingsPage> {
             ToggleSettingsTile(
               option: globalOptions.themeUseNextcloudTheme,
             ),
+            ToggleSettingsTile(
+              option: globalOptions.themeCustomBackground,
+            ),
           ],
         ),
         SettingsCategory(

packages/neon_framework/lib/src/theme/server.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:nextcloud/core.dart' as core;
+
+/// Defines the server configured theme.
+@immutable
+class ServerTheme extends ThemeExtension<ServerTheme> {
+  /// Create a [ServerTheme] that's used to configure a [Theme].
+  const ServerTheme({
+    required this.nextcloudTheme,
+  });
+
+  /// The theme that is configured on the server.
+  final core.ThemingPublicCapabilities_Theming? nextcloudTheme;
+
+  @override
+  ServerTheme copyWith({
+    final core.ThemingPublicCapabilities_Theming? nextcloudTheme,
+  }) =>
+      ServerTheme(
+        nextcloudTheme: nextcloudTheme,
+      );
+
+  @override
+  ServerTheme lerp(final ServerTheme? other, final double t) {
+    if (other is! ServerTheme) {
+      return this;
+    }
+
+    return ServerTheme(
+      nextcloudTheme: nextcloudTheme,
+    );
+  }
+
+  @override
+  int get hashCode => Object.hashAll([
+        nextcloudTheme,
+      ]);
+
+  @override
+  bool operator ==(final Object other) {
+    if (identical(this, other)) {
+      return true;
+    }
+
+    return other is ServerTheme && other.nextcloudTheme == nextcloudTheme;
+  }
+}

packages/neon_framework/lib/src/theme/theme.dart

@@ -3,26 +3,26 @@ import 'package:flutter/material.dart';
 import 'package:meta/meta.dart';
 import 'package:neon_framework/src/theme/colors.dart';
 import 'package:neon_framework/src/theme/neon.dart';
+import 'package:neon_framework/src/theme/server.dart';
 import 'package:neon_framework/src/utils/hex_color.dart';
-import 'package:nextcloud/core.dart' as core;
 
 /// Custom theme used for the Neon app.
 @internal
 @immutable
 class AppTheme {
   /// Creates a new Neon app theme.
   const AppTheme({
-    required this.nextcloudTheme,
+    required this.serverTheme,
     required this.deviceThemeLight,
     required this.deviceThemeDark,
     required this.neonTheme,
-    final bool useNextcloudTheme = false,
+    this.useNextcloudTheme = false,
     this.oledAsDark = false,
     this.appThemes,
-  }) : useNextcloudTheme = nextcloudTheme == null || useNextcloudTheme;
+  });
 
   /// The theme provided by the Nextcloud server.
-  final core.ThemingPublicCapabilities_Theming? nextcloudTheme;
+  final ServerTheme serverTheme;
 
   /// Whether to use of the Nextcloud theme.
   final bool useNextcloudTheme;
@@ -45,9 +45,9 @@ class AppTheme {
   ColorScheme _buildColorScheme(final Brightness brightness) {
     ColorScheme? colorScheme;
 
-    if (nextcloudTheme != null && useNextcloudTheme) {
-      final primaryColor = HexColor(nextcloudTheme!.color);
-      final onPrimaryColor = HexColor(nextcloudTheme!.colorText);
+    if (serverTheme.nextcloudTheme != null && useNextcloudTheme) {
+      final primaryColor = HexColor(serverTheme.nextcloudTheme!.color);
+      final onPrimaryColor = HexColor(serverTheme.nextcloudTheme!.colorText);
 
       colorScheme = ColorScheme.fromSeed(
         seedColor: primaryColor,
@@ -96,6 +96,7 @@ class AppTheme {
         textTheme: const CupertinoTextThemeData(),
       ),
       extensions: [
+        serverTheme,
         neonTheme,
         ...?appThemes,
       ],

packages/neon_framework/lib/src/utils/global_options.dart

@@ -73,6 +73,7 @@ class GlobalOptions extends OptionsCollection {
     themeMode,
     themeOLEDAsDark,
     themeUseNextcloudTheme,
+    themeCustomBackground,
     pushNotificationsEnabled,
     pushNotificationsDistributor,
     startupMinimized,
@@ -151,6 +152,18 @@ class GlobalOptions extends OptionsCollection {
     defaultValue: true,
   );
 
+  /// Whether to enable custom backgrounds provided by the Nextcloud server.
+  ///
+  /// Defaults to `true`.
+  /// Depends on [themeUseNextcloudTheme] to be enabled.
+  late final themeCustomBackground = ToggleOption.depend(
+    storage: storage,
+    key: GlobalOptionKeys.themeCustomBackground,
+    label: (final context) => NeonLocalizations.of(context).globalOptionsThemeCustomBackground,
+    defaultValue: true,
+    enabled: themeUseNextcloudTheme,
+  );
+
   /// Whether to enable the push notifications plugin.
   ///
   /// Setting this option to true will request the permission to show notifications.
@@ -280,6 +293,9 @@ enum GlobalOptionKeys implements Storable {
   /// The storage key for [GlobalOptions.themeUseNextcloudTheme]
   themeUseNextcloudTheme._('theme-use-nextcloud-theme'),
 
+  /// The storage key for [GlobalOptions.themeCustomBackground]
+  themeCustomBackground._('theme-custom-background'),
+
   /// The storage key for [GlobalOptions.pushNotificationsEnabled]
   pushNotificationsEnabled._('push-notifications-enabled'),
 

packages/neon_framework/lib/src/widgets/custom_background.dart

@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+import 'package:neon_framework/src/theme/server.dart';
+import 'package:neon_framework/src/utils/global_options.dart';
+import 'package:neon_framework/src/utils/hex_color.dart';
+import 'package:neon_framework/src/utils/provider.dart';
+import 'package:neon_framework/src/widgets/image.dart';
+import 'package:neon_framework/src/widgets/options_collection_builder.dart';
+
+/// Displays the custom background if the user has it enabled.
+///
+/// The background will be loaded from the server.
+/// It might be a single color or a full image.
+class NeonCustomBackground extends StatelessWidget {
+  const NeonCustomBackground({
+    required this.child,
+    super.key,
+  });
+
+  /// Widget displayed on top of the custom background.
+  final Widget child;
+
+  @override
+  Widget build(final BuildContext context) {
+    final globalOptions = NeonProvider.of<GlobalOptions>(context);
+
+    return OptionsCollectionBuilder(
+      valueListenable: globalOptions,
+      child: child,
+      builder: (final context, final options, final child) {
+        if (!options.themeUseNextcloudTheme.value || !options.themeCustomBackground.value) {
+          return child!;
+        }
+
+        final theme = Theme.of(context).extension<ServerTheme>()!.nextcloudTheme;
+
+        if (theme == null) {
+          return ColoredBox(
+            color: Theme.of(context).colorScheme.background,
+            child: child,
+          );
+        }
+
+        if (theme.backgroundPlain) {
+          return ColoredBox(
+            color: Color.lerp(HexColor(theme.background), Colors.black, 0.5)!,
+            child: child,
+          );
+        }
+
+        return Stack(
+          children: [
+            Positioned.fill(
+              child: NeonUrlImage(
+                url: theme.background,
+                fit: BoxFit.cover,
+              ),
+            ),
+            Positioned.fill(
+              child: ColoredBox(
+                color: Colors.black.withOpacity(0.5),
+              ),
+            ),
+            child!,
+          ],
+        );
+      },
+    );
+  }
+}

packages/neon_framework/lib/widgets.dart

@@ -1,3 +1,4 @@
+export 'package:neon_framework/src/widgets/custom_background.dart';
 export 'package:neon_framework/src/widgets/dialog.dart';
 export 'package:neon_framework/src/widgets/error.dart';
 export 'package:neon_framework/src/widgets/image.dart';