[PR] Toolbar enhancement

integration_test/emoji_widget_test.dart

@@ -0,0 +1,69 @@
+import 'package:app/emoji_picker_widget.dart';
+import 'package:app/home_page.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+import 'package:app/main.dart';
+import 'package:mockito/annotations.dart';
+import 'package:mockito/mockito.dart';
+
+
+// importing mocks
+import '../test/widget_test.mocks.dart';
+
+/// Run `flutter test integration_test` with a device connected to see it running on the real device.
+
+@GenerateMocks([PlatformService])
+void main() {
+  /// Check for context: https://stackoverflow.com/questions/60671728/unable-to-load-assets-in-flutter-tests
+  setUpAll(() {
+    TestWidgetsFlutterBinding.ensureInitialized();
+  });
+
+  testWidgets('Click on emoji button should show the emoji picker', (WidgetTester tester) async {
+    final platformServiceMock = MockPlatformService();
+    // Platform is mobile
+    when(platformServiceMock.isWebPlatform()).thenAnswer((_) => false);
+
+    // Build our app and trigger a frame.
+    await tester.pumpWidget(
+      App(
+        platformService: platformServiceMock,
+      ),
+    );
+    await tester.pumpAndSettle();
+
+    // Expect to find the normal page setup and emoji picker not being shown
+    expect(find.text('Flutter Quill'), findsOneWidget);
+    expect(find.byKey(emojiPickerWidgetKey).hitTestable(), findsNothing);
+
+    // Click on emoji button should show the emoji picker
+    var emojiIcon = find.byIcon(Icons.emoji_emotions);
+
+    await tester.tap(emojiIcon);
+    await tester.pumpAndSettle();
+
+    emojiIcon = find.byIcon(Icons.emoji_emotions);
+    final emojiPicker = find.byKey(emojiButtonKey);
+
+    // Expect the emoji picker being shown
+    expect(emojiPicker.hitTestable(), findsOneWidget);
+
+    // Tap on smile category
+    await tester.tapAt(const Offset(61, 580));
+    await tester.pumpAndSettle();
+
+    // Tap on smile icon
+    await tester.tapAt(const Offset(14, 632));
+    await tester.pumpAndSettle();
+
+    // Tap on emoji icon to close the emoji pickers
+    emojiIcon = find.byIcon(Icons.emoji_emotions);
+
+    await tester.tap(emojiIcon);
+    await tester.pumpAndSettle();
+
+    expect(find.byKey(emojiPickerWidgetKey).hitTestable(), findsNothing);
+    //expect(find.text('😀'), findsOneWidget);
+  });
+}

ios/Podfile.lock

@@ -32,6 +32,8 @@ PODS:
   - DKPhotoGallery/Resource (0.0.17):
     - SDWebImage
     - SwiftyGif
+  - emoji_picker_flutter (0.0.1):
+    - Flutter
   - file_picker (0.0.1):
     - DKImagePickerController/PhotoGallery
     - Flutter
@@ -60,6 +62,9 @@ PODS:
   - SDWebImage (5.16.0):
     - SDWebImage/Core (= 5.16.0)
   - SDWebImage/Core (5.16.0)
+  - shared_preferences_foundation (0.0.1):
+    - Flutter
+    - FlutterMacOS
   - SwiftyGif (5.4.4)
   - url_launcher_ios (0.0.1):
     - Flutter
@@ -68,6 +73,7 @@ PODS:
 
 DEPENDENCIES:
   - device_info_plus (from `.symlinks/plugins/device_info_plus/ios`)
+  - emoji_picker_flutter (from `.symlinks/plugins/emoji_picker_flutter/ios`)
   - file_picker (from `.symlinks/plugins/file_picker/ios`)
   - Flutter (from `Flutter`)
   - flutter_inappwebview (from `.symlinks/plugins/flutter_inappwebview/ios`)
@@ -77,6 +83,7 @@ DEPENDENCIES:
   - integration_test (from `.symlinks/plugins/integration_test/ios`)
   - pasteboard (from `.symlinks/plugins/pasteboard/ios`)
   - path_provider_foundation (from `.symlinks/plugins/path_provider_foundation/darwin`)
+  - shared_preferences_foundation (from `.symlinks/plugins/shared_preferences_foundation/darwin`)
   - url_launcher_ios (from `.symlinks/plugins/url_launcher_ios/ios`)
   - video_player_avfoundation (from `.symlinks/plugins/video_player_avfoundation/ios`)
 
@@ -91,6 +98,8 @@ SPEC REPOS:
 EXTERNAL SOURCES:
   device_info_plus:
     :path: ".symlinks/plugins/device_info_plus/ios"
