[question] Background color not changing properly

[AmanRajSinghMourya]

So I have passed my color scheme and as u can see the 1st image, the app is in light mode and then when I switch to dark mode the main body color changes but the bottom bar and the app bar color is consistent

I am not able to understand why this is happening I use the same color scheme throughout the app it works perfectly.

This below is the code where I provide the same color backgroundBase to each widget but its changing for some and not changing for some>

I am missing something. Please let me know. Thank you!!

class _NewImageEditorState extends State<NewImageEditor> {
  final _mainEditorBarKey = GlobalKey<ImageEditorMainBottomBarState>();
  final editorKey = GlobalKey<ProImageEditorState>();
  final _logger = Logger("ImageEditor");

  Future<void> saveImage(Uint8List? bytes) async {
    if (bytes == null) return;

    final dialog = createProgressDialog(context, S.of(context).saving);
    await dialog.show();

    debugPrint("Image saved with size: ${bytes.length} bytes");
    final DateTime start = DateTime.now();

    final ui.Image decodedResult = await decodeImageFromList(bytes);
    final result = await FlutterImageCompress.compressWithList(
      bytes,
      minWidth: decodedResult.width,
      minHeight: decodedResult.height,
    );
    _logger.info('Size after compression = ${result.length}');
    final Duration diff = DateTime.now().difference(start);
    _logger.info('image_editor time : $diff');

    try {
      final fileName =
          path.basenameWithoutExtension(widget.originalFile.title!) +
              "_edited_" +
              DateTime.now().microsecondsSinceEpoch.toString() +
              ".JPEG";
      //Disabling notifications for assets changing to insert the file into
      //files db before triggering a sync.
      await PhotoManager.stopChangeNotify();
      final AssetEntity newAsset =
          await (PhotoManager.editor.saveImage(result, filename: fileName));
      final newFile = await ente.EnteFile.fromAsset(
        widget.originalFile.deviceFolder ?? '',
        newAsset,
      );

      newFile.creationTime = widget.originalFile.creationTime;
      newFile.collectionID = widget.originalFile.collectionID;
      newFile.location = widget.originalFile.location;
      if (!newFile.hasLocation && widget.originalFile.localID != null) {
        final assetEntity = await widget.originalFile.getAsset;
        if (assetEntity != null) {
          final latLong = await assetEntity.latlngAsync();
          newFile.location = Location(
            latitude: latLong.latitude,
            longitude: latLong.longitude,
          );
        }
      }
      newFile.generatedID = await FilesDB.instance.insertAndGetId(newFile);
      Bus.instance.fire(LocalPhotosUpdatedEvent([newFile], source: "editSave"));
      unawaited(SyncService.instance.sync());
      showShortToast(context, S.of(context).editsSaved);
      _logger.info("Original file " + widget.originalFile.toString());
      _logger.info("Saved edits to file " + newFile.toString());
      final files = widget.detailPageConfig.files;

      // the index could be -1 if the files fetched doesn't contain the newly
      // edited files
      int selectionIndex =
          files.indexWhere((file) => file.generatedID == newFile.generatedID);
      if (selectionIndex == -1) {
        files.add(newFile);
        selectionIndex = files.length - 1;
      }
      await dialog.hide();
      replacePage(
        context,
        DetailPage(
          widget.detailPageConfig.copyWith(
            files: files,
            selectedIndex: min(selectionIndex, files.length - 1),
          ),
        ),
      );
    } catch (e, s) {
      await dialog.hide();
      showToast(context, S.of(context).oopsCouldNotSaveEdits);
      _logger.severe(e, s);
    } finally {
      await PhotoManager.startChangeNotify();
    }
  }

