Improvements on messaging UI, and fix on minor bugs on NestedScroll

lib/messaging/conversation.dart

@@ -7,6 +7,7 @@ import 'package:flutter/widgets.dart';
 import 'package:lantern/messaging/messaging_model.dart';
 import 'package:lantern/messaging/widgets/disappearing_timer_action.dart';
 import 'package:lantern/messaging/widgets/message_bubble.dart';
+import 'package:lantern/messaging/widgets/messaging_emoji_picker.dart';
 import 'package:lantern/messaging/widgets/staging_container_item.dart';
 import 'package:lantern/messaging/widgets/voice_recorder.dart';
 import 'package:lantern/model/model.dart';
@@ -22,8 +23,9 @@ import 'package:wechat_camera_picker/wechat_camera_picker.dart';
 
 class Conversation extends StatefulWidget {
   final Contact _contact;
+  final ScrollController scrollController;
 
-  Conversation(this._contact) : super();
+  Conversation(this._contact, this.scrollController) : super();
 
   @override
   _ConversationState createState() => _ConversationState();
@@ -315,7 +317,7 @@ class _ConversationState extends State<Conversation>
               padding: const EdgeInsets.all(8),
               child: _buildMessageBar(context),
             ),
-            if (_emojiShowing) _buildEmojiKeyboard(),
+            _buildEmojiKeyboard(width: 150.0),
           ]),
           // Voice recorder
           if (_recording)
@@ -351,6 +353,7 @@ class _ConversationState extends State<Conversation>
         itemCount: messageRecords.length,
         itemBuilder: (context, index) {
           return MessageBubble(
+            scrollController: widget.scrollController,
             message: messageRecords.elementAt(index),
             priorMessage: index >= messageRecords.length - 1
                 ? null
@@ -457,55 +460,22 @@ class _ConversationState extends State<Conversation>
     ]);
   }
 
-  Offstage _buildEmojiKeyboard() {
-    // https://github.com/Fintasys/emoji_picker_flutter
-    return Offstage(
-      offstage: !_emojiShowing,
-      child: Container(
-        height: 200,
-        child: EmojiPicker(
-            onEmojiSelected: (Category category, Emoji emoji) {
-              setState(() {
-                _isSendIconVisible = true;
-              });
-              _newMessage
-                ..text += emoji.emoji
-                ..selection = TextSelection.fromPosition(
-                    TextPosition(offset: _newMessage.text.length));
-            },
-            onBackspacePressed: () {
-              _newMessage
-                ..text = _newMessage.text.characters.skipLast(1).toString()
-                ..selection = TextSelection.fromPosition(
-                    TextPosition(offset: _newMessage.text.length));
-            },
-            config: Config(
-              columns: 10,
-              emojiSizeMax: 17.0,
-              verticalSpacing: 0,
-              horizontalSpacing: 0,
-              initCategory: Category.SMILEYS,
-              bgColor: const Color(0xFFF2F2F2),
-              // TODO: generalize in theme
-              indicatorColor: Colors.black,
-              // TODO: generalize in theme
-              iconColor: Colors.grey,
-              iconColorSelected: Colors.black,
-              // TODO: generalize in theme
-              progressIndicatorColor: Colors.black,
-              // TODO: generalize in theme
-              backspaceColor: Colors.black,
-              // TODO: generalize in theme
-              showRecentsTab: true,
-              recentsLimit: 28,
-              noRecentsText: 'No Recents'.i18n,
-              noRecentsStyle:
-                  const TextStyle(fontSize: 16, color: Colors.black26),
-              // TODO: generalize in theme
-              categoryIcons: const CategoryIcons(),
-              buttonMode: ButtonMode.MATERIAL,
-            )),
-      ),
-    );
-  }
+  Widget _buildEmojiKeyboard({required double width}) => MessagingEmojiPicker(
+        showEmojis: _emojiShowing,
+        emptySuggestions: 'No Recents'.i18n,
+        width: width,
+        onBackspacePressed: () {
+          _newMessage
+            ..text = _newMessage.text.characters.skipLast(1).toString()
+            ..selection = TextSelection.fromPosition(
+                TextPosition(offset: _newMessage.text.length));
+        },
+        onEmojiSelected: (category, emoji) {
+          setState(() => _isSendIconVisible = true);
+          _newMessage
+            ..text += emoji.emoji
+            ..selection = TextSelection.fromPosition(
+                TextPosition(offset: _newMessage.text.length));
+        },
+      );
 }

lib/messaging/messaging.dart

@@ -8,9 +8,11 @@ import 'conversations.dart';
 
 class MessagesTab extends StatefulWidget {
   final String _initialRoute;
+  final ScrollController scrollController;
   final dynamic _initialRouteArguments;
 
-  MessagesTab(this._initialRoute, this._initialRouteArguments);
+  MessagesTab(
+      this.scrollController, this._initialRoute, this._initialRouteArguments);
 
   @override
   _MessagesTabState createState() => _MessagesTabState();
@@ -40,7 +42,8 @@ class _MessagesTabState extends State<MessagesTab>
               break;
             case '/conversation':
               builder = (BuildContext context) => Conversation(
-                  settings.arguments ?? widget._initialRouteArguments);
+                  settings.arguments ?? widget._initialRouteArguments,
+                  widget.scrollController);
               break;
             default:
               throw Exception('unknown route ${settings.name}');

lib/messaging/widgets/message_bubble.dart

@@ -1,3 +1,4 @@
+import 'package:lantern/messaging/widgets/reactions.dart';
 import 'package:lantern/model/model.dart';
 import 'package:lantern/model/protos_flutteronly/messaging.pb.dart';
 import 'package:lantern/package_store.dart';
