use svg icon

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,16 +221,72 @@ class MessageInputState extends State<MessageInput> {
   }
 
   Widget _buildDmCheckbox() {
+    return Container(
+      height: 36,
+      padding: const EdgeInsets.only(
+        left: 12,
+        bottom: 12,
+        top: 8,
+      ),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          Center(
+            child: Container(
+              height: 16,
+              width: 16,
+              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(
+                      Icons.check,
+                      size: 16.0,
+                      color: Colors.white,
+                    ),
+                    secondChild: SizedBox(
+                      height: 16,
+                      width: 16,
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 8.0),
+            child: Text('Send also as direct message'),
+          ),
+        ],
+      ),
+    );
     return Row(
       children: [
-        Checkbox(
-          value: _sendAsDm,
-          onChanged: (val) => setState(
-            () {
-              _sendAsDm = val;
-            },
+        ClipRRect(
+          clipBehavior: Clip.hardEdge,
+          borderRadius: BorderRadius.circular(1),
+          child: Checkbox(
+            value: _sendAsDm,
+            onChanged: (val) => setState(
+              () {
+                _sendAsDm = val;
+              },
+            ),
+            activeColor: StreamChatTheme.of(context).accentColor,
           ),
-          activeColor: StreamChatTheme.of(context).accentColor,
         ),
         Padding(
           padding: const EdgeInsets.symmetric(horizontal: 8.0),
@@ -500,25 +557,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'
-                              ? 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,
+                          leading: c.name == 'giphy' ? _buildGiphyIcon() : null,
                           title: Text.rich(
                             TextSpan(
                               text: '${c.name.capitalize()}',
@@ -559,6 +610,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)

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>