feat: add blur editor

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## Version 2.5.0
+- **Feat:** New editor `Blur-Editor`. Details in [GitHub pull #15](https://github.com/hm21/pro_image_editor/pull/15)
+
 ## Version 2.4.6
 - **Feat:** Add `Change Font Scale` feature to text editor. Details in [GitHub pull #14](https://github.com/hm21/pro_image_editor/pull/14)
 

README.md

@@ -115,6 +115,7 @@ The ProImageEditor is a Flutter widget designed for image editing within your ap
   - ✅ Multiple background modes like in whatsapp
 - ✅ Crop-Rotate-Editor
 - ✅ Filter-Editor
+- ✅ Blur-Editor
 - ✅ Emoji-Picker
 - ✅ Move and scalable layers
 - ✅ Helper lines for better positioning
@@ -592,6 +593,7 @@ Creates a `ProImageEditor` widget for editing an image from a network URL.
 | `textEditorConfigs`       | Configuration options for the Text Editor.                                                                                     | `TextEditorConfigs()`                          |
 | `cropRotateEditorConfigs` | Configuration options for the Crop and Rotate Editor.                                                                          | `CropRotateEditorConfigs()`                    |
 | `filterEditorConfigs`     | Configuration options for the Filter Editor.                                                                                   | `FilterEditorConfigs()`                        |
+| `blurEditorConfigs`       | Configuration options for the Blur Editor.                                                                                     | `BlurEditorConfigs()`                          |
 | `emojiEditorConfigs`      | Configuration options for the Emoji Editor.                                                                                    | `EmojiEditorConfigs()`                         |
 | `stickerEditorConfigs`    | Configuration options for the Sticker Editor.                                                                                  | `StickerEditorConfigs()`                       |
 | `designMode`              | The design mode for the Image Editor.                                                                                          | `ImageEditorDesignModeE.material`              |
@@ -609,6 +611,7 @@ Creates a `ProImageEditor` widget for editing an image from a network URL.
 | `textEditor`         | Translations and messages specific to the text editor.        | `I18nTextEditor()`        |
 | `cropRotateEditor`   | Translations and messages specific to the crop and rotate editor. | `I18nCropRotateEditor()` |
 | `filterEditor`       | Translations and messages specific to the filter editor.      | `I18nFilterEditor()`      |
+| `blurEditor`         | Translations and messages specific to the blur editor.        | `I18nBlurEditor()`        |
 | `emojiEditor`        | Translations and messages specific to the emoji editor.       | `I18nEmojiEditor()`       |
 | `stickerEditor`      | Translations and messages specific to the sticker editor.     | `I18nStickerEditor()`     |
 | `various`            | Translations and messages for various parts of the editor.    | `I18nVarious()`           |
@@ -680,6 +683,16 @@ Creates a `ProImageEditor` widget for editing an image from a network URL.
 | `filters`                | Internationalization settings for individual filters| `I18nFilters()`                              |
 
 
+#### `i18n blurEditor`
+
+| Property                 | Description                                        | Default Value                    |
+|--------------------------|----------------------------------------------------|----------------------------------|
+| `applyBlurDialogMsg`     | Text displayed when a filter is being applied     | `'Blur is being applied.'`      |
+| `bottomNavigationBarText`| Text for the bottom navigation bar item           | `'Blur'`                           |
+| `back`                   | Text for the "Back" button in the Blur Editor     | `'Back'`                           |
+| `done`                   | Text for the "Done" button in the Blur Editor     | `'Done'`                           |
+
+
 #### `i18n emojiEditor`
 | Property                  | Description                                                            | Default Value |
 |---------------------------|------------------------------------------------------------------------|---------------|
@@ -727,6 +740,7 @@ Creates a `ProImageEditor` widget for editing an image from a network URL.
 | `appBarTextEditor`      | A custom app bar widget for the text editor component.                |
 | `appBarCropRotateEditor`| A custom app bar widget for the crop and rotate editor component.     |
 | `appBarFilterEditor`    | A custom app bar widget for the filter editor component.              |
+| `appBarBlurEditor`      | A custom app bar widget for the blur editor component.                |
 | `bottomNavigationBar`   | A custom widget for the bottom navigation bar.                        |
 </details>
 
@@ -739,6 +753,7 @@ Creates a `ProImageEditor` widget for editing an image from a network URL.
 | `textEditor`               | Theme for the text editor.                                        | `TextEditorTheme()`                                |
 | `cropRotateEditor`         | Theme for the crop & rotate editor.                               | `CropRotateEditorTheme()`                          |
 | `filterEditor`             | Theme for the filter editor.                                      | `FilterEditorTheme()`                              |
+| `blurEditor`               | Theme for the blur editor.                                        | `BlurEditorTheme()`                                |
 | `emojiEditor`              | Theme for the emoji editor.                                       | `EmojiEditorTheme()`                               |
 | `stickerEditor`            | Theme for the sticker editor.                                     | `StickerEditorTheme()`                               |
 | `helperLine`               | Theme for helper lines in the image editor.                       | `HelperLineTheme()`                                |
@@ -786,6 +801,14 @@ Creates a `ProImageEditor` widget for editing an image from a network URL.
 | `previewTextColor`              | Color of the preview text.                            | `Color(0xFFE1E1E1)` |
 
 
+#### Theme blurEditor
+| Property                        | Description                                           | Default Value       |
+| ------------------------------- | ----------------------------------------------------- | ------------------- |
+| `appBarBackgroundColor`         | Background color of the app bar in the blur editor.   | `imageEditorAppBarColor` (Default theme value) |
+| `appBarForegroundColor`         | Foreground color (text and icons) of the app bar.    | `Color(0xFFE1E1E1)` |
+| `background`                    | Background color of the blur editor.                 | `imageEditorBackgroundColor` (Default theme value) |
+
+
 #### Theme emojiEditor
 | Property                  | Description                                           | Default Value                    |
 | ------------------------- | ----------------------------------------------------- | -------------------------------- |
@@ -826,6 +849,7 @@ Creates a `ProImageEditor` widget for editing an image from a network URL.
 | `textEditor`          | Customizable icons for the Text Editor component.    | `IconsTextEditor`          |
 | `cropRotateEditor`    | Customizable icons for the Crop and Rotate Editor component.| `IconsCropRotateEditor` |
 | `filterEditor`        | Customizable icons for the Filter Editor component.  | `IconsFilterEditor`        |
+| `blurEditor`          | Customizable icons for the Blur Editor component.    | `IconsBlurEditor`          |
 | `emojiEditor`         | Customizable icons for the Emoji Editor component.   | `IconsEmojiEditor`         |
 | `stickerEditor`       | Customizable icons for the Sticker Editor component. | `IconsStickerEditor`       |
 
@@ -867,6 +891,10 @@ Creates a `ProImageEditor` widget for editing an image from a network URL.
 | --------------- | ------------------------------ | -------------- |
 | `bottomNavBar`  | Icon for bottom navigation bar | `Icons.filter` |
 
+#### icons blurEditor
+| Property        | Description                    | Default Value   |
+| --------------- | ------------------------------ | --------------- |
+| `bottomNavBar`  | Icon for bottom navigation bar | `Icons.blur_on` |
 
 #### icons emojiEditor
 | Property        | Description                          | Default Value                       |
@@ -941,6 +969,15 @@ Creates a `ProImageEditor` widget for editing an image from a network URL.
 | `filterList`  | A list of color filter generators to apply.    | `null`        |
 </details>
 
+<details>
+  <summary><b>blurEditorConfigs</b></summary>
+
+| Property      | Description                                     | Default Value |
+|---------------|-------------------------------------------------|---------------|
+| `enabled`     | Indicates whether the blur editor is enabled.   | `true`        |
+| `maxBlur`     | The maximum of blur to apply.                   | `2.0`         |
+</details>
+
 <details>
   <summary><b>emojiEditorConfigs</b></summary>
 

example/lib/main.dart

@@ -227,6 +227,12 @@ class _MyHomePageState extends State<MyHomePage> {
                                   xProII: 'Pro II',
                                 ),
                               ),
+                              blurEditor: I18nBlurEditor(
+                                applyBlurDialogMsg: 'Blur is being applied.',
+                                bottomNavigationBarText: 'Blur',
+                                back: 'Back',
+                                done: 'Done',
+                              ),
                               emojiEditor: I18nEmojiEditor(
                                 bottomNavigationBarText: 'Emoji',
                               ),
@@ -282,6 +288,11 @@ class _MyHomePageState extends State<MyHomePage> {
                                 previewTextColor: Color(0xFFE1E1E1),
                                 background: Color.fromARGB(255, 22, 22, 22),
                               ),
+                              blurEditor: BlurEditorTheme(
+                                appBarBackgroundColor: Color(0xFF000000),
+                                appBarForegroundColor: Color(0xFFE1E1E1),
+                                background: Color.fromARGB(255, 22, 22, 22),
+                              ),
                               emojiEditor: EmojiEditorTheme(),
                               stickerEditor: StickerEditorTheme(),
                               background: Color.fromARGB(255, 22, 22, 22),
@@ -377,6 +388,10 @@ class _MyHomePageState extends State<MyHomePage> {
                               enabled: true,
                               filterList: presetFiltersList,
                             ),
+                            blurEditorConfigs: const BlurEditorConfigs(
+                              enabled: true,
+                              maxBlur: 3.0,
+                            ),
                             emojiEditorConfigs: const EmojiEditorConfigs(
                               enabled: true,
                               initScale: 5.0,

lib/models/blur_state_history.dart

@@ -0,0 +1,26 @@
+/// Represents the history of a blur state.
+class BlurStateHistory {
+  /// The opacity of the blur.
+  final double blur;
+
+  /// Constructs a [BlurStateHistory] instance.
+  BlurStateHistory({
+    this.blur = 0,
+  });
+
+  /// Constructs a [BlurStateHistory] instance from a map representation.
+  ///
+  /// The [map] should contain 'blur' keys.
+  BlurStateHistory.fromMap(Map map)
+      : blur = num.tryParse(map['blur']?.toString() ?? '0')?.toDouble() ?? 0;
+
+  /// Converts this blur state history object to a Map.
+  ///
+  /// Returns a Map representing the properties of this blur state history object,
+  /// including the blur.
+  Map toMap() {
+    return {
+      'blur': blur,
+    };
+  }
+}

lib/models/custom_widgets.dart

@@ -35,6 +35,9 @@ import 'package:flutter/widgets.dart';
 /// - `appBarFilterEditor` (optional): A custom app bar widget specifically designed for
 ///   the filter editor component, if applicable.
 ///
+/// - `appBarBlurEditor` (optional): A custom app bar widget specifically designed for
+///   the blur editor component, if applicable.
+///
 /// - `bottomNavigationBar` (optional): A custom widget that can be used as a bottom
 ///   navigation bar in the application's user interface.
 ///
@@ -67,6 +70,9 @@ class ImageEditorCustomWidgets {
   /// A custom app bar widget for the filter editor component.
   final PreferredSizeWidget? appBarFilterEditor;
 
+  /// A custom app bar widget for the blur editor component.
+  final PreferredSizeWidget? appBarBlurEditor;
+
   /// A custom widget for the bottom navigation bar.
   final Widget? bottomNavigationBar;
 
@@ -81,6 +87,7 @@ class ImageEditorCustomWidgets {
     this.appBarTextEditor,
     this.appBarCropRotateEditor,
     this.appBarFilterEditor,
+    this.appBarBlurEditor,
     this.bottomNavigationBar,
     this.bottomBarPaintingEditor,
   });

lib/models/editor_configs/blur_editor_configs.dart

@@ -0,0 +1,25 @@
+/// Configuration options for a blur editor.
+///
+/// `BlurEditorConfigs` allows you to define settings for a blur editor,
+/// including whether the editor is enabled and a list of blur generators.
+///
+/// Example usage:
+/// ```dart
+/// BlurEditorConfigs(
+///   enabled: true,
+///   maxBlur: 2.0,
+/// );
+/// ```
+class BlurEditorConfigs {
+  /// Indicates whether the blur editor is enabled.
+  final bool enabled;
+  final double maxBlur;
+
+  /// Creates an instance of BlurEditorConfigs with optional settings.
+  ///
+  /// By default, the editor is enabled, and max blur is 2.0.
+  const BlurEditorConfigs({
+    this.enabled = true,
+    this.maxBlur = 2.0,
+  });
+}

lib/models/editor_configs/pro_image_editor_configs.dart

@@ -6,6 +6,7 @@ import '../custom_widgets.dart';
 import 'crop_rotate_editor_configs.dart';
 import 'emoji_editor_configs.dart';
 import 'filter_editor_configs.dart';
+import 'blur_editor_configs.dart';
 import 'paint_editor_configs.dart';
 import 'text_editor_configs.dart';
 import '../helper_lines.dart';
@@ -49,6 +50,9 @@ class ProImageEditorConfigs {
   /// Configuration options for the Filter Editor.
   final FilterEditorConfigs filterEditorConfigs;
 
+  /// Configuration options for the Blur Editor.
+  final BlurEditorConfigs blurEditorConfigs;
+
   /// Configuration options for the Emoji Editor.
   final EmojiEditorConfigs emojiEditorConfigs;
 
@@ -90,6 +94,7 @@ class ProImageEditorConfigs {
     this.textEditorConfigs = const TextEditorConfigs(),
     this.cropRotateEditorConfigs = const CropRotateEditorConfigs(),
     this.filterEditorConfigs = const FilterEditorConfigs(),
+    this.blurEditorConfigs = const BlurEditorConfigs(),
     this.emojiEditorConfigs = const EmojiEditorConfigs(),
     this.stickerEditorConfigs,
     this.designMode = ImageEditorDesignModeE.material,

lib/models/history/state_history.dart

@@ -1,4 +1,5 @@
 import '../filter_state_history.dart';
+import '../blur_state_history.dart';
 import '../layer.dart';
 
 /// The `EditorStateHistory` class represents changes made to an image in the image
@@ -33,6 +34,7 @@ import '../layer.dart';
 /// ```dart
 /// EditorStateHistory changes = EditorStateHistory(
 ///   bytesRefIndex: 0,
+///   blur: BlurStateHistory(blur: 0),
 ///   filters: [],
 ///   layers: [
 ///     Layer(
@@ -54,11 +56,13 @@ import '../layer.dart';
 class EditorStateHistory {
   // Save memory to ref to a sepperated array which contain only image changes and not also layer-changes
   int bytesRefIndex = 0;
+  BlurStateHistory blur = BlurStateHistory(blur: 0);
   List<Layer> layers = [];
   List<FilterStateHistory> filters = [];
 
   EditorStateHistory({
     required this.bytesRefIndex,
+    required this.blur,
     required this.layers,
     required this.filters,
   });

lib/models/i18n/i18n.dart

@@ -1,6 +1,7 @@
 import 'i18n_crop_rotate_editor.dart';
 import 'i18n_emoji_editor.dart';
 import 'i18n_filter_editor.dart';
+import 'i18n_blur_editor.dart';
 import 'i18n_painting_editor.dart';
 import 'i18n_sticker_editor.dart';
 import 'i18n_text_editor.dart';
@@ -10,6 +11,7 @@ export 'i18n_various.dart';
 export 'i18n_text_editor.dart';
 export 'i18n_painting_editor.dart';
 export 'i18n_filter_editor.dart';
+export 'i18n_blur_editor.dart';
 export 'i18n_emoji_editor.dart';
 export 'i18n_sticker_editor.dart';
 export 'i18n_crop_rotate_editor.dart';
@@ -37,6 +39,9 @@ export 'i18n_crop_rotate_editor.dart';
 ///   filterEditor: I18nFilterEditor(
 ///     // Define filter editor translations...
 ///   ),
+///   blurEditor: I18nBlurEditor(
+///     // Define blur editor translations...
+///   ),
 ///   emojiEditor: I18nEmojiEditor(
 ///     // Define emoji editor translations...
 ///   ),
@@ -61,6 +66,8 @@ export 'i18n_crop_rotate_editor.dart';
 ///
 /// - `filterEditor`: Translations and messages specific to the filter editor.
 ///
+/// - `blurEditor`: Translations and messages specific to the blur editor.
+///
 /// - `emojiEditor`: Translations and messages specific to the emoji editor.
 ///
 /// - `cancel`: The text for the "Cancel" button.
@@ -105,6 +112,9 @@ class I18n {
   /// Translations and messages specific to the filter editor.
   final I18nFilterEditor filterEditor;
 
+  /// Translations and messages specific to the blur editor.
+  final I18nBlurEditor blurEditor;
+
   /// Translations and messages specific to the emoji editor.
   final I18nEmojiEditor emojiEditor;
 
@@ -171,6 +181,7 @@ class I18n {
     this.textEditor = const I18nTextEditor(),
     this.cropRotateEditor = const I18nCropRotateEditor(),
     this.filterEditor = const I18nFilterEditor(),
+    this.blurEditor = const I18nBlurEditor(),
     this.emojiEditor = const I18nEmojiEditor(),
     this.stickerEditor = const I18nStickerEditor(),
     this.various = const I18nVarious(),

lib/models/i18n/i18n_blur_editor.dart

@@ -0,0 +1,37 @@
+/// Internationalization (i18n) settings for the Blur Editor component.
+class I18nBlurEditor {
+  /// Text to display when a blur is being applied.
+  final String applyBlurDialogMsg;
+
+  /// Text for the bottom navigation bar item that opens the Blur Editor.
+  final String bottomNavigationBarText;
+
+  /// Text for the "Back" button in the Blur Editor.
+  final String back;
+
+  /// Text for the "Done" button in the Blur Editor.
+  final String done;
+
+  /// Creates an instance of [I18nBlurEditor] with customizable internationalization settings.
+  ///
+  /// You can provide translations and messages specifically for the Blur Editor
+  /// component of your application. Customize the text for the bottom navigation bar,
+  /// messages such as "Blur is being applied,"
+  ///
+  /// Example:
+  ///
+  /// ```dart
+  /// I18nBlurEditor(
+  ///   applyBlurDialogMsg: 'Blur is being applied.',
+  ///   bottomNavigationBarText: 'Blur',
+  ///   done: 'Apply',
+  ///   back: 'Cancel',
+  /// )
+  /// ```
+  const I18nBlurEditor({
+    this.applyBlurDialogMsg = 'Blur is being applied.',
+    this.bottomNavigationBarText = 'Blur',
+    this.back = 'Back',
+    this.done = 'Done',
+  });
+}