From 83d68c4baf8c60ebf5c52ce85de9cb0ee1424257 Mon Sep 17 00:00:00 2001
From: xsahil03x <xdsahil@gmail.com>
Date: Thu, 19 Nov 2020 13:14:08 +0530
Subject: [PATCH] [NewChatScreen] Add create group button, Finishing touches

---
 example/lib/chips_input_text_field.dart |  2 +-
 example/lib/main.dart                   | 28 ++++++++++++-
 example/lib/neumorphic_button.dart      | 52 +++++++++++++++++++++++++
 3 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 example/lib/neumorphic_button.dart

diff --git a/example/lib/chips_input_text_field.dart b/example/lib/chips_input_text_field.dart
index e62773f7..ef8229c8 100644
--- a/example/lib/chips_input_text_field.dart
+++ b/example/lib/chips_input_text_field.dart
@@ -64,7 +64,7 @@ class ChipInputTextFieldState<T> extends State<ChipsInputTextField<T>> {
   @override
   Widget build(BuildContext context) {
     return Material(
-      elevation: 4,
+      elevation: 2,
       color: Colors.white,
       child: Container(
         child: Padding(
diff --git a/example/lib/main.dart b/example/lib/main.dart
index 0be01886..f681129d 100644
--- a/example/lib/main.dart
+++ b/example/lib/main.dart
@@ -9,6 +9,7 @@ import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 import 'chips_input_text_field.dart';
 import 'notifications_service.dart';
+import 'neumorphic_button.dart';
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
@@ -487,9 +488,34 @@ class _NewChatScreenState extends State<NewChatScreen> {
                   setState(() => _selectedUsers.remove(user));
                 },
               ),
+              if (!_isSearchActive)
+                Container(
+                  color: Colors.white54,
+                  child: InkWell(
+                    onTap: () {},
+                    child: Row(
+                      children: [
+                        NeumorphicButton(
+                          child: Icon(
+                            StreamIcons.group,
+                            color: Colors.blue.shade700,
+                          ),
+                        ),
+                        SizedBox(width: 8),
+                        Text(
+                          'Create a Group',
+                          style: TextStyle(
+                            fontWeight: FontWeight.w500,
+                            fontSize: 18,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
               Container(
                 width: double.maxFinite,
-                color: Colors.white54,
+                color: Colors.grey.shade50,
                 child: Padding(
                   padding: const EdgeInsets.symmetric(
                     vertical: 8,
diff --git a/example/lib/neumorphic_button.dart b/example/lib/neumorphic_button.dart
new file mode 100644
index 00000000..c738cecd
--- /dev/null
+++ b/example/lib/neumorphic_button.dart
@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+
+extension ColorUtils on Color {
+  Color mix(Color another, double amount) {
+    return Color.lerp(this, another, amount);
+  }
+}
+
+class NeumorphicButton extends StatelessWidget {
+  final Widget child;
+  final Color backgroundColor;
+  final EdgeInsets margin;
+  final EdgeInsets padding;
+
+  const NeumorphicButton({
+    Key key,
+    @required this.child,
+    this.backgroundColor = Colors.white,
+    this.margin = const EdgeInsets.all(8),
+    this.padding = const EdgeInsets.all(14),
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: child,
+      margin: margin,
+      padding: padding,
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        color: backgroundColor,
+        gradient: LinearGradient(
+            begin: Alignment.topLeft,
+            end: Alignment.bottomRight,
+            colors: [
+              backgroundColor.mix(Colors.white, 0.2),
+              backgroundColor.mix(Colors.black, 0.1),
+            ]),
+        boxShadow: [
+          BoxShadow(
+            blurRadius: 1,
+            color: backgroundColor.mix(Colors.white, 0.6),
+          ),
+          BoxShadow(
+            blurRadius: 1,
+            color: backgroundColor.mix(Colors.black, 0.3),
+          )
+        ],
+      ),
+    );
+  }
+}