Merge pull request #2 from PatrykIti/fix/picker_color_closes

Refactor: Use EventChannel for real-time color updates and fix picker closing issue

Author: tagbanwa

CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.0.2
+
+*   **BREAKING CHANGE:** Refactored the plugin to use an `EventChannel` for color updates.
+    *   `NativeIosColorPicker.showColorPicker()` is now `Future<void>` and only shows the picker.
+    *   Added `NativeIosColorPicker.onColorChanged` stream (`Stream<Map<dynamic, dynamic>>`) which emits color updates (RGBA map) from the native picker in real-time.
+*   Fixed an issue where the picker might disappear immediately after selection by adopting a stream-based approach for color updates.
+*   Updated `README.md` with new usage instructions and API details reflecting the stream-based approach.
+*   Improved `ColorModel.fromMap` to handle dynamic map types safely from the stream.
+
+
 ## 0.0.1
 
 * TODO: Describe initial release.

README.md

@@ -4,10 +4,10 @@ A Flutter plugin that provides a native iOS color picker interface using the UIC
 
 ## Features
 
-- Native iOS color picker UI
-- Returns RGBA color values
-- Supports iOS 14+ devices
-- Simple and easy-to-use API
+- Native iOS/macOS color picker UI (macOS implementation might need verification based on provided code)
+- Streams RGBA color values in real-time from the picker
+- Supports iOS 14+ and potentially macOS 10.15+ (requires native implementation verification)
+- Simple API using MethodChannel for showing the picker and EventChannel for color updates
 
 ## Requirements
 
@@ -20,7 +20,7 @@ Add this to your package's `pubspec.yaml` file:
 
 ```yaml
 dependencies:
-  native_ios_color_picker: ^0.0.1
+  native_ios_color_picker: ^0.0.2
 ```
 
 Then run:
@@ -34,69 +34,116 @@ $ flutter pub get
 First, import the package:
 
 ```dart
+import 'dart:async'; // Required for StreamSubscription
+import 'package:flutter/material.dart'; // Required for Color
 import 'package:native_ios_color_picker/native_ios_color_picker.dart';
 ```
 
-Then, you can show the color picker using the static method `showColorPicker()`:
+The color picker is shown using `NativeIosColorPicker.showColorPicker()`. Color changes are received via the `NativeIosColorPicker.onColorChanged` stream. You need to subscribe to this stream to get color updates.
 
 ```dart
-try {
-  final colorValues = await NativeIosColorPicker.showColorPicker();
-  print('Selected color: $colorValues');
-  // colorValues contains:
-  // {
-  //   'red': 0.5,    // value between 0.0 and 1.0
-  //   'green': 0.3,   // value between 0.0 and 1.0
-  //   'blue': 0.7,    // value between 0.0 and 1.0
-  //   'alpha': 1.0    // value between 0.0 and 1.0
-  // }
-} catch (e) {
-  print('Error showing color picker: $e');
+StreamSubscription? _colorSubscription;
+Color _selectedColor = Colors.blue; // Initial color
+
+@override
+void initState() {
+  super.initState();
+  // Subscribe to the color changes stream
+  _colorSubscription = NativeIosColorPicker.onColorChanged.listen((colorMap) {
+    // The stream emits a Map<dynamic, dynamic>, convert it safely
+    // You can use the ColorModel for conversion (see below)
+    final newColor = Color.fromRGBO(
+      ((colorMap['red'] ?? 0.0) * 255).toInt(),
+      ((colorMap['green'] ?? 0.0) * 255).toInt(),
+      ((colorMap['blue'] ?? 0.0) * 255).toInt(),
+      (colorMap['alpha'] ?? 1.0),
+    );
+    setState(() {
+      _selectedColor = newColor;
+    });
+    print('Color updated: $_selectedColor');
+  }, onError: (error) {
+    print('Error receiving color: $error');
+  });
 }
-```
 
-### Screenshots
+@override
+void dispose() {
+  // Cancel the subscription when the widget is disposed
+  _colorSubscription?.cancel();
+  super.dispose();
+}
 
-<img src="https://github.com/squirelboy360/flutter-native-color-picker-plugin/blob/main/assets/iphone.png" width="300" alt="iOS Color Picker"/>
+// Somewhere in your widget build method or an event handler:
+void _openColorPicker() async {
+  try {
+    // Show the picker. It doesn't return the color directly anymore.
+    await NativeIosColorPicker.showColorPicker();
+  } catch (e) {
+    print('Error showing color picker: $e');
+  }
+}
 
-<img src="https://github.com/squirelboy360/flutter-native-color-picker-plugin/blob/main/assets/macos.png" width="300" alt="macOS Color Picker"/>
+// Example button to open the picker
+ElevatedButton(
+  onPressed: _openColorPicker,
+  child: Text('Show Color Picker'),
+  style: ElevatedButton.styleFrom(backgroundColor: _selectedColor),
+)
+
+```
 
 ### Using with ColorModel
 
-The package also provides a `ColorModel` class for easier color handling:
+The `ColorModel` class can simplify handling the map received from the stream:
 
 ```dart
