Simulator #10

Author: SaadArdati

lib/src/codelessly.dart

@@ -12,7 +12,10 @@ import '../codelessly_sdk.dart';
 import 'logging/reporter.dart';
 import 'utils/codelessly_http_client.dart';
 
-typedef NavigationListener = void Function(BuildContext context);
+typedef NavigationListener = void Function(
+  BuildContext context,
+  String? layoutId,
+);
 typedef BreakpointsListener = void Function(
     BuildContext context, Breakpoint breakpoint);
 
@@ -148,10 +151,22 @@ class Codelessly {
   /// If it is null, it means it has not yet been initialized.
   CloudDatabase? get cloudDatabase => dataManager.cloudDatabase;
 
+  String? _currentNavigatedLayoutId;
+
+  String? get currentNavigatedLayoutId => _currentNavigatedLayoutId;
+
   final Map<String, NavigationListener> _navigationListeners = {};
 
   final Map<String, BreakpointsListener> _breakpointsListeners = {};
 
+  final StreamController<BrightnessModel> _systemUIBrightnessStreamController =
+      StreamController.broadcast()..add(BrightnessModel.system);
+
+  /// A stream that produces events whenever a canvas node issues a system UI
+  /// brightness change. Used for simulation purposes.
+  Stream<BrightnessModel> get systemUIBrightnessStream =>
+      _systemUIBrightnessStreamController.stream;
+
   /// Creates a new instance of [Codelessly].
   Codelessly({
     CodelesslyConfig? config,
@@ -238,6 +253,8 @@ class Codelessly {
     _navigationListeners.clear();
     _breakpointsListeners.clear();
     _client.close();
+
+    _systemUIBrightnessStreamController.close();
   }
 
   /// Resets the state of the SDK. This is useful for resetting the data without
@@ -746,9 +763,11 @@ class Codelessly {
   /// Calls navigation listeners when navigation happens.
   /// Provided [context] must be of the destination widget. This context
   /// can be used to retrieve new [CodelesslyContext].
-  void notifyNavigationListeners(BuildContext context) {
+  void notifyNavigationListeners(BuildContext context, String? layoutId) {
+    _currentNavigatedLayoutId = layoutId;
+
     for (final listener in [..._navigationListeners.values]) {
-      listener(context);
+      listener(context, layoutId);
     }
   }
 
@@ -780,4 +799,10 @@ class Codelessly {
   void removeBreakpointsListener(String label) {
     _breakpointsListeners.remove(label);
   }
+
+  /// Sets the system UI brightness to the provided [brightness]. Used for
+  /// simulation purposes.
+  void setSystemUIBrightness(BrightnessModel brightness) {
+    _systemUIBrightnessStreamController.add(brightness);
+  }
 }

lib/src/functions/functions_repository.dart

@@ -243,11 +243,10 @@ class FunctionsRepository {
     _log('Performing navigation action with params: $parsedParams');
 
     final Codelessly codelessly = context.read<Codelessly>();
+    final String myLayoutId = codelessly.currentNavigatedLayoutId!;
+
     if (action.navigationType == NavigationType.pop) {
       await Navigator.maybePop(context, parsedParams);
-      if (context.mounted) {
-        codelessly.notifyNavigationListeners(context);
-      }
     } else {
       // Check if a layout exists for the action's [destinationId].
       final String? layoutId = codelessly
@@ -292,8 +291,11 @@ class FunctionsRepository {
             ),
           ),
         );
+        // Notify navigation listeners that this screen has been navigated back
+        // to, because the Navigator.push future has completed and came
+        // back to this screen.
         if (context.mounted) {
-          codelessly.notifyNavigationListeners(context);
+          codelessly.notifyNavigationListeners(context, myLayoutId);
         }
       } else if (action.navigationType == NavigationType.replace) {
         await Navigator.pushReplacement(
@@ -305,8 +307,12 @@ class FunctionsRepository {
             ),
           ),
         );
+
+        // Notify navigation listeners that this screen has been navigated back
+        // to, because the Navigator.push future has completed and came
+        // back to this screen.
         if (context.mounted) {
-          codelessly.notifyNavigationListeners(context);
+          codelessly.notifyNavigationListeners(context, myLayoutId);
         }
       }
     }
@@ -322,6 +328,8 @@ class FunctionsRepository {
     _log('Performing show dialog action with params: $parsedParams');
 
     final Codelessly codelessly = context.read<Codelessly>();
+    final myLayoutId = codelessly.currentNavigatedLayoutId!;
+
     // Check if a layout exists for the action's [destinationId].
     final String? layoutId = codelessly.dataManager.publishModel?.layouts.values
         .firstWhereOrNull(
@@ -361,7 +369,7 @@ class FunctionsRepository {
       ),
     );
     if (context.mounted) {
-      codelessly.notifyNavigationListeners(context);
+      codelessly.notifyNavigationListeners(context, myLayoutId);
     }
   }
 

lib/src/transformers/node_transformer.dart

@@ -83,6 +83,9 @@ class WidgetBuildSettings extends BuildSettings {
   /// constraints, etc.
   final bool buildRawWidget;
 
+  /// Determines the brightness of the current screen for the system UI.
+  final BrightnessModel brightness;
+
   /// Creates a [WidgetBuildSettings] instance.
   const WidgetBuildSettings({
     super.withOpacity,
@@ -99,6 +102,7 @@ class WidgetBuildSettings extends BuildSettings {
     this.nullSubstitutionMode = NullSubstitutionMode.noChange,
     this.replaceVariablesWithSymbols = false,
     this.buildRawWidget = false,
+    this.brightness = BrightnessModel.system,
   });
 
   /// Creates a copy of this [WidgetBuildSettings] instance.
@@ -117,6 +121,7 @@ class WidgetBuildSettings extends BuildSettings {
     NullSubstitutionMode? nullSubstitutionMode,
     bool? replaceVariablesWithSymbols,
     bool? buildRawWidget,
+    BrightnessModel? brightness,
   }) {
     return WidgetBuildSettings(
       withOpacity: withOpacity ?? this.withOpacity,
@@ -134,6 +139,7 @@ class WidgetBuildSettings extends BuildSettings {
       replaceVariablesWithSymbols:
           replaceVariablesWithSymbols ?? this.replaceVariablesWithSymbols,
       buildRawWidget: buildRawWidget ?? this.buildRawWidget,
+      brightness: brightness ?? this.brightness,
     );
   }
 
@@ -144,6 +150,7 @@ class WidgetBuildSettings extends BuildSettings {
         nullSubstitutionMode,
         replaceVariablesWithSymbols,
         buildRawWidget,
+        brightness,
       ];
 }
 

lib/src/transformers/node_transformers/passive_canvas_transformer.dart

@@ -2,6 +2,8 @@ import 'dart:async';
 
 import 'package:codelessly_api/codelessly_api.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:provider/provider.dart';
 
 import '../../../codelessly_sdk.dart';
 import '../../functions/functions_repository.dart';
@@ -38,6 +40,7 @@ class PassiveCanvasTransformer extends NodeWidgetTransformer<CanvasNode> {
         settings: settings.copyWith(
           // Passes through to build a PreferredSizeWidget directly.
           buildRawWidget: true,
+          brightness: node.properties.brightness,
         ),
       );
 
@@ -51,7 +54,9 @@ class PassiveCanvasTransformer extends NodeWidgetTransformer<CanvasNode> {
       final Widget appBarChild = manager.buildWidgetFromNode(
         appBarNode,
         context,
-        settings: settings,
+        settings: settings.copyWith(
+          brightness: node.properties.brightness,
+        ),
       );
 
       return PreferredSize(
@@ -386,6 +391,39 @@ class _PassiveCanvasWidgetState extends State<PassiveCanvasWidget> {
 
   bool didPerformOnLoadActions = false;
 
+  Codelessly? codelessly;
+
+  @override
+  void initState() {
+    super.initState();
+
+    codelessly = context.read<Codelessly>();
+    final String? myLayoutId = codelessly!
+        .dataManager.publishModel?.layouts.dataMap.entries
+        .firstWhere((entry) {
+      return entry.value.canvasIds.contains(widget.node.id);
+    }).key;
+
+    // Set the system UI brightness to the canvas brightness.
+    codelessly!.setSystemUIBrightness(widget.node.properties.brightness);
+
+    // Listen for navigation events to update the system UI brightness back
+    // again, such as if this canvas was navigated away from, but then the view
+    // pops and goes back to this canvas.
+    codelessly!.addNavigationListener('canvas-${widget.node.id}',
+        (event, layoutId) {
+      if (myLayoutId == layoutId) {
+        codelessly!.setSystemUIBrightness(widget.node.properties.brightness);
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    codelessly?.removeNavigationListener('canvas-${widget.node.id}');
+    super.dispose();
+  }
+
   @override
   void didUpdateWidget(covariant PassiveCanvasWidget oldWidget) {
     super.didUpdateWidget(oldWidget);
@@ -456,5 +494,26 @@ class _PassiveCanvasWidgetState extends State<PassiveCanvasWidget> {
   }
 
   @override
-  Widget build(BuildContext context) => widget.builder(context);
+  Widget build(BuildContext context) {
+    final Brightness brightness =
+        widget.node.properties.brightness.toFlutterBrightness(context);
+    final SystemUiOverlayStyle? systemOverlayStyle =
+        Theme.of(context).appBarTheme.systemOverlayStyle;
+    return Theme(
+      data: Theme.of(context).copyWith(
+        appBarTheme: systemOverlayStyle != null
+            ? null
+            : Theme.of(context).appBarTheme.copyWith(
+                  systemOverlayStyle: SystemUiOverlayStyle(
+                    statusBarColor: brightness == Brightness.light
+                        ? Colors.black
+                        : Colors.white,
+                    statusBarIconBrightness: brightness,
+                    statusBarBrightness: brightness,
+                  ),
+                ),
+      ),
+      child: widget.builder(context),
+    );
+  }
 }

lib/src/ui/codelessly_widget.dart

@@ -623,6 +623,8 @@ class _CodelesslyWidgetState extends State<CodelesslyWidget> {
       ],
       child: _NavigationBuilder(
           key: ValueKey(_effectiveController.layoutID),
+          // TODO(Saad): Ensure this is not null on first load in non-simulated cases.
+          layoutId: _effectiveController.layoutID,
           builder: (context) {
             return StreamBuilder<CStatus>(
               stream: codelessly.statusStream,
@@ -662,8 +664,13 @@ class _CodelesslyWidgetState extends State<CodelesslyWidget> {
 
 class _NavigationBuilder extends StatefulWidget {
   final WidgetBuilder builder;
+  final String? layoutId;
 
-  const _NavigationBuilder({super.key, required this.builder});
+  const _NavigationBuilder({
+    super.key,
+    required this.builder,
+    required this.layoutId,
+  });
 
   @override
   State<_NavigationBuilder> createState() => _NavigationBuilderState();
@@ -675,7 +682,10 @@ class _NavigationBuilderState extends State<_NavigationBuilder> {
     super.initState();
     SchedulerBinding.instance.addPostFrameCallback((timeStamp) {
       if (!context.mounted) return;
-      context.read<Codelessly>().notifyNavigationListeners(context);
+      context.read<Codelessly>().notifyNavigationListeners(
+            context,
+            widget.layoutId,
+          );
     });
   }
 

lib/src/utils/extensions.dart

@@ -330,6 +330,19 @@ extension ColorHelper on flutter.Color {
       );
 }
 
+extension BrightnessModelHelper on BrightnessModel {
+  Brightness toFlutterBrightness(BuildContext context) {
+    switch (this) {
+      case BrightnessModel.dark:
+        return Brightness.dark;
+      case BrightnessModel.light:
+        return Brightness.light;
+      case BrightnessModel.system:
+        return MediaQuery.of(context).platformBrightness;
+    }
+  }
+}
+
 extension ColorRGBAHelper on ColorRGBA {
   Color toFlutterColor() {
     var ir = (r * 255).toInt();