  Future<void> _showExitConfirmationDialog(BuildContext context) async {
    final actionResult = await showActionSheet(
      context: context,
      buttons: [
        ButtonWidget(
          labelText: S.of(context).yesDiscardChanges,
          buttonType: ButtonType.critical,
          buttonSize: ButtonSize.large,
          shouldStickToDarkTheme: true,
          buttonAction: ButtonAction.first,
          isInAlert: true,
        ),
        ButtonWidget(
          labelText: S.of(context).no,
          buttonType: ButtonType.secondary,
          buttonSize: ButtonSize.large,
          buttonAction: ButtonAction.second,
          shouldStickToDarkTheme: true,
          isInAlert: true,
        ),
      ],
      body: S.of(context).doYouWantToDiscardTheEditsYouHaveMade,
      actionSheetType: ActionSheetType.defaultActionSheet,
    );
    if (actionResult?.action != null &&
        actionResult!.action == ButtonAction.first) {
      replacePage(context, DetailPage(widget.detailPageConfig));
    }
  }

  @override
  Widget build(BuildContext context) {
    final colorScheme = getEnteColorScheme(context);
    return Scaffold(
      body: ProImageEditor.file(
        key: editorKey,
        widget.file,
        callbacks: ProImageEditorCallbacks(
          mainEditorCallbacks: MainEditorCallbacks(
            onStartCloseSubEditor: (value) {
              _mainEditorBarKey.currentState?.setState(() {});
            },
          ),
        ),
        configs: ProImageEditorConfigs(
          layerInteraction: const LayerInteractionConfigs(
            hideToolbarOnInteraction: false,
          ),
          theme: ThemeData(
            scaffoldBackgroundColor: colorScheme.backgroundBase,
          ),
          mainEditor: MainEditorConfigs(
            style: MainEditorStyle(
              subEditorPage: SubEditorPageStyle(
                enforceSizeFromMainEditor: true,
              ),
              appBarColor: colorScheme.blurTextBase,
              background: colorScheme.backgroundBase,
              bottomBarBackground: colorScheme.backgroundBase,
              bottomBarColor: colorScheme.backgroundBase,
              appBarBackground: colorScheme.backgroundBase,
            ),
            widgets: MainEditorWidgets(
              removeLayerArea: (removeAreaKey, editor, rebuildStream) {
                return Align(
                  alignment: Alignment.bottomCenter,
                  child: StreamBuilder(
                    stream: rebuildStream,
                    builder: (_, __) {
                      final isHovered =
                          editor.layerInteractionManager.hoverRemoveBtn;

                      return AnimatedContainer(
                        key: removeAreaKey,
                        duration: const Duration(milliseconds: 150),
                        height: 56,
                        width: 56,
                        margin: const EdgeInsets.only(bottom: 24),
                        decoration: BoxDecoration(
                          color: isHovered
                              ? const Color.fromARGB(255, 255, 197, 197)
                              : const Color.fromARGB(255, 255, 255, 255),
                          shape: BoxShape.circle,
                        ),
                        padding: const EdgeInsets.all(12),
                        child: const Center(
                          child: Icon(
                            Icons.delete_forever_outlined,
                            size: 28,
                            color: Color(0xFFF44336),
                          ),
                        ),
                      );
                    },
                  ),
                );
              },
              appBar: (editor, rebuildStream) {
                return ReactiveCustomAppbar(
                  builder: (context) {
                    return ImageEditorAppBar(
                      enableRedo: editor.canRedo,
                      enableUndo: editor.canUndo,
                      key: const Key('image_editor_app_bar'),
                      redo: () => editor.redoAction(),
                      undo: () => editor.undoAction(),
                      configs: editor.configs,
                      done: () async {
                        final Uint8List bytes =
                            await editorKey.currentState!.captureEditorImage();
                        await saveImage(bytes);
                      },
                      close: () {
                        _showExitConfirmationDialog(context);
                      },
                      isMainEditor: true,
                    );
                  },
                  stream: rebuildStream,
                );
              },
              bottomBar: (editor, rebuildStream, key) => ReactiveCustomWidget(
                key: key,
                builder: (context) {
                  return ImageEditorMainBottomBar(
                    key: _mainEditorBarKey,
                    editor: editor,
                    configs: editor.configs,
                    callbacks: editor.callbacks,
                  );
                },
                stream: rebuildStream,
              ),
            ),
          ),
          paintEditor: PaintEditorConfigs(
            style: PaintEditorStyle(
              background: colorScheme.backgroundBase,
              initialStrokeWidth: 5,
            ),
            widgets: PaintEditorWidgets(
              appBar: (editor, rebuildStream) {
                return ReactiveCustomAppbar(
                  builder: (context) {
                    return ImageEditorAppBar(
                      enableRedo: editor.canRedo,
                      enableUndo: editor.canUndo,
                      key: const Key('image_editor_app_bar'),
                      redo: () => editor.redoAction(),
                      undo: () => editor.undoAction(),
                      configs: editor.configs,
                      done: () => editor.done(),
                      close: () => editor.close(),
                    );
                  },
                  stream: rebuildStream,
                );
              },
              colorPicker:
                  (paintEditor, rebuildStream, currentColor, setColor) => null,
              bottomBar: (editorState, rebuildStream) {
                return ReactiveCustomWidget(
                  builder: (context) {
                    return ImageEditorPaintBar(
                      configs: editorState.configs,
                      callbacks: editorState.callbacks,
                      editor: editorState,
                      i18nColor: 'Color',
                    );
                  },
                  stream: rebuildStream,
                );
              },
            ),
          ),
          textEditor: TextEditorConfigs(
            canToggleTextAlign: true,
            customTextStyles: [
              GoogleFonts.inter(),
              GoogleFonts.giveYouGlory(),
              GoogleFonts.dmSerifText(),
              GoogleFonts.comicNeue(),
            ],
            style: const TextEditorStyle(
              textFieldMargin: EdgeInsets.only(top: kToolbarHeight),
            ),
            widgets: TextEditorWidgets(
              appBar: (textEditor, rebuildStream) => null,
              colorPicker:
                  (textEditor, rebuildStream, currentColor, setColor) => null,
              bottomBar: (editorState, rebuildStream) {
                return ReactiveCustomWidget(
                  builder: (context) {
                    return ImageEditorTextBar(
                      configs: editorState.configs,
                      callbacks: editorState.callbacks,
                      editor: editorState,
                    );
                  },
                  stream: rebuildStream,
                );
              },
            ),
          ),
          cropRotateEditor: CropRotateEditorConfigs(
            style: CropRotateEditorStyle(
              cropCornerColor: Color(0xFFFFFFFF),
              cropCornerThickness: 4,
              background: colorScheme.backgroundBase,
            ),
            widgets: CropRotateEditorWidgets(
              appBar: (editor, rebuildStream) {
                return ReactiveCustomAppbar(
                  builder: (context) {
                    return ImageEditorAppBar(
                      key: const Key('image_editor_app_bar'),
                      configs: editor.configs,
                      done: () => editor.done(),
                      close: () => editor.close(),
                      enableRedo: editor.canRedo,
                      enableUndo: editor.canUndo,
                      redo: () => editor.redoAction(),
                      undo: () => editor.undoAction(),
                    );
                  },
                  stream: rebuildStream,
                );
              },
              bottomBar: (cropRotateEditor, rebuildStream) =>
                  ReactiveCustomWidget(
                stream: rebuildStream,
                builder: (_) => ImageEditorCropRotateBar(
                  configs: cropRotateEditor.configs,
                  callbacks: cropRotateEditor.callbacks,
                  editor: cropRotateEditor,
                ),
              ),
            ),
          ),
          filterEditor: FilterEditorConfigs(
            fadeInUpDuration: fadeInDuration,
            fadeInUpStaggerDelayDuration: fadeInDelay,
            style: const FilterEditorStyle(
              filterListSpacing: 7,
            ),
            widgets: FilterEditorWidgets(
              slider: (
                editorState,
                rebuildStream,
                value,
                onChanged,
                onChangeEnd,
              ) =>
                  ReactiveCustomWidget(
                builder: (context) {
                  return const SizedBox.shrink();
                },
                stream: rebuildStream,
              ),
              filterButton: (
                filter,
                isSelected,
                scaleFactor,
                onSelectFilter,
                editorImage,
                filterKey,
              ) {
                return ImageEditorFilterBar(
                  filterModel: filter,
                  isSelected: isSelected,
                  onSelectFilter: onSelectFilter,
                  editorImage: editorImage,
                  filterKey: filterKey,
                );
              },
              appBar: (editor, rebuildStream) {
                return ReactiveCustomAppbar(
                  builder: (context) {
                    return ImageEditorAppBar(
                      key: const Key('image_editor_app_bar'),
                      configs: editor.configs,
                      done: () => editor.done(),
                      close: () => editor.close(),
                    );
                  },
                  stream: rebuildStream,
                );
              },
            ),
          ),
          tuneEditor: TuneEditorConfigs(
            style: TuneEditorStyle(
              background: colorScheme.backgroundBase,
            ),
            widgets: TuneEditorWidgets(
              appBar: (editor, rebuildStream) {
                return ReactiveCustomAppbar(
                  builder: (context) {
                    return ImageEditorAppBar(
                      enableRedo: editor.canRedo,
                      enableUndo: editor.canUndo,
                      key: const Key('image_editor_app_bar'),
                      redo: () => editor.redo(),
                      undo: () => editor.undo(),
                      configs: editor.configs,
                      done: () => editor.done(),
                      close: () => editor.close(),
                    );
                  },
                  stream: rebuildStream,
                );
              },
              bottomBar: (editorState, rebuildStream) {
                return ReactiveCustomWidget(
                  builder: (context) {
                    return ImageEditorTuneBar(
                      configs: editorState.configs,
                      callbacks: editorState.callbacks,
                      editor: editorState,
                    );
                  },
                  stream: rebuildStream,
                );
              },
            ),
          ),
          blurEditor: const BlurEditorConfigs(
            enabled: false,
          ),
          emojiEditor: EmojiEditorConfigs(
            icons: const EmojiEditorIcons(),
            style: EmojiEditorStyle(
              backgroundColor: colorScheme.backgroundBase,
              emojiViewConfig: const EmojiViewConfig(
                gridPadding: EdgeInsets.zero,
                horizontalSpacing: 0,
                verticalSpacing: 0,
                recentsLimit: 40,
                loadingIndicator: Center(child: CircularProgressIndicator()),
                replaceEmojiOnLimitExceed: false,
              ),
              bottomActionBarConfig: const BottomActionBarConfig(
                enabled: false,
              ),
            ),
          ),
          stickerEditor: const StickerEditorConfigs(enabled: false),
        ),
      ),
    );
  }
}

Screenshot	Screenshot

[hm21]

The problem is that you're using custom widgets, which means all style configurations for that part won’t work because you're completely overriding the widget. What you need to do now is directly apply the color to your AppBar/BottomBar.

For example:

appBar: (editor, rebuildStream) {
      return ReactiveCustomAppbar(
        builder: (context) {
          return ImageEditorAppBar(
            // HERE: Add your color directly to your widget.
            background: colorScheme.backgroundBase,
            enableRedo: editor.canRedo,
            enableUndo: editor.canUndo,
            key: const Key('image_editor_app_bar'),
            redo: () => editor.redoAction(),
            undo: () => editor.undoAction(),
            configs: editor.configs,
            done: () async {
              final Uint8List bytes =
                  await editorKey.currentState!.captureEditorImage();
              await saveImage(bytes);
            },
            close: () {
              _showExitConfirmationDialog(context);
            },
            isMainEditor: true,
          );
        },
        stream: rebuildStream,
      );
    },