fix edit message

example/ios/Podfile.lock

@@ -1,10 +1,20 @@
 PODS:
+  - file_picker (0.0.1):
+    - Flutter
   - Flutter (1.0.0)
+  - flutter_plugin_android_lifecycle (0.0.1):
+    - Flutter
   - FMDB (2.7.5):
     - FMDB/standard (= 2.7.5)
   - FMDB/standard (2.7.5)
+  - image_picker (0.0.1):
+    - Flutter
+  - keyboard_visibility (0.5.0):
+    - Flutter
+    - Reachability
   - path_provider (0.0.1):
     - Flutter
+  - Reachability (3.2)
   - screen (0.0.1):
     - Flutter
   - sqflite (0.0.1):
@@ -22,7 +32,11 @@ PODS:
     - Flutter
 
 DEPENDENCIES:
+  - file_picker (from `.symlinks/plugins/file_picker/ios`)
   - Flutter (from `Flutter`)
+  - flutter_plugin_android_lifecycle (from `.symlinks/plugins/flutter_plugin_android_lifecycle/ios`)
+  - image_picker (from `.symlinks/plugins/image_picker/ios`)
+  - keyboard_visibility (from `.symlinks/plugins/keyboard_visibility/ios`)
   - path_provider (from `.symlinks/plugins/path_provider/ios`)
   - screen (from `.symlinks/plugins/screen/ios`)
   - sqflite (from `.symlinks/plugins/sqflite/ios`)
@@ -35,10 +49,19 @@ DEPENDENCIES:
 SPEC REPOS:
   trunk:
     - FMDB
+    - Reachability
 
 EXTERNAL SOURCES:
+  file_picker:
+    :path: ".symlinks/plugins/file_picker/ios"
   Flutter:
     :path: Flutter
+  flutter_plugin_android_lifecycle:
+    :path: ".symlinks/plugins/flutter_plugin_android_lifecycle/ios"
+  image_picker:
+    :path: ".symlinks/plugins/image_picker/ios"
+  keyboard_visibility:
+    :path: ".symlinks/plugins/keyboard_visibility/ios"
   path_provider:
     :path: ".symlinks/plugins/path_provider/ios"
   screen:
@@ -57,9 +80,14 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/video_player_web/ios"
 
 SPEC CHECKSUMS:
+  file_picker: 408623be2125b79a4539cf703be3d4b3abe5e245
   Flutter: 0e3d915762c693b495b44d77113d4970485de6ec
+  flutter_plugin_android_lifecycle: 47de533a02850f070f5696a623995e93eddcdb9b
   FMDB: 2ce00b547f966261cd18927a3ddb07cb6f3db82a
+  image_picker: e3eacd46b94694dde7cf2705955cece853aa1a8f
+  keyboard_visibility: 96a24de806fe6823c3ad956c01ba2ec6d056616f
   path_provider: fb74bd0465e96b594bb3b5088ee4a4e7bb1f2a9d
+  Reachability: 33e18b67625424e47b6cde6d202dce689ad7af96
   screen: abd91ca7bf3426e1cc3646d27e9b2358d6bf07b0
   sqflite: 4001a31ff81d210346b500c55b17f4d6c7589dd0
   url_launcher: a1c0cc845906122c4784c542523d8cacbded5626

lib/src/message_input.dart

