Texteditor overflow + minor bugs

[AmanRajSinghMourya]

I am facing this issue in the text editor where the text editor is taking the image up when the keyboard is active
Also while typing it shows the next line with background so not sure why this is happening

import "dart:async";
import "dart:io";
import "dart:math";
import "dart:typed_data";
import 'dart:ui' as ui show Image;

import 'package:flutter/material.dart';
import "package:flutter_image_compress/flutter_image_compress.dart";
import "package:flutter_svg/svg.dart";
import "package:google_fonts/google_fonts.dart";
import "package:logging/logging.dart";
import 'package:path/path.dart' as path;
import "package:photo_manager/photo_manager.dart";
import "package:photos/core/event_bus.dart";
import "package:photos/db/files_db.dart";
import "package:photos/ente_theme_data.dart";
import "package:photos/events/local_photos_updated_event.dart";
import "package:photos/generated/l10n.dart";
import 'package:photos/models/file/file.dart' as ente;
import "package:photos/models/location/location.dart";
import "package:photos/services/sync/sync_service.dart";
import "package:photos/theme/ente_theme.dart";
import "package:photos/ui/components/action_sheet_widget.dart";
import "package:photos/ui/components/buttons/button_widget.dart";
import "package:photos/ui/components/models/button_type.dart";
import "package:photos/ui/notification/toast.dart";
import "package:photos/ui/tools/editor/image_editor/image_editor_app_bar.dart";
import "package:photos/ui/tools/editor/image_editor/image_editor_constants.dart";
import "package:photos/ui/tools/editor/image_editor/image_editor_crop_rotate.dart";
import "package:photos/ui/tools/editor/image_editor/image_editor_filter_bar.dart";
import "package:photos/ui/tools/editor/image_editor/image_editor_main_bottom_bar.dart";
import "package:photos/ui/tools/editor/image_editor/image_editor_paint_bar.dart";
import "package:photos/ui/tools/editor/image_editor/image_editor_text_bar.dart";
import "package:photos/ui/tools/editor/image_editor/image_editor_tune_bar.dart";
import "package:photos/ui/viewer/file/detail_page.dart";
import "package:photos/utils/dialog_util.dart";
import "package:photos/utils/navigation_util.dart";
import 'package:pro_image_editor/pro_image_editor.dart';

class NewImageEditor extends StatefulWidget {
  final ente.EnteFile originalFile;
  final File file;
  final DetailPageConfiguration detailPageConfig;

  const NewImageEditor({
    super.key,
    required this.file,
    required this.originalFile,
    required this.detailPageConfig,
  });

