Merge pull request #127 from GetStream/hotfix/messageinput

Hotfix/messageinput

example/ios/Flutter/.last_build_id

@@ -1 +1 @@
-bdf1751976c4ee1e2ef7638eabcfd1ea
+bb5f9103d9045cd6244bcae1f5f343e5

example/pubspec.yaml

@@ -1,6 +1,6 @@
 name: example
 description: A new Flutter project.
-version: 1.0.39+41
+version: 1.0.40+42
 
 environment:
   sdk: ">=2.2.2 <3.0.0"

lib/src/giphy_attachment.dart

@@ -41,7 +41,10 @@ class GiphyAttachment extends StatelessWidget {
     return Column(
       mainAxisSize: MainAxisSize.min,
       children: [
-        Card(
+        DecoratedBox(
+          decoration: BoxDecoration(),
+          child: Card(
+            elevation: 2,
             clipBehavior: Clip.antiAlias,
             shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.only(
@@ -61,7 +64,8 @@ class GiphyAttachment extends StatelessWidget {
                       padding: const EdgeInsets.all(8.0),
                       child: GestureDetector(
                         onTap: () {
-                        Navigator.push(context, MaterialPageRoute(builder: (_) {
+                          Navigator.push(context,
+                              MaterialPageRoute(builder: (_) {
                             return FullScreenImage(
                               url: attachment.imageUrl ??
                                   attachment.assetUrl ??
@@ -118,7 +122,8 @@ class GiphyAttachment extends StatelessWidget {
                               Text(
                                 'GIPHY',
                                 style: TextStyle(
-                                color: StreamChatTheme.of(context).accentColor,
+                                  color:
+                                      StreamChatTheme.of(context).accentColor,
                                   fontWeight: FontWeight.bold,
                                   fontSize: 11.0,
                                 ),
@@ -133,16 +138,21 @@ class GiphyAttachment extends StatelessWidget {
                 if (attachment.title != null)
                   Container(
                     alignment: Alignment.bottomCenter,
+                    child: Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 8.0),
                       child: Row(
                         mainAxisAlignment: MainAxisAlignment.spaceBetween,
                         children: [
                           Card(
+                            elevation: 2,
                             child: IconButton(
+                              padding: const EdgeInsets.all(0),
+                              constraints: BoxConstraints.tight(Size(32, 32)),
                               icon: Icon(
                                 StreamIcons.left,
                                 size: 24.0,
                               ),
-                          splashRadius: 24,
+                              splashRadius: 16,
                               onPressed: () {
                                 streamChannel.channel.sendAction(message, {
                                   'image_action': 'shuffle',
@@ -162,12 +172,15 @@ class GiphyAttachment extends StatelessWidget {
                             ),
                           ),
                           Card(
+                            elevation: 2,
                             child: IconButton(
+                              padding: const EdgeInsets.all(0),
+                              constraints: BoxConstraints.tight(Size(32, 32)),
                               icon: Icon(
                                 StreamIcons.right,
                                 size: 24.0,
                               ),
-                          splashRadius: 24,
+                              splashRadius: 16,
                               onPressed: () {
                                 streamChannel.channel.sendAction(message, {
                                   'image_action': 'shuffle',
@@ -179,6 +192,7 @@ class GiphyAttachment extends StatelessWidget {
                         ],
                       ),
                     ),
+                  ),
                 SizedBox(
                   height: 4.0,
                 ),
@@ -233,6 +247,7 @@ class GiphyAttachment extends StatelessWidget {
               ],
             ),
           ),
+        ),
         SizedBox(
           height: 4.0,
         ),

lib/src/message_input.dart

@@ -6,6 +6,7 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:http_parser/http_parser.dart';
 import 'package:image_picker/image_picker.dart';
 import 'package:mime/mime.dart';
@@ -220,22 +221,66 @@ class MessageInputState extends State<MessageInput> {
   }
 
   Widget _buildDmCheckbox() {
-    return Row(
+    return Container(
+      height: 36,
+      padding: const EdgeInsets.only(
+        left: 12,
+        bottom: 12,
+        top: 8,
+      ),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.center,
         children: [
-        Checkbox(
+          Container(
-          value: _sendAsDm,
+            height: 16,
-          onChanged: (val) => setState(
+            width: 16,
-            () {
+            foregroundDecoration: BoxDecoration(
-              _sendAsDm = val;
+              border: _sendAsDm
+                  ? null
+                  : Border.all(
+                      color: Colors.black.withOpacity(.5),
+                      width: 2,
+                    ),
+              borderRadius: BorderRadius.circular(3),
+            ),
+            child: Center(
+              child: Material(
+                borderRadius: BorderRadius.circular(3),
+                color: _sendAsDm
+                    ? StreamChatTheme.of(context).accentColor
+                    : Colors.white,
+                child: InkWell(
+                  onTap: () {
+                    setState(() {
+                      _sendAsDm = !_sendAsDm;
+                    });
                   },
+                  child: AnimatedCrossFade(
+                    duration: Duration(milliseconds: 300),
+                    reverseDuration: Duration(milliseconds: 300),
+                    crossFadeState: _sendAsDm
+                        ? CrossFadeState.showFirst
+                        : CrossFadeState.showSecond,
+                    firstChild: Icon(
+                      StreamIcons.check,
+                      size: 16.0,
+                      color: Colors.white,
+                    ),
+                    secondChild: SizedBox(
+                      height: 16,
+                      width: 16,
+                    ),
+                  ),
+                ),
+              ),
             ),
-          activeColor: StreamChatTheme.of(context).accentColor,
           ),
           Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 8.0),
+            padding: const EdgeInsets.symmetric(horizontal: 16.0),
             child: Text('Send also as direct message'),
           ),
         ],
+      ),
     );
   }
 
@@ -483,13 +528,6 @@ class MessageInputState extends State<MessageInput> {
             child: Container(
               constraints: BoxConstraints.loose(Size.fromHeight(400)),
               decoration: BoxDecoration(
-                  // boxShadow: [
-                  //   BoxShadow(
-                  //     spreadRadius: -8,
-                  //     blurRadius: 5.0,
-                  //     offset: Offset(0, -4),
-                  //   ),
-                  // ],
                   color: StreamChatTheme.of(context).primaryColor,
                   borderRadius: BorderRadius.circular(8.0)),
               child: ListView(
@@ -507,25 +545,19 @@ class MessageInputState extends State<MessageInput> {
                             child: Icon(StreamIcons.lightning,
                                 color: StreamChatTheme.of(context).accentColor),
                           ),
-                          Text('Instant Commands')
+                          Text(
+                            'Instant Commands',
+                            style: TextStyle(
+                              color: Colors.black.withOpacity(.5),
+                            ),
+                          )
                         ],
                       ),
                     ),
                   ...commands
                       .map(
                         (c) => ListTile(
-                          leading: c.name == 'giphy'
+                          leading: c.name == 'giphy' ? _buildGiphyIcon() : null,
-                              ? CircleAvatar(
-                                  backgroundColor: Colors.black,
-                                  child: Image.asset(
-                                    'images/giphy_icon.png',
-                                    package: 'stream_chat_flutter',
-                                    width: 16.0,
-                                    height: 16.0,
-                                  ),
-                                  maxRadius: 12.0,
-                                )
-                              : null,
                           title: Text.rich(
                             TextSpan(
                               text: '${c.name.capitalize()}',
@@ -566,6 +598,31 @@ class MessageInputState extends State<MessageInput> {
     });
   }
 
+  CircleAvatar _buildGiphyIcon() {
+    if (kIsWeb) {
+      return CircleAvatar(
+        backgroundColor: Colors.black,
+        child: Image.asset(
+          'images/giphy_icon.png',
+          package: 'stream_chat_flutter',
+          width: 24.0,
+          height: 24.0,
+        ),
+        radius: 12,
+      );
+    } else {
+      return CircleAvatar(
+        child: SvgPicture.asset(
+          'svgs/giphy_icon.svg',
+          package: 'stream_chat_flutter',
+          width: 24.0,
+          height: 24.0,
+        ),
+        radius: 12,
+      );
+    }
+  }
+
   OverlayEntry _buildMentionsOverlayEntry() {
     final splits = textEditingController.text
         .substring(0, textEditingController.value.selection.start)
@@ -606,13 +663,6 @@ class MessageInputState extends State<MessageInput> {
           child: Container(
             constraints: BoxConstraints.loose(Size.fromHeight(400)),
             decoration: BoxDecoration(
-              boxShadow: [
-                BoxShadow(
-                  spreadRadius: -8,
-                  blurRadius: 5.0,
-                  offset: Offset(0, -4),
-                ),
-              ],
               color: StreamChatTheme.of(context).primaryColor,
             ),
             child: FutureBuilder<List<Member>>(
@@ -625,6 +675,12 @@ class MessageInputState extends State<MessageInput> {
                     children: snapshot.data
                         .map((m) => ListTile(
                               leading: UserAvatar(
+                                constraints: BoxConstraints.tight(
+                                  Size(
+                                    40,
+                                    40,
+                                  ),
+                                ),
                                 user: m.user,
                               ),
                               title: Text(

pubspec.yaml

@@ -15,6 +15,7 @@ dependencies:
   photo_view: ^0.10.1
   rxdart: ^0.24.1
   jiffy: ^3.0.1
+  flutter_svg: ^0.19.1
   flutter_portal: ^0.3.0
   cached_network_image: ^2.2.0+1
   flutter_markdown: ^0.5.0
@@ -35,7 +36,8 @@ dependencies:
 
 flutter:
   assets:
-    - images/giphy_icon.png
+    - images/
+    - svgs/
   fonts:
    - family: stream-icons
      fonts:

svgs/giphy_icon.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="black"/>
+<rect x="7" y="7" width="1" height="10" fill="#00FF99"/>
+<rect x="16" y="10" width="1" height="8" fill="#9D34FF"/>
+<rect x="7" y="6" width="7" height="1" fill="#FFFF9C"/>
+<rect x="7" y="17" width="9" height="1" fill="#00CCFF"/>
+<path d="M14 6H15V7.5H16V9H17V10H14V6Z" fill="#FF6666"/>
+</svg>