+  emoji_picker_flutter:
+    :path: ".symlinks/plugins/emoji_picker_flutter/ios"
   file_picker:
     :path: ".symlinks/plugins/file_picker/ios"
   Flutter:
@@ -109,6 +118,8 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/pasteboard/ios"
   path_provider_foundation:
     :path: ".symlinks/plugins/path_provider_foundation/darwin"
+  shared_preferences_foundation:
+    :path: ".symlinks/plugins/shared_preferences_foundation/darwin"
   url_launcher_ios:
     :path: ".symlinks/plugins/url_launcher_ios/ios"
   video_player_avfoundation:
@@ -118,6 +129,7 @@ SPEC CHECKSUMS:
   device_info_plus: 7545d84d8d1b896cb16a4ff98c19f07ec4b298ea
   DKImagePickerController: b512c28220a2b8ac7419f21c491fc8534b7601ac
   DKPhotoGallery: fdfad5125a9fdda9cc57df834d49df790dbb4179
+  emoji_picker_flutter: df19dac03a2b39ac667dc8d1da939ef3a9e21347
   file_picker: ce3938a0df3cc1ef404671531facef740d03f920
   Flutter: f04841e97a9d0b0a8025694d0796dd46242b2854
   flutter_inappwebview: bfd58618f49dc62f2676de690fc6dcda1d6c3721
@@ -129,6 +141,7 @@ SPEC CHECKSUMS:
   pasteboard: 982969ebaa7c78af3e6cc7761e8f5e77565d9ce0
   path_provider_foundation: 29f094ae23ebbca9d3d0cec13889cd9060c0e943
   SDWebImage: 2aea163b50bfcb569a2726b6a754c54a4506fcf6
+  shared_preferences_foundation: 5b919d13b803cadd15ed2dc053125c68730e5126
   SwiftyGif: 93a1cc87bf3a51916001cf8f3d63835fb64c819f
   url_launcher_ios: 08a3dfac5fb39e8759aeb0abbd5d9480f30fc8b4
   video_player_avfoundation: 81e49bb3d9fb63dccf9fa0f6d877dc3ddbeac126

lib/emoji_picker_widget.dart

@@ -0,0 +1,64 @@
+import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_quill/flutter_quill.dart';
+import 'package:responsive_framework/responsive_framework.dart';
+
+const emojiPickerWidgetKey = Key('emojiPickerWidgetKey');
+
+/// Emoji picker widget that is offstage.
+/// Shows an emoji picker when [offstageEmojiPicker] is `false`.
+class OffstageEmojiPicker extends StatefulWidget {
+  /// `QuillController` controller that is passed so the controller document is changed when emojis are inserted.
+  final QuillController? quillController;
+
+  /// Determines if the emoji picker is offstage or not.
+  final bool offstageEmojiPicker;
+
+  const OffstageEmojiPicker({required this.offstageEmojiPicker, this.quillController, super.key});
+
+  @override
+  State<OffstageEmojiPicker> createState() => _OffstageEmojiPickerState();
+}
+
+class _OffstageEmojiPickerState extends State<OffstageEmojiPicker> {
+  /// Returns the emoji picker configuration according to screen size.
+  Config _buildEmojiPickerConfig(BuildContext context) {
+    if (ResponsiveBreakpoints.of(context).smallerOrEqualTo(MOBILE)) {
+      return const Config(emojiSizeMax: 32.0, columns: 7);
+    }
+
+    if (ResponsiveBreakpoints.of(context).equals(TABLET)) {
+      return const Config(emojiSizeMax: 24.0, columns: 10);
+    }
+
+    if (ResponsiveBreakpoints.of(context).equals(DESKTOP)) {
+      return const Config(emojiSizeMax: 16.0, columns: 15);
+    }
+
+    return const Config(emojiSizeMax: 16.0, columns: 30);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Offstage(
+      offstage: widget.offstageEmojiPicker,
+      child: SizedBox(
+        height: 250,
+        child: EmojiPicker(
+          key: emojiPickerWidgetKey,
+          onEmojiSelected: (category, emoji) {
+            if (widget.quillController != null) {
+              // Get pointer selection and insert emoji there
+              final selection = widget.quillController?.selection;
+              widget.quillController?.document.insert(selection!.end, emoji.emoji);
+
+              // Update the pointer after the emoji we've just inserted
+              widget.quillController?.updateSelection(TextSelection.collapsed(offset: selection!.end + emoji.emoji.length), ChangeSource.REMOTE);
+            }
+          },
+          config: _buildEmojiPickerConfig(context),
+        ),
+      ),
+    );
+  }
+}