  @override
  State<NewImageEditor> createState() => _NewImageEditorState();
}

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 isLightMode = Theme.of(context).brightness == Brightness.light;
    final colorScheme = getEnteColorScheme(context);
    final textTheme = getEnteTextTheme(context);
    return Scaffold(
      backgroundColor: colorScheme.backgroundBase,
      body: PopScope(
        canPop: false,
        onPopInvoked: (didPop) {
          if (didPop) return;
          editorKey.currentState?.disablePopScope = true;
          _showExitConfirmationDialog(context);
        },
        child: ProImageEditor.file(
          key: editorKey,
          widget.file,
          callbacks: ProImageEditorCallbacks(
            onCloseEditor: () {
              editorKey.currentState?.disablePopScope = true;
              _showExitConfirmationDialog(context);
            },
            mainEditorCallbacks: MainEditorCallbacks(
              onStartCloseSubEditor: (value) {
                _mainEditorBarKey.currentState?.setState(() {});
              },
              onPopInvoked: (didPop, result) {
                editorKey.currentState?.disablePopScope = false;
              },
            ),
          ),
          configs: ProImageEditorConfigs(
            imageGeneration: const ImageGenerationConfigs(
              jpegQuality: 100,
              generateInsideSeparateThread: true,
              pngLevel: 0,
            ),
            layerInteraction: const LayerInteractionConfigs(
              hideToolbarOnInteraction: false,
            ),
            theme: ThemeData(
              scaffoldBackgroundColor: colorScheme.backgroundBase,
              appBarTheme: AppBarTheme(
                titleTextStyle: textTheme.body,
                backgroundColor: colorScheme.backgroundBase,
              ),
              bottomAppBarTheme: BottomAppBarTheme(
                color: colorScheme.backgroundBase,
              ),
              brightness: isLightMode ? Brightness.light : Brightness.dark,
            ),
            mainEditor: MainEditorConfigs(
              enableCloseButton: false,
              style: MainEditorStyle(
                appBarBackground: colorScheme.backgroundBase,
                background: colorScheme.backgroundBase,
                bottomBarBackground: 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
                                ? colorScheme.warning400.withOpacity(0.8)
                                : Colors.white,
                            shape: BoxShape.circle,
                          ),
                          padding: const EdgeInsets.all(12),
                          child: Center(
                            child: SvgPicture.asset(
                              "assets/image-editor/image-editor-delete.svg",
                              colorFilter: ColorFilter.mode(
                                isHovered
                                    ? Colors.white
                                    : colorScheme.warning400.withOpacity(0.8),
                                BlendMode.srcIn,
                              ),
                            ),
                          ),
                        );
                      },
                    ),
                  );
                },
                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(
              canToggleBackgroundMode: true,
              canToggleTextAlign: true,
              customTextStyles: [
                GoogleFonts.inter(),
                GoogleFonts.giveYouGlory(),
                GoogleFonts.dmSerifText(),
                GoogleFonts.comicNeue(),
              ],
              style: const TextEditorStyle(
                background: Colors.transparent,
                textFieldMargin: EdgeInsets.only(top: kToolbarHeight),
              ),
              widgets: TextEditorWidgets(
                appBar: (textEditor, rebuildStream) => ReactiveCustomAppbar(
                  builder: (context) {
                    return ImageEditorAppBar(
                      key: const Key('image_editor_app_bar'),
                      configs: textEditor.configs,
                      done: () => textEditor.done(),
                      close: () => textEditor.close(),
                    );
                  },
                  stream: rebuildStream,
                ),
                bodyItems: (editor, rebuildStream) {
                  return [
                    ReactiveCustomWidget(
                      builder: (context) {
                        return Positioned.fill(
                          child: GestureDetector(
                            onTap: () {},
                            child: Container(
                              color: Colors.transparent,
                            ),
                          ),
                        );
                      },
                      stream: rebuildStream,
                    ),
                  ];
                },
                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(
                background: colorScheme.backgroundBase,
                cropCornerColor:
                    Theme.of(context).colorScheme.imageEditorPrimaryColor,
              ),
              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: FilterEditorStyle(
                filterListSpacing: 7,
                background: colorScheme.backgroundBase,
              ),
              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),
          ),
        ),
      ),
    );
  }
}

Text editor code

import 'package:flutter/material.dart';
import "package:flutter_svg/svg.dart";
import "package:photos/theme/ente_theme.dart";
import "package:photos/ui/tools/editor/image_editor/circular_icon_button.dart";
import "package:photos/ui/tools/editor/image_editor/image_editor_color_picker.dart";
import "package:photos/ui/tools/editor/image_editor/image_editor_configs_mixin.dart";
import "package:photos/ui/tools/editor/image_editor/image_editor_constants.dart";
import "package:pro_image_editor/mixins/converted_configs.dart";
import 'package:pro_image_editor/pro_image_editor.dart';

class ImageEditorTextBar extends StatefulWidget with SimpleConfigsAccess {
  const ImageEditorTextBar({
    super.key,
    required this.configs,
    required this.callbacks,
    required this.editor,
  });

  final TextEditorState editor;

  @override
  final ProImageEditorConfigs configs;
  @override
  final ProImageEditorCallbacks callbacks;

  @override
  State<ImageEditorTextBar> createState() => _ImageEditorTextBarState();
}