@@ -18,11 +19,13 @@ class MessageBubble extends StatelessWidget {
     required this.contact,
     required this.onReply,
     required this.onTapReply,
+    required this.scrollController,
   }) : super(key: key);
 
   final PathAndValue<StoredMessage> message;
   final StoredMessage? priorMessage;
   final StoredMessage? nextMessage;
+  final ScrollController scrollController;
   final Contact contact;
   final Function(StoredMessage?) onReply;
   final Function(PathAndValue<StoredMessage>) onTapReply;
@@ -109,26 +112,6 @@ class MessageBubble extends StatelessWidget {
     BuildContext context,
     MessagingModel model,
   ) {
-    final reactionOptions = reactions.keys.toList();
-    final reactionArray = reactionOptions
-        .map((e) => Container(
-              margin: const EdgeInsets.symmetric(vertical: 2, horizontal: 8),
-              padding: const EdgeInsets.symmetric(vertical: 2, horizontal: 4),
-              child: Container(
-                padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 4),
-                child: GestureDetector(
-                  onTap: () {
-                    model.react(message, e);
-                    Navigator.pop(context);
-                  },
-                  child: Transform.scale(
-                      scale: 1.3,
-                      child: Text(e, style: const TextStyle(fontSize: 16))),
-                ),
-              ),
-            ))
-        .toList(growable: false);
-
     if (wasDeleted) {
       final humanizedSenderName =
           matchIdToDisplayName(msg.remotelyDeletedBy.id, contact);
@@ -139,7 +122,15 @@ class MessageBubble extends StatelessWidget {
     return FocusedMenuHolder(
         menuItems: [
           FocusedMenuItem(
-            title: Row(children: [...reactionArray]),
+            title: Flexible(
+              fit: FlexFit.tight,
+              child: Reactions(
+                scrollController: scrollController,
+                reactionOptions: reactions.keys.toList(),
+                message: message,
+                messagingModel: model,
+              ),
+            ),
             onPressed: () {},
           ),
           FocusedMenuItem(

lib/messaging/widgets/messaging_emoji_picker.dart

@@ -0,0 +1,56 @@
+import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
+import 'package:flutter/material.dart';
+
+class MessagingEmojiPicker extends StatelessWidget {
+  final bool showEmojis;
+  final String emptySuggestions;
+  final double height;
+  final double width;
+  final Function(Category, Emoji) onEmojiSelected;
+  final VoidCallback? onBackspacePressed;
+
+  const MessagingEmojiPicker({
+    required this.showEmojis,
+    required this.emptySuggestions,
+    this.height = 200,
+    this.onBackspacePressed,
+    required this.width,
+    required this.onEmojiSelected,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) => AnimatedCrossFade(
+        firstChild: const SizedBox(),
+        secondChild: _showEmojiKeyBoard(context: context),
+        firstCurve: Curves.easeIn,
+        secondCurve: Curves.easeOut,
+        reverseDuration: const Duration(milliseconds: 600),
+        crossFadeState:
+            !showEmojis ? CrossFadeState.showFirst : CrossFadeState.showSecond,
+        duration: const Duration(milliseconds: 600),
+      );
+
+  Widget _showEmojiKeyBoard({required BuildContext context}) => Container(
+        height: height,
+        child: EmojiPicker(
+          key: key,
+          onBackspacePressed: onBackspacePressed,
+          onEmojiSelected: onEmojiSelected,
+          config: Config(
+            initCategory: Category.SMILEYS,
+            columns: 10,
+            emojiSizeMax: 17.0,
+            iconColor: Theme.of(context).primaryIconTheme.color ?? Colors.grey,
+            iconColorSelected:
+                Theme.of(context).accentIconTheme.color ?? Colors.blue,
+            noRecentsStyle: Theme.of(context).textTheme.bodyText1 ??
+                const TextStyle(fontSize: 16, color: Colors.black26),
+            progressIndicatorColor: Theme.of(context).indicatorColor,
+            noRecentsText: emptySuggestions,
+            bgColor: Theme.of(context).backgroundColor,
+            indicatorColor: Theme.of(context).indicatorColor,
+          ),
+        ),
+      );
+}

lib/messaging/widgets/reactions.dart

@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+import 'package:lantern/messaging/messaging_model.dart';
+import 'package:lantern/model/model.dart';
+import 'package:lantern/model/protos_flutteronly/messaging.pbserver.dart';
+
+class Reactions extends StatelessWidget {
+  final List<String> reactionOptions;
+  final MessagingModel messagingModel;
+  final PathAndValue<StoredMessage> message;
+  final ScrollController scrollController;
+  const Reactions(
+      {required this.reactionOptions,
+      required this.message,
+      required this.messagingModel,
+      required this.scrollController,
+      Key? key})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) => ListView.separated(
+        scrollDirection: Axis.horizontal,
+        physics: const ClampingScrollPhysics(),
+        controller: scrollController,
+        itemBuilder: (context, index) => GestureDetector(
+          onTap: () async {
+            await messagingModel.react(message, reactionOptions[index]);
+            Navigator.pop(context);
+          },
+          child: Center(
+            child: Container(
+              padding:
+                  const EdgeInsets.symmetric(horizontal: 4.0, vertical: 4.0),
+              child: Text(
+                reactionOptions[index],
+                style: Theme.of(context).textTheme.headline6,
+              ),
+            ),
+          ),
+        ),
+        separatorBuilder: (context, index) => const SizedBox(
+          width: 12.0,
+        ),
+        itemCount: reactionOptions.length,
+      );
+}