@@ -76,15 +76,12 @@ class MessageInput extends StatefulWidget {
 }
 
 class _MessageInputState extends State<MessageInput> {
+  final List<_SendingAttachment> _attachments = [];
+  final _focusNode = FocusNode();
+
   TextEditingController _textController;
   bool _messageIsPresent = false;
   bool _typingStarted = false;
-  final List<_SendingAttachment> _attachments = [];
-
-  final _focusNode = FocusNode();
-
-  bool _modalOn = false;
-
   OverlayEntry _commandsOverlay;
 
   @override
@@ -95,96 +92,12 @@ class _MessageInputState extends State<MessageInput> {
         child: Stack(
           overflow: Overflow.visible,
           children: <Widget>[
-            Positioned.fill(
+            _buildBorder(context),
-              child: Container(
-                width: MediaQuery.of(context).size.width,
-                padding: EdgeInsets.all(2),
-                decoration: BoxDecoration(
-                  borderRadius: BorderRadius.circular(10.0),
-                  gradient: _getGradient(context),
-                ),
-                child: Container(
-                  decoration: BoxDecoration(
-                    color: Colors.white,
-                    borderRadius: BorderRadius.circular(10.0),
-                  ),
-                  child: Container(
-                    decoration: BoxDecoration(
-                      color: StreamChatTheme.of(context)
-                          .channelTheme
-                          .inputBackground,
-                      borderRadius: BorderRadius.circular(10.0),
-                      border: Border.all(
-                          color: _typingStarted
-                              ? Colors.transparent
-                              : Colors.black.withOpacity(.2)),
-                    ),
-                  ),
-                ),
-              ),
-            ),
             Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 _buildAttachments(),
-                Flex(
+                _buildTextField(context),
-                  direction: Axis.horizontal,
-                  children: <Widget>[
-                    _buildAttachmentButton(),
-                    Expanded(
-                      child: TextField(
-                        minLines: null,
-                        maxLines: null,
-                        onSubmitted: (_) {
-                          _sendMessage(context);
-                        },
-                        controller: _textController,
-                        focusNode: _focusNode,
-                        onChanged: (s) {
-                          StreamChannel.of(context).channel.keyStroke();
-                          setState(() {
-                            _messageIsPresent = s.trim().isNotEmpty;
-                          });
-
-                          if (s.startsWith('/')) {
-                            _modalOn = true;
-
-                            _commandsOverlay?.remove();
-                            _commandsOverlay = null;
-                            _commandsOverlay = _buildOverlayEntry();
-                            Overlay.of(context).insert(_commandsOverlay);
-                          } else if (!s.startsWith('/') && _modalOn) {
-                            _modalOn = false;
-                            _commandsOverlay?.remove();
-                            _commandsOverlay = null;
-                          }
-                        },
-                        onTap: () {
-                          setState(() {
-                            _typingStarted = true;
-                          });
-                        },
-                        style: Theme.of(context).textTheme.body1,
-                        autofocus: false,
-                        decoration: InputDecoration(
-                          hintText: 'Write a message',
-                          prefixText: '   ',
-                          border: InputBorder.none,
-                        ),
-                      ),
-                    ),
-                    AnimatedCrossFade(
-                      crossFadeState:
-                          (_messageIsPresent || _attachments.isNotEmpty)
-                              ? CrossFadeState.showFirst
-                              : CrossFadeState.showSecond,
-                      firstChild: _buildSendButton(context),
-                      secondChild: SizedBox(),
-                      duration: Duration(milliseconds: 300),
-                      alignment: Alignment.center,
-                    ),
-                  ],
-                ),
               ],
             ),
           ],
@@ -193,13 +106,110 @@ class _MessageInputState extends State<MessageInput> {
     );
   }
 