class _ImageEditorTextBarState extends State<ImageEditorTextBar>
    with ImageEditorConvertedConfigs, SimpleConfigsAccessState {
  int selectedActionIndex = -1;
  double colorSliderValue = 0.5;

  void _selectAction(int index) {
    setState(() {
      selectedActionIndex = selectedActionIndex == index ? -1 : index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            _buildFunctions(constraints),
          ],
        );
      },
    );
  }

  Widget _buildFunctions(BoxConstraints constraints) {
    return BottomAppBar(
      padding: EdgeInsets.zero,
      height: editorBottomBarHeight,
      child: FadeInUp(
        duration: fadeInDuration,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            _buildMainActionButtons(),
            _buildHelperWidget(),
          ],
        ),
      ),
    );
  }

  Widget _buildMainActionButtons() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        CircularIconButton(
          svgPath: "assets/image-editor/image-editor-text-color.svg",
          label: "Color",
          isSelected: selectedActionIndex == 0,
          onTap: () {
            _selectAction(0);
          },
        ),
        CircularIconButton(
          svgPath: "assets/image-editor/image-editor-text-font.svg",
          label: "Font",
          isSelected: selectedActionIndex == 1,
          onTap: () {
            _selectAction(1);
          },
        ),
        CircularIconButton(
          svgPath: "assets/image-editor/image-editor-text-background.svg",
          label: "Background",
          isSelected: selectedActionIndex == 2,
          onTap: () {
            setState(() {
              selectedActionIndex = 2;
            });
          },
        ),
        CircularIconButton(
          svgPath: "assets/image-editor/image-editor-text-align-left.svg",
          label: "Align",
          isSelected: selectedActionIndex == 3,
          onTap: () {
            setState(() {
              selectedActionIndex = 3;
            });
          },
        ),
      ],
    );
  }

  Widget _buildHelperWidget() {
    return AnimatedSwitcher(
      duration: const Duration(milliseconds: 300),
      switchInCurve: Curves.easeInOut,
      switchOutCurve: Curves.easeInOut,
      child: switch (selectedActionIndex) {
        0 => ImageEditorColorPicker(
            value: colorSliderValue,
            onChanged: (value) {
              setState(() {
                colorSliderValue = value;
              });
              final hue = value * 360;
              final color = HSVColor.fromAHSV(1.0, hue, 1.0, 1.0).toColor();
              widget.editor.primaryColor = color;
            },
          ),
        1 => _FontPickerWidget(editor: widget.editor),
        2 => _BackgroundPickerWidget(editor: widget.editor),
        3 => _AlignPickerWidget(editor: widget.editor),
        _ => const SizedBox.shrink(),
      },
    );
  }
}

class _FontPickerWidget extends StatelessWidget {
  final TextEditorState editor;

  const _FontPickerWidget({required this.editor});

  @override
  Widget build(BuildContext context) {
    final colorScheme = getEnteColorScheme(context);
    if (editor.textEditorConfigs.customTextStyles == null) {
      return const SizedBox.shrink();
    }

    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: editor.textEditorConfigs.customTextStyles!
          .asMap()
          .entries
          .map((entry) {
        final item = entry.value;
        final selected = editor.selectedTextStyle;
        final bool isSelected = selected.hashCode == item.hashCode;

        return Padding(
          padding: const EdgeInsets.only(right: 12),
          child: GestureDetector(
            onTap: () {
              editor.setTextStyle(item);
            },
            child: Container(
              height: 40,
              width: 48,
              decoration: BoxDecoration(
                color: isSelected
                    ? colorScheme.fillBasePressed
                    : colorScheme.backgroundElevated2,
                borderRadius: BorderRadius.circular(25),
              ),
              child: Center(
                child: Text(
                  'Aa',
                  style: item.copyWith(
                    color: isSelected
                        ? colorScheme.backdropBase
                        : colorScheme.tabIcon,
                  ),
                ),
              ),
            ),
          ),
        );
      }).toList(),
    );
  }
}

class _BackgroundPickerWidget extends StatelessWidget {
  final TextEditorState editor;

  const _BackgroundPickerWidget({required this.editor});