-// Create from color picker result
-final colorValues = await NativeIosColorPicker.showColorPicker();
-final colorModel = ColorModel.fromMap(colorValues);
-
-// Convert to Flutter Color
-final flutterColor = colorModel.toColor();
-
-// Access individual components
-print('Red: ${colorModel.red}');
-print('Green: ${colorModel.green}');
-print('Blue: ${colorModel.blue}');
-print('Alpha: ${colorModel.alpha}');
+// Inside the stream listener:
+_colorSubscription = NativeIosColorPicker.onColorChanged.listen((colorMap) {
+  // Ensure the map has the correct types before passing to fromMap
+  final safeMap = Map<String, dynamic>.from(colorMap);
+  final colorModel = ColorModel.fromMap(safeMap);
+  final newColor = colorModel.toColor();
+
+  setState(() {
+    _selectedColor = newColor;
+  });
+
+  // Access individual components
+  print('Red: ${colorModel.red}');
+  print('Green: ${colorModel.green}');
+  // ... etc.
+}, onError: // ...
+);
 ```
 
+### Screenshots
+
+<img src="https://github.com/squirelboy360/flutter-native-color-picker-plugin/blob/main/assets/iphone.png" width="300" alt="iOS Color Picker"/>
+
+<img src="https://github.com/squirelboy360/flutter-native-color-picker-plugin/blob/main/assets/macos.png" width="300" alt="macOS Color Picker"/>
+
 ## API Reference
 
 ### NativeIosColorPicker
 
-#### `static Future<Map<String, double>> showColorPicker()`
+#### `static Future<void> showColorPicker()`
+
+Shows the native iOS/macOS color picker window. This method does not return the selected color directly. Color updates are sent via the `onColorChanged` stream.
+
+#### `static Stream<Map<dynamic, dynamic>> get onColorChanged`
 
-Shows the native iOS color picker and returns the selected color values as a map containing RGBA components (values between 0.0 and 1.0).
+A broadcast stream that emits updates when the color is changed in the native picker. Each event is a `Map` containing RGBA components (keys: 'red', 'green', 'blue', 'alpha') with values between 0.0 and 1.0. You should subscribe to this stream to receive color updates.
 
 ### ColorModel
 
 #### `ColorModel({required double red, required double green, required double blue, required double alpha})`
 
 Creates a new ColorModel instance with the specified RGBA values (between 0.0 and 1.0).
 
-#### `ColorModel.fromMap(Map<String, double> map)`
+#### `ColorModel.fromMap(Map<String, dynamic> map)`
 
-Creates a ColorModel instance from a map containing RGBA values.
+Creates a ColorModel instance from a map containing RGBA values (typically received from the `onColorChanged` stream). Handles potential null values and converts numeric types safely.
 
 #### `Color toColor()`
 

ios/Classes/SwiftNativeIosColorPickerPlugin.swift

@@ -3,56 +3,72 @@ import UIKit
 
 @available(iOS 14.0, *)
 public class SwiftNativeIosColorPickerPlugin: NSObject, FlutterPlugin {
+    private var eventSink: FlutterEventSink?
+    private var flutterResult: FlutterResult?
+
     public static func register(with registrar: FlutterPluginRegistrar) {
-        let channel = FlutterMethodChannel(name: "native_ios_color_picker", binaryMessenger: registrar.messenger())
+        let methodChannel = FlutterMethodChannel(name: "native_ios_color_picker", binaryMessenger: registrar.messenger())
         let instance = SwiftNativeIosColorPickerPlugin()
-        registrar.addMethodCallDelegate(instance, channel: channel)
+        registrar.addMethodCallDelegate(instance, channel: methodChannel)
+
+        let eventChannel = FlutterEventChannel(name: "native_ios_color_picker/events", binaryMessenger: registrar.messenger())
+        eventChannel.setStreamHandler(instance)
     }
-    
+
     public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
         switch call.method {
         case "showColorPicker":
-            showColorPicker(result: result)
+            showColorPicker()
+            result(nil) // Picker is being shown, no immediate result
         default:
             result(FlutterMethodNotImplemented)
         }
     }
-    
-    private func showColorPicker(result: @escaping FlutterResult) {
+
+    private func showColorPicker() {
         DispatchQueue.main.async {
             guard let viewController = UIApplication.shared.windows.first?.rootViewController else {
-                result(FlutterError(code: "NO_VIEWCONTROLLER",
-                                  message: "Could not get root view controller",
-                                  details: nil))
                 return
             }
-            
+
             let colorPicker = UIColorPickerViewController()
             colorPicker.delegate = self
-            self.flutterResult = result
             viewController.present(colorPicker, animated: true)
         }
     }
-    
-    private var flutterResult: FlutterResult?
+}
+
+@available(iOS 14.0, *)
+extension SwiftNativeIosColorPickerPlugin: FlutterStreamHandler {
+    public func onListen(withArguments arguments: Any?, eventSink events: @escaping FlutterEventSink) -> FlutterError? {
+        self.eventSink = events
+        return nil
+    }
+
+    public func onCancel(withArguments arguments: Any?) -> FlutterError? {
+        self.eventSink = nil
+        return nil
+    }
 }
 
 @available(iOS 14.0, *)
 extension SwiftNativeIosColorPickerPlugin: UIColorPickerViewControllerDelegate {
     public func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
+        // Nothing to do – picker is dismissed, but live updates already sent via eventSink
+    }
+
+    public func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
+        guard let sink = eventSink else { return }
+
         let color = viewController.selectedColor
         let colorDict: [String: Any] = [
             "red": Double(color.components.red),
             "green": Double(color.components.green),
             "blue": Double(color.components.blue),
             "alpha": Double(color.components.alpha)
         ]
-        flutterResult?(colorDict)
-        flutterResult = nil
-    }
-    
-    public func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
-        // Optional: Handle color selection changes in real-time
+
+        sink(colorDict) // live send to Flutter
     }
 }
 
@@ -65,4 +81,4 @@ extension UIColor {
         getRed(&r, green: &g, blue: &b, alpha: &a)
         return (r, g, b, a)
     }
-}
+}

ios/native_ios_color_picker.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'native_ios_color_picker'
-  s.version          = '0.0.1'
+  s.version          = '0.0.2'
   s.summary          = 'A native iOS color picker plugin for Flutter'
   s.description      = <<-DESC
 A Flutter plugin that provides access to the native iOS 14+ color picker.

lib/src/color_model.dart

@@ -13,17 +13,17 @@ class ColorModel {
     this.alpha = 1.0,
   });
 
-  /// Creates a [ColorModel] from a map containing RGBA values.
-  factory ColorModel.fromMap(Map<String, double> map) {
+  /// Tworzy ColorModel z mapy, niezależnie od typu dynamicznego.
+  factory ColorModel.fromMap(Map<String, dynamic> map) {
     return ColorModel(
-      red: map['red'] ?? 0.0,
-      green: map['green'] ?? 0.0,
-      blue: map['blue'] ?? 0.0,
-      alpha: map['alpha'] ?? 1.0,
+      red: (map['red'] ?? 0.0).toDouble(),
+      green: (map['green'] ?? 0.0).toDouble(),
+      blue: (map['blue'] ?? 0.0).toDouble(),
+      alpha: (map['alpha'] ?? 1.0).toDouble(),
     );
   }
 
-  /// Converts the color model to a Flutter [Color].
+  /// Konwertuje model na Flutterowy Color.
   Color toColor() {
     return Color.fromRGBO(
       (red * 255).round(),
@@ -33,7 +33,7 @@ class ColorModel {
     );
   }
 
-  /// Converts the color model to a map representation.
+  /// Konwertuje model z powrotem na mapę.
   Map<String, double> toMap() {
     return {
       'red': red,
@@ -42,4 +42,4 @@ class ColorModel {
       'alpha': alpha,
     };
   }
-}
+}

lib/src/color_picker.dart

@@ -5,25 +5,21 @@ class NativeIosColorPicker {
   static const MethodChannel _channel =
       MethodChannel('native_ios_color_picker');
 
-  /// Shows the native iOS color picker and returns the selected color.
-  ///
-  /// Returns a [Map] containing the RGBA values of the selected color:
-  /// - red: Double value between 0.0 and 1.0
-  /// - green: Double value between 0.0 and 1.0
-  /// - blue: Double value between 0.0 and 1.0
-  /// - alpha: Double value between 0.0 and 1.0
-  static Future<Map<String, double>> showColorPicker() async {
+  static const EventChannel _eventChannel =
+      EventChannel('native_ios_color_picker/events');
+
+  /// Shows the native macOS color picker window.
+  /// Color changes are streamed via [onColorChanged].
+  static Future<void> showColorPicker() async {
     try {
-      final Map<dynamic, dynamic> result =
-          await _channel.invokeMethod('showColorPicker');
-      return {
-        'red': result['red'] as double,
-        'green': result['green'] as double,
-        'blue': result['blue'] as double,
-        'alpha': result['alpha'] as double,
-      };
+      await _channel.invokeMethod('showColorPicker');
     } on PlatformException catch (e) {
       throw 'Failed to show color picker: ${e.message}';
     }
   }
+
+  /// Live stream of RGBA color updates from native macOS picker.
+  static Stream<Map<dynamic, dynamic>> get onColorChanged {
+    return _eventChannel.receiveBroadcastStream().cast<Map<dynamic, dynamic>>();
+  }
 }