+  Flex _buildTextField(BuildContext context) {
+    return Flex(
+      direction: Axis.horizontal,
+      children: <Widget>[
+        _buildAttachmentButton(),
+        _buildTextInput(context),
+        _animateSendButton(context),
+      ],
+    );
+  }
+
+  AnimatedCrossFade _animateSendButton(BuildContext context) {
+    print(
+        '_messageIsPresent || _attachments.isNotEmpty: ${_messageIsPresent || _attachments.isNotEmpty}');
+    print('_attachments.isNotEmpty: ${_attachments.isNotEmpty}');
+    print('_messageIsPresent: ${_messageIsPresent}');
+    return AnimatedCrossFade(
+      crossFadeState: (_messageIsPresent || _attachments.isNotEmpty)
+          ? CrossFadeState.showFirst
+          : CrossFadeState.showSecond,
+      firstChild: _buildSendButton(context),
+      secondChild: SizedBox(),
+      duration: Duration(milliseconds: 300),
+      alignment: Alignment.center,
+    );
+  }
+
+  Expanded _buildTextInput(BuildContext context) {
+    return Expanded(
+      child: TextField(
+        minLines: null,
+        maxLines: null,
+        onSubmitted: (_) {
+          _sendMessage(context);
+        },
+        controller: _textController,
+        focusNode: _focusNode,
+        onChanged: (s) {
+          StreamChannel.of(context).channel.keyStroke();
+
+          setState(() {
+            _messageIsPresent = s.trim().isNotEmpty;
+          });
+
+          _commandsOverlay?.remove();
+          _commandsOverlay = null;
+
+          if (s.startsWith('/')) {
+            _commandsOverlay = _buildOverlayEntry();
+            Overlay.of(context).insert(_commandsOverlay);
+          }
+        },
+        onTap: () {
+          setState(() {
+            _typingStarted = true;
+          });
+        },
+        style: Theme.of(context).textTheme.body1,
+        autofocus: false,
+        decoration: InputDecoration(
+          hintText: 'Write a message',
+          prefixText: '   ',
+          border: InputBorder.none,
+        ),
+      ),
+    );
+  }
+
+  Positioned _buildBorder(BuildContext context) {
+    return Positioned.fill(
+      child: Container(
+        width: MediaQuery.of(context).size.width,
+        padding: EdgeInsets.all(2),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(10.0),
+          gradient: _getGradient(context),
+        ),
+        child: Container(
+          decoration: BoxDecoration(
+            color: Colors.white,
+            borderRadius: BorderRadius.circular(10.0),
+          ),
+          child: Container(
+            decoration: BoxDecoration(
+              color: StreamChatTheme.of(context).channelTheme.inputBackground,
+              borderRadius: BorderRadius.circular(10.0),
+              border: Border.all(
+                  color: _typingStarted
+                      ? Colors.transparent
+                      : Colors.black.withOpacity(.2)),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
   OverlayEntry _buildOverlayEntry() {
     final text = _textController.text;
     final commands = StreamChannel.of(context)
         .channel
         .config
         .commands
-        .where((c) => c.name.startsWith(text.substring(1)))
+        .where((c) => c.name.startsWith(text.replaceFirst('/', '')))
         .toList();
 
     RenderBox renderBox = context.findRenderObject();
@@ -253,15 +263,14 @@ class _MessageInputState extends State<MessageInput> {
   void _setCommand(Command c) {
     setState(() {
       _textController.value = TextEditingValue(
-        text: '/${c.name}',
+        text: '/${c.name} ',
         selection: TextSelection.fromPosition(
           TextPosition(
-            offset: c.name.length + 1,
+            offset: c.name.length + 2,
           ),
         ),
       );
     });
-    _modalOn = false;
     _commandsOverlay?.remove();
     _commandsOverlay = null;
   }
@@ -530,8 +539,6 @@ class _MessageInputState extends State<MessageInput> {
       _typingStarted = false;
     });
 
-    _modalOn = false;
-
     _commandsOverlay?.remove();
     _commandsOverlay = null;
 
@@ -541,7 +548,10 @@ class _MessageInputState extends State<MessageInput> {
       final message = widget.editMessage.copyWith(
         parentId: widget.parentMessage?.id,
         text: text,
-        attachments: _getAttachments(attachments).toList(),
+        attachments: widget.editMessage.attachments
+                .where((attachment) => attachment.type == 'giphy')
+                .toList() +
+            _getAttachments(attachments).toList(),
       );
       StreamChat.of(context).client.updateMessage(message).then((_) {
         if (widget.onMessageSent != null) {
@@ -589,17 +599,21 @@ class _MessageInputState extends State<MessageInput> {
   void initState() {
     super.initState();
 
-    _keyboardListener = KeyboardVisibilityNotification().addNewListener(
+    _keyboardListener =
-      onChange: (_) {
+        KeyboardVisibilityNotification().addNewListener(onHide: () {
-        if (_modalOn) {
+      if (_commandsOverlay != null) {
-          _commandsOverlay?.remove();
+        _commandsOverlay.remove();
+      }
+    }, onShow: () {
+      if (_commandsOverlay != null) {
+        if (_textController.text.startsWith('/')) {
           WidgetsBinding.instance.addPostFrameCallback((_) {
             _commandsOverlay = _buildOverlayEntry();
             Overlay.of(context).insert(_commandsOverlay);
           });
         }
-      },
+      }
-    );
+    });
 
     if (widget.editMessage != null) {
       _textController = TextEditingController(text: widget.editMessage.text);
@@ -614,6 +628,18 @@ class _MessageInputState extends State<MessageInput> {
             url: attachment.imageUrl,
             uploaded: true,
           ));
+        } else if (attachment.type == 'video') {
+          _attachments.add(_SendingAttachment(
+            type: FileType.VIDEO,
+            url: attachment.assetUrl,
+            uploaded: true,
+          ));
+        } else if (attachment.type != 'giphy') {
+          _attachments.add(_SendingAttachment(
+            type: FileType.ANY,
+            url: attachment.assetUrl,
+            uploaded: true,
+          ));
         }
       });
     } else {

lib/src/message_widget.dart

@@ -574,74 +574,77 @@ class _MessageWidgetState extends State<MessageWidget>
         ),
       ),
       builder: (context) {
-        return Flex(
+        return StreamChannel(
-          direction: Axis.vertical,
+          channel: streamChannel.channel,
-          mainAxisAlignment: MainAxisAlignment.end,
+          child: Flex(
-          mainAxisSize: MainAxisSize.min,
+            direction: Axis.vertical,
-          children: <Widget>[
+            mainAxisAlignment: MainAxisAlignment.end,
-            Padding(
+            mainAxisSize: MainAxisSize.min,
-              padding: const EdgeInsets.only(
+            children: <Widget>[
-                top: 16.0,
+              Padding(
-                left: 16.0,
+                padding: const EdgeInsets.only(
-                right: 16.0,
+                  top: 16.0,
-              ),
+                  left: 16.0,
-              child: Row(
+                  right: 16.0,
-                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                ),
-                children: <Widget>[
+                child: Row(
-                  Text(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                    'Edit message',
+                  children: <Widget>[
-                    style: Theme.of(context).textTheme.title,
+                    Text(
-                  ),
+                      'Edit message',
-                  Container(
+                      style: Theme.of(context).textTheme.title,
-                    height: 30,
+                    ),
-                    padding: const EdgeInsets.all(2.0),
+                    Container(
-                    child: AspectRatio(
+                      height: 30,
-                      aspectRatio: 1,
+                      padding: const EdgeInsets.all(2.0),
-                      child: RawMaterialButton(
+                      child: AspectRatio(
-                        shape: RoundedRectangleBorder(
+                        aspectRatio: 1,
-                          borderRadius: BorderRadius.circular(4),
+                        child: RawMaterialButton(
-                        ),
+                          shape: RoundedRectangleBorder(
-                        elevation: 0,
+                            borderRadius: BorderRadius.circular(4),
-                        highlightElevation: 0,
+                          ),
-                        focusElevation: 0,
+                          elevation: 0,
-                        disabledElevation: 0,
+                          highlightElevation: 0,
-                        hoverElevation: 0,
+                          focusElevation: 0,
-                        onPressed: () {
+                          disabledElevation: 0,
-                          Navigator.of(context).pop();
+                          hoverElevation: 0,
-                        },
+                          onPressed: () {
-                        fillColor: Colors.black.withOpacity(.1),
+                            Navigator.of(context).pop();
-                        padding: EdgeInsets.all(4),
+                          },
-                        child: Icon(
+                          fillColor: Colors.black.withOpacity(.1),
-                          Icons.close,
+                          padding: EdgeInsets.all(4),
-                          size: 15,
+                          child: Icon(
-                          color: Colors.black,
+                            Icons.close,
+                            size: 15,
+                            color: Colors.black,
+                          ),
                         ),
                       ),
                     ),
-                  ),
+                  ],
-                ],
+                ),
               ),
-            ),
+              Padding(
-            Padding(
+                padding: EdgeInsets.only(
-              padding: EdgeInsets.only(
+                  bottom: MediaQuery.of(context).viewInsets.bottom,
-                bottom: MediaQuery.of(context).viewInsets.bottom,
+                ),
+                child: MessageInput(
+                  editMessage: widget.message,
+                  parentMessage: widget.isParent
+                      ? StreamChannel.of(context)
+                          .channel
+                          .state
+                          .messages
+                          .firstWhere((message) =>
+                              message.id == widget.message.parentId)
+                      : null,
+                  onMessageSent: (_) {
+                    Navigator.pop(context);
+                  },
+                ),
               ),
-              child: MessageInput(
+            ],
-                editMessage: widget.message,
+          ),
-                parentMessage: widget.isParent
-                    ? StreamChannel.of(context)
-                        .channel
-                        .state
-                        .messages
-                        .firstWhere(
-                            (message) => message.id == widget.message.parentId)
-                    : null,
-                onMessageSent: (_) {
-                  Navigator.pop(context);
-                },
-              ),
-            ),
-          ],
         );
       },
     );
@@ -719,6 +722,7 @@ class _MessageWidgetState extends State<MessageWidget>
       imageUrl:
           attachment.thumbUrl ?? attachment.imageUrl ?? attachment.assetUrl,
       fit: BoxFit.cover,
+      placeholderFadeInDuration: Duration(milliseconds: 300),
       placeholder: (_, __) {
         return SizedBox(
           height: 200,