  @override
  Widget build(BuildContext context) {
    final colorScheme = getEnteColorScheme(context);
    final isLightMode = Theme.of(context).brightness == Brightness.light;
    final backgroundStyles = {
      LayerBackgroundMode.background: {
        'text': 'Aa',
        'selectedBackgroundColor':
            isLightMode ? colorScheme.fillFaint : Colors.white,
        'backgroundColor': colorScheme.backgroundElevated2,
        'border': null,
        'textColor': Colors.white,
        'selectedInnerBackgroundColor': Colors.black,
        'innerBackgroundColor': Colors.transparent,
      },
      LayerBackgroundMode.backgroundAndColor: {
        'text': 'Aa',
        'selectedBackgroundColor':
            isLightMode ? colorScheme.fillFaint : Colors.white,
        'backgroundColor': colorScheme.backgroundElevated2,
        'border': null,
        'textColor': Colors.black,
        'selectedInnerBackgroundColor': Colors.transparent,
        'innerBackgroundColor': Colors.transparent,
      },
      LayerBackgroundMode.backgroundAndColorWithOpacity: {
        'text': 'Aa',
        'selectedBackgroundColor':
            isLightMode ? colorScheme.fillFaint : Colors.white,
        'backgroundColor': colorScheme.backgroundElevated2,
        'border': null,
        'textColor': Colors.black,
        'selectedInnerBackgroundColor': Colors.black.withOpacity(0.11),
        'innerBackgroundColor': isLightMode
            ? Colors.black.withOpacity(0.11)
            : Colors.white.withOpacity(0.11),
      },
      LayerBackgroundMode.onlyColor: {
        'text': 'Aa',
        'selectedBackgroundColor':
            isLightMode ? colorScheme.fillFaint : Colors.black,
        'backgroundColor': colorScheme.backgroundElevated2,
        'border':
            isLightMode ? null : Border.all(color: Colors.white, width: 2),
        'textColor': Colors.black,
        'selectedInnerBackgroundColor': Colors.white,
        'innerBackgroundColor': Colors.white.withOpacity(0.6),
      },
    };

    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: backgroundStyles.entries.map((entry) {
        final mode = entry.key;
        final style = entry.value;
        final isSelected = editor.backgroundColorMode == mode;

        return Padding(
          padding: const EdgeInsets.only(right: 12),
          child: GestureDetector(
            onTap: () {
              editor.setState(() {
                editor.backgroundColorMode = mode;
              });
            },
            child: SizedBox(
              height: 40,
              width: 48,
              child: Container(
                decoration: BoxDecoration(
                  color: isSelected
                      ? style['selectedBackgroundColor'] as Color
                      : style['backgroundColor'] as Color,
                  borderRadius: BorderRadius.circular(25),
                  border: isSelected ? style['border'] as Border? : null,
                ),
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Center(
                      child: Container(
                        height: 20,
                        width: 22,
                        decoration: ShapeDecoration(
                          color: isSelected
                              ? style['selectedInnerBackgroundColor'] as Color
                              : style['innerBackgroundColor'] as Color,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(4),
                          ),
                        ),
                      ),
                    ),
                    Center(
                      child: Text(
                        style['text'] as String,
                        style: TextStyle(
                          color: isSelected
                              ? style['textColor'] as Color
                              : colorScheme.tabIcon,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }).toList(),
    );
  }
}

class _AlignPickerWidget extends StatelessWidget {
  final TextEditorState editor;

  const _AlignPickerWidget({required this.editor});

  @override
  Widget build(BuildContext context) {
    final colorScheme = getEnteColorScheme(context);
    final alignments = [
      (TextAlign.left, "assets/image-editor/image-editor-text-align-left.svg"),
      (
        TextAlign.center,
        "assets/image-editor/image-editor-text-align-center.svg"
      ),
      (
        TextAlign.right,
        "assets/image-editor/image-editor-text-align-right.svg"
      ),
    ];

    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: alignments.map((alignmentData) {
        final (alignment, svgPath) = alignmentData;
        final isSelected = editor.align == alignment;

        return Padding(
          padding: const EdgeInsets.only(right: 12.0),
          child: GestureDetector(
            onTap: () {
              editor.setState(() {
                editor.align = alignment;
              });
            },
            child: Container(
              height: 40,
              width: 48,
              decoration: BoxDecoration(
                color: isSelected
                    ? colorScheme.fillBasePressed
                    : colorScheme.backgroundElevated2,
                borderRadius: BorderRadius.circular(25),
                border: isSelected
                    ? Border.all(color: Colors.black, width: 2)
                    : null,
              ),
              child: Center(
                child: SvgPicture.asset(
                  svgPath,
                  width: 22,
                  height: 22,
                  fit: BoxFit.scaleDown,
                  colorFilter: ColorFilter.mode(
                    isSelected ? colorScheme.backdropBase : colorScheme.tabIcon,
                    BlendMode.srcIn,
                  ),
                ),
              ),
            ),
          ),
        );
      }).toList(),
    );
  }
}

Record_2025-07-24-17-10-29_ee68bb0ebf8532d8fb391c0624adea16.mp4

[hm21]

The problem is that you haven't added resizeToAvoidBottomInset: false to your Scaffold, which would resize everything when the keyboard appears.

Scaffold(
  resizeToAvoidBottomInset: false,
  ...
);

Regarding the overflow issue, I’d appreciate it if you could fill out a bug report with all the details, as I can’t reproduce it in the web demo. Please make sure you’re using the latest version to ensure the problem hasn’t already been resolved.