Merge pull request #351 from inderjeet-developer7/main

chat emoji reaction #Issue139

app/lib/common/constants.dart

@@ -0,0 +1,5 @@
+const String heart = '\u{2764}';
+const String faceWithTears = '\u{1F602}';
+const String disappointedFace = '\u{1F625}';
+const String angryFace = '\u{1F621}';
+const String astonishedFace = '\u{1F632}';

app/lib/widgets/ChatListItem.dart

@@ -7,10 +7,10 @@ import 'package:effektio/widgets/AppCommon.dart';
 import 'package:effektio/widgets/CustomAvatar.dart';
 import 'package:effektio_flutter_sdk/effektio_flutter_sdk_ffi.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:flutter_link_previewer/flutter_link_previewer.dart';
 import 'package:flutter_parsed_text/flutter_parsed_text.dart';
-import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
 import 'package:get/get.dart';
 import 'package:intl/intl.dart';
 

app/lib/widgets/EmojiReactionListItem.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+
+class EmojiReactionListItem extends StatelessWidget {
+  final String emoji;
+
+  const EmojiReactionListItem({
+    Key? key,
+    required this.emoji,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Flex(
+      direction: Axis.horizontal,
+      children: [
+        const CircleAvatar(
+          backgroundColor: Colors.white,
+        ),
+        const Expanded(
+          // fit: FlexFit.loose,
+          child: Padding(
+            padding: EdgeInsets.only(left: 12.0),
+            child: Text(
+              'Sample name',
+              style: TextStyle(color: Colors.white, fontSize: 16),
+            ),
+          ),
+        ),
+        Text(
+          emoji,
+          style: const TextStyle(color: Colors.white, fontSize: 16),
+        ),
+      ],
+    );
+  }
+}

app/lib/widgets/emoji_picker_widget.dart

@@ -0,0 +1,52 @@
+import 'dart:io';
+
+import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
+import 'package:expandable_text/expandable_text.dart';
+import 'package:flutter/foundation.dart' show kIsWeb;
+import 'package:flutter/material.dart';
+
+class EmojiPickerWidget extends StatelessWidget {
+  const EmojiPickerWidget({Key? key, required this.onSelected})
+      : super(key: key);
+
+  final StringCallback onSelected;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.only(top: 10, left: 15, right: 15),
+      decoration: const BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
+      ),
+      height: MediaQuery.of(context).size.height / 2,
+      child: Column(
+        children: [
+          Container(
+            margin: const EdgeInsets.only(bottom: 15),
+            width: 35,
+            height: 4,
+            decoration: BoxDecoration(
+              color: Colors.grey,
+              borderRadius: BorderRadius.circular(30),
+            ),
+          ),
+          Expanded(
+            child: EmojiPicker(
+              onEmojiSelected: (Category category, Emoji emoji) =>
+                  onSelected(emoji.emoji),
+              config: Config(
+                columns: 7,
+                emojiSizeMax: 32 * ((!kIsWeb && Platform.isIOS) ? 1.30 : 1.0),
+                initCategory: Category.RECENT,
+                bgColor: Colors.white,
+                showRecentsTab: false,
+                recentsLimit: 28,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

app/lib/widgets/emoji_row.dart

@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) 2022 Simform Solutions
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import 'package:effektio/common/constants.dart';
+import 'package:effektio/widgets/emoji_picker_widget.dart';
+import 'package:effektio/widgets/reaction_popup_configuration.dart';
+import 'package:expandable_text/expandable_text.dart';
+import 'package:flutter/material.dart';
+
+typedef StringsCallBack = void Function(String emoji, String messageId);
+
+class EmojiRow extends StatelessWidget {
+  EmojiRow({
+    Key? key,
+    required this.onEmojiTap,
+    this.emojiConfiguration,
+  }) : super(key: key);
+
+  final StringCallback onEmojiTap;
+  final EmojiConfiguration? emojiConfiguration;
+  final List<String> _emojiUnicodes = [
+    heart,
+    faceWithTears,
+    astonishedFace,
+    disappointedFace,
+    angryFace,
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    final emojiList = emojiConfiguration?.emojiList ?? _emojiUnicodes;
+    final size = emojiConfiguration?.size;
+    return Row(
+      children: [
+        Expanded(
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            mainAxisAlignment: MainAxisAlignment.spaceAround,
+            children: List.generate(
+              emojiList.length,
+              (index) => GestureDetector(
+                onTap: () => onEmojiTap(emojiList[index]),
+                child: Text(
+                  emojiList[index],
+                  style: TextStyle(fontSize: size ?? 18),
+                ),
+              ),
+            ),
+          ),
+        ),
+        IconButton(
+          constraints: const BoxConstraints(),
+          icon: Icon(
+            Icons.add,
+            color: Colors.grey.shade600,
+            size: size ?? 28,
+          ),
+          onPressed: () => _showBottomSheet(context),
+        ),
+      ],
+    );
+  }
+
+  void _showBottomSheet(BuildContext context) => showModalBottomSheet<void>(
+        context: context,
+        builder: (context) => EmojiPickerWidget(
+          onSelected: (emoji) {
+            Navigator.pop(context);
+            onEmojiTap(emoji);
+          },
+        ),
+      );
+}

app/lib/widgets/reaction_popup_configuration.dart

@@ -0,0 +1,74 @@
+/*
+ * Copyright (c) 2022 Simform Solutions
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import 'package:flutter/material.dart';
+
+typedef StringsCallBack = void Function(String emoji, String messageId);
+
+class ReactionPopupConfiguration {
+  final Color? backgroundColor;
+  final BoxShadow? shadow;
+  final Duration? animationDuration;
+  final double? maxWidth;
+  final EdgeInsetsGeometry? margin;
+  final EdgeInsetsGeometry? padding;
+  final EmojiConfiguration? emojiConfig;
+  final bool showGlassMorphismEffect;
+  final StringsCallBack? onEmojiTap;
+  final GlassMorphismConfiguration? glassMorphismConfig;
+
+  ReactionPopupConfiguration({
+    this.showGlassMorphismEffect = false,
+    this.backgroundColor,
+    this.shadow,
+    this.animationDuration,
+    this.maxWidth,
+    this.margin,
+    this.padding,
+    this.onEmojiTap,
+    this.emojiConfig,
+    this.glassMorphismConfig,
+  });
+}
+
+class EmojiConfiguration {
+  final List<String>? emojiList;
+  final double? size;
+
+  EmojiConfiguration({
+    this.emojiList,
+    this.size,
+  });
+}
+
+class GlassMorphismConfiguration {
+  final Color? borderColor;
+  final double? strokeWidth;
+  final Color? backgroundColor;
+  final double? borderRadius;
+
+  GlassMorphismConfiguration({
+    this.borderColor,
+    this.strokeWidth,
+    this.backgroundColor,
+    this.borderRadius,
+  });
+}