theme: Add colors, Gradient and its implementation

Signed-off-by: Sahil Kumar <[email protected]>

example/lib/advanced_options_page.dart

@@ -271,6 +271,9 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
                             showDialog(
                               barrierDismissible: false,
                               context: context,
+                              barrierColor: StreamChatTheme.of(context)
+                                  .colorTheme
+                                  .overlay,
                               builder: (context) => Center(
                                 child: Container(
                                   decoration: BoxDecoration(

example/lib/choose_user_page.dart

@@ -108,6 +108,9 @@ class ChooseUserPage extends StatelessWidget {
                             showDialog(
                               barrierDismissible: false,
                               context: context,
+                              barrierColor: StreamChatTheme.of(context)
+                                  .colorTheme
+                                  .overlay,
                               builder: (context) => Center(
                                 child: Container(
                                   decoration: BoxDecoration(

example/lib/group_chat_details_screen.dart

@@ -83,10 +83,7 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
                     'NAME',
                     style: TextStyle(
                       fontSize: 12,
-                      color: StreamChatTheme.of(context)
+                      color: StreamChatTheme.of(context).colorTheme.grey,
-                          .colorTheme
-                          .black
-                          .withOpacity(0.5),
                     ),
                   ),
                   SizedBox(width: 16),
@@ -103,11 +100,9 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
                         contentPadding: const EdgeInsets.all(0),
                         hintText: 'Choose a group chat name',
                         hintStyle: TextStyle(
-                            fontSize: 14,
+                          fontSize: 14,
-                            color: StreamChatTheme.of(context)
+                          color: StreamChatTheme.of(context).colorTheme.grey,
-                                .colorTheme
+                        ),
-                                .black
-                                .withOpacity(.5)),
                       ),
                     ),
                   ),
@@ -122,7 +117,7 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
                 icon: StreamSvgIcon.check(
                   size: 24,
                   color: _isGroupNameEmpty
-                      ? Colors.grey
+                      ? StreamChatTheme.of(context).colorTheme.grey
                       : StreamChatTheme.of(context).colorTheme.accentBlue,
                 ),
                 onPressed: _isGroupNameEmpty
@@ -155,14 +150,7 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
             Container(
               width: double.maxFinite,
               decoration: BoxDecoration(
-                gradient: LinearGradient(
+                gradient: StreamChatTheme.of(context).colorTheme.bgGradient,
-                  begin: Alignment.topCenter,
-                  end: Alignment.bottomCenter,
-                  colors: [
-                    StreamChatTheme.of(context).colorTheme.whiteSmoke,
-                    StreamChatTheme.of(context).colorTheme.whiteSnow,
-                  ],
-                ),
               ),
               child: Padding(
                 padding: const EdgeInsets.symmetric(
@@ -172,7 +160,7 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
                 child: Text(
                   '$_totalUsers ${_totalUsers > 1 ? 'Members' : 'Member'}',
                   style: TextStyle(
-                    fontWeight: FontWeight.w500,
+                    color: StreamChatTheme.of(context).colorTheme.grey,
                   ),
                 ),
               ),

example/lib/group_info_screen.dart

@@ -589,6 +589,7 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
 
     showDialog(
       context: context,
+      barrierColor: StreamChatTheme.of(context).colorTheme.overlay,
       builder: (context) {
         return StatefulBuilder(builder: (context, modalSetState) {
           modalSetStateCallback = modalSetState;

example/lib/new_chat_screen.dart

@@ -237,21 +237,7 @@ class _NewChatScreenState extends State<NewChatScreen> {
               Container(
                 width: double.maxFinite,
                 decoration: BoxDecoration(
-                  gradient: LinearGradient(
+                  gradient: StreamChatTheme.of(context).colorTheme.bgGradient,
-                    begin: Alignment.centerLeft,
-                    end: Alignment.centerRight,
-                    colors: [
-                      StreamChatTheme.of(context)
-                          .colorTheme
-                          .black
-                          .withOpacity(0.02),
-                      StreamChatTheme.of(context)
-                          .colorTheme
-                          .white
-                          .withOpacity(0.05),
-                    ],
-                    stops: [0, 1],
-                  ),
                 ),
                 child: Padding(
                   padding: const EdgeInsets.symmetric(

example/lib/new_group_chat_screen.dart

@@ -180,21 +180,8 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                   child: Container(
                     width: double.maxFinite,
                     decoration: BoxDecoration(
-                      gradient: LinearGradient(
+                      gradient:
-                        begin: Alignment.centerLeft,
+                          StreamChatTheme.of(context).colorTheme.bgGradient,
-                        end: Alignment.centerRight,
-                        colors: [
-                          StreamChatTheme.of(context)
-                              .colorTheme
-                              .black
-                              .withOpacity(0.02),
-                          StreamChatTheme.of(context)
-                              .colorTheme
-                              .white
-                              .withOpacity(0.05),
-                        ],
-                        stops: [0, 1],
-                      ),
                     ),
                     child: Padding(
                       padding: const EdgeInsets.symmetric(
@@ -206,10 +193,7 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                             ? 'Matches for \"$_userNameQuery\"'
                             : 'On the platform',
                         style: TextStyle(
-                          color: StreamChatTheme.of(context)
+                          color: StreamChatTheme.of(context).colorTheme.grey,
-                              .colorTheme
-                              .black
-                              .withOpacity(0.5),
                         ),
                       ),
                     ),
@@ -271,7 +255,9 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                                   padding: const EdgeInsets.all(24),
                                   child: StreamSvgIcon.search(
                                     size: 96,
-                                    color: Colors.grey,
+                                    color: StreamChatTheme.of(context)
+                                        .colorTheme
+                                        .grey,
                                   ),
                                 ),
                                 Text(
@@ -280,10 +266,10 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                                       .textTheme
                                       .footnote
                                       .copyWith(
-                                          color: StreamChatTheme.of(context)
+                                        color: StreamChatTheme.of(context)
-                                              .colorTheme
+                                            .colorTheme
-                                              .black
+                                            .grey,
-                                              .withOpacity(.5)),
+                                      ),
                                 ),
                               ],
                             ),

lib/src/image_actions_modal.dart

@@ -29,27 +29,8 @@ class ImageActionsModal extends StatelessWidget {
   Widget build(BuildContext context) {
     return GestureDetector(
       behavior: HitTestBehavior.translucent,
-      onTap: () {
+      onTap: () => Navigator.maybePop(context),
-        Navigator.pop(context);
+      child: _buildPage(context),
-      },
-      child: Stack(
-        children: [
-          Positioned.fill(
-              child: Container(
-            decoration: BoxDecoration(
-                gradient: LinearGradient(
-              begin: Alignment.topCenter,
-              end: Alignment.bottomCenter,
-              colors: [
-                Colors.black.withOpacity(0.8),
-                Colors.transparent,
-              ],
-              stops: [0.0, 0.4],
-            )),
-          )),
-          _buildPage(context),
-        ],
-      ),
     );
   }
 
@@ -57,53 +38,14 @@ class ImageActionsModal extends StatelessWidget {
     return Material(
       color: Colors.transparent,
       child: Column(
+        crossAxisAlignment: CrossAxisAlignment.end,
         children: [
-          Row(
+          SizedBox(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            height: kToolbarHeight,
-            children: [
+            child: IconButton(
-              Padding(
+              icon: StreamSvgIcon.close(),
-                padding: const EdgeInsets.all(8.0),
+              onPressed: () => Navigator.maybePop(context),
-                child: Container(
+            ),
-                  width: 40.0,
-                ),
-              ),
-              Column(
-                children: [
-                  Padding(
-                    padding: const EdgeInsets.only(top: 8.0),
-                    child: Text(
-                      userName,
-                      style: StreamChatTheme.of(context)
-                          .textTheme
-                          .headlineBold
-                          .copyWith(
-                              color:
-                                  StreamChatTheme.of(context).colorTheme.white),
-                    ),
-                  ),
-                  Text(
-                    sentAt,
-                    style: StreamChatTheme.of(context)
-                        .channelPreviewTheme
-                        .subtitle
-                        .copyWith(
-                            color: StreamChatTheme.of(context)
-                                .colorTheme
-                                .white
-                                .withOpacity(0.5)),
-                  ),
-                ],
-              ),
-              IconButton(
-                icon: StreamSvgIcon.close(
-                  size: 24.0,
-                  color: StreamChatTheme.of(context).colorTheme.white,
-                ),
-                onPressed: () {
-                  Navigator.pop(context);
-                },
-              ),
-            ],
           ),
           Align(
             alignment: Alignment.centerRight,
@@ -127,10 +69,8 @@ class ImageActionsModal extends StatelessWidget {
                             'Reply',
                             StreamSvgIcon.Icon_curve_line_left_up(
                               size: 24.0,
-                              color: StreamChatTheme.of(context)
+                              color:
-                                  .colorTheme
+                                  StreamChatTheme.of(context).colorTheme.grey,
-                                  .black
-                                  .withOpacity(0.5),
                             ),
                             () {}),
                         _buildButton(
@@ -147,10 +87,8 @@ class ImageActionsModal extends StatelessWidget {
                             'Save ${urls[currentIndex].type == 'video' ? 'Video' : 'Image'}',
                             StreamSvgIcon.Icon_save(
                               size: 24.0,
-                              color: StreamChatTheme.of(context)
+                              color:
-                                  .colorTheme
+                                  StreamChatTheme.of(context).colorTheme.grey,
-                                  .black
-                                  .withOpacity(0.5),
                             ), () async {
                           var url = urls[currentIndex].imageUrl ??
                               urls[currentIndex].assetUrl ??

lib/src/image_footer.dart

@@ -157,9 +157,7 @@ class _ImageFooterState extends State<ImageFooter> {
                 icon: StreamSvgIcon.Icon_grid(
                   color: StreamChatTheme.of(context).colorTheme.black,
                 ),
-                onPressed: () {
+                onPressed: () => _showPhotosModal(context),
-                  _buildPhotosModal(context);
-                },
               ),
             ],
           ),
@@ -168,13 +166,14 @@ class _ImageFooterState extends State<ImageFooter> {
     );
   }
 
-  Widget _buildPhotosModal(context) {
+  void _showPhotosModal(context) {
     var videoAttachments = widget.mediaAttachments
         .where((element) => element.type == 'video')
         .toList();
 
     showModalBottomSheet(
       context: context,
+      barrierColor: StreamChatTheme.of(context).colorTheme.overlay,
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(16.0),
       ),
@@ -207,9 +206,7 @@ class _ImageFooterState extends State<ImageFooter> {
                       icon: StreamSvgIcon.close(
                         color: StreamChatTheme.of(context).colorTheme.black,
                       ),
-                      onPressed: () {
+                      onPressed: () => Navigator.maybePop(context),
-                        Navigator.pop(context);
-                      },
                     ),
                   ),
                 ],

lib/src/image_header.dart

@@ -106,6 +106,7 @@ class ImageHeader extends StatelessWidget implements PreferredSizeWidget {
 
     showDialog(
         context: context,
+        barrierColor: StreamChatTheme.of(context).colorTheme.overlay,
         builder: (context) {
           return StreamChannel(
             channel: channel,

lib/src/message_actions_modal.dart

@@ -73,17 +73,17 @@ class MessageActionsModal extends StatelessWidget {
 
     return GestureDetector(
       behavior: HitTestBehavior.translucent,
-      onTap: () => Navigator.pop(context),
+      onTap: () => Navigator.maybePop(context),
       child: Stack(
         children: [
           Positioned.fill(
             child: BackdropFilter(
               filter: ImageFilter.blur(
-                sigmaX: 10.8731,
+                sigmaX: 10,
-                sigmaY: 10.8731,
+                sigmaY: 10,
               ),
               child: Container(
-                color: Colors.black.withOpacity(.2),
+                color: StreamChatTheme.of(context).colorTheme.overlay,
               ),
             ),
           ),

lib/src/message_list_view.dart

@@ -350,18 +350,9 @@ class _MessageListViewState extends State<MessageListView> {
                             buildParentMessage(widget.parentMessage),
                             Container(
                               decoration: BoxDecoration(
-                                gradient: LinearGradient(
+                                gradient: StreamChatTheme.of(context)
-                                  begin: Alignment.topCenter,
+                                    .colorTheme
-                                  end: Alignment.bottomCenter,
+                                    .bgGradient,
-                                  colors: [
-                                    StreamChatTheme.of(context)
-                                        .colorTheme
-                                        .whiteSmoke,
-                                    StreamChatTheme.of(context)
-                                        .colorTheme
-                                        .whiteSnow,
-                                  ],
-                                ),
                               ),
                               child: Padding(
                                 padding: const EdgeInsets.all(8.0),
@@ -850,7 +841,8 @@ class _MessageListViewState extends State<MessageListView> {
         widget.highlightInitialMessage &&
         _isInitialMessage(message.id)) {
       final colorTheme = StreamChatTheme.of(context).colorTheme;
-      final highlightColor = widget.messageHighlightColor ?? colorTheme.yellow;
+      final highlightColor =
+          widget.messageHighlightColor ?? colorTheme.highlight;
       child = TweenAnimationBuilder<Color>(
         tween: ColorTween(
           begin: highlightColor,

lib/src/message_reactions_modal.dart

@@ -40,27 +40,35 @@ class MessageReactionsModal extends StatelessWidget {
     final user = StreamChat.of(context).user;
 
     final roughMaxSize = 2 * size.width / 3;
+    var messageTextLength = message.text.length;
+    if (message.quotedMessage != null) {
+      var quotedMessageLength = message.quotedMessage.text.length + 40;
+      if (message.quotedMessage.attachments?.isNotEmpty == true) {
+        quotedMessageLength += 40;
+      }
+      if (quotedMessageLength > messageTextLength) {
+        messageTextLength = quotedMessageLength;
+      }
+    }
     final roughSentenceSize =
-        message.text.length * messageTheme.messageText.fontSize * 1.2;
+        messageTextLength * messageTheme.messageText.fontSize * 1.2;
     final divFactor = message.attachments?.isNotEmpty == true
         ? 1
         : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize));
 
     return GestureDetector(
       behavior: HitTestBehavior.translucent,
-      onTap: () {
+      onTap: () => Navigator.maybePop(context),
-        Navigator.pop(context);
-      },
       child: Stack(
         children: [
           Positioned.fill(
             child: BackdropFilter(
               filter: ImageFilter.blur(
-                sigmaX: 10.8731,
+                sigmaX: 10,
-                sigmaY: 10.8731,
+                sigmaY: 10,
               ),
               child: Container(
-                color: Colors.black.withOpacity(0.2),
+                color: StreamChatTheme.of(context).colorTheme.overlay,
               ),
             ),
           ),

lib/src/message_search_list_view.dart

@@ -313,21 +313,7 @@ class _MessageSearchListViewState extends State<MessageSearchListView> {
               Container(
                 width: double.maxFinite,
                 decoration: BoxDecoration(
-                  gradient: LinearGradient(
+                  gradient: StreamChatTheme.of(context).colorTheme.bgGradient,
-                    begin: Alignment.centerLeft,
-                    end: Alignment.centerRight,
-                    colors: [
-                      StreamChatTheme.of(context)
-                          .colorTheme
-                          .black
-                          .withOpacity(0.02),
-                      StreamChatTheme.of(context)
-                          .colorTheme
-                          .white
-                          .withOpacity(0.05),
-                    ],
-                    stops: [0, 1],
-                  ),
                 ),
                 child: Padding(
                   padding: const EdgeInsets.symmetric(
@@ -337,10 +323,7 @@ class _MessageSearchListViewState extends State<MessageSearchListView> {
                   child: Text(
                     '${items.length} results',
                     style: TextStyle(
-                      color: StreamChatTheme.of(context)
+                      color: StreamChatTheme.of(context).colorTheme.grey,
-                          .colorTheme
-                          .black
-                          .withOpacity(0.5),
                     ),
                   ),
                 ),

lib/src/message_widget.dart

@@ -676,6 +676,7 @@ class _MessageWidgetState extends State<MessageWidget> {
     final channel = StreamChannel.of(context).channel;
     showDialog(
         context: context,
+        barrierColor: StreamChatTheme.of(context).colorTheme.overlay,
         builder: (context) {
           return StreamChannel(
             channel: channel,
@@ -716,6 +717,7 @@ class _MessageWidgetState extends State<MessageWidget> {
     final channel = StreamChannel.of(context).channel;
     showDialog(
         context: context,
+        barrierColor: StreamChatTheme.of(context).colorTheme.overlay,
         builder: (context) {
           return StreamChannel(
             channel: channel,

lib/src/stream_chat_theme.dart

@@ -460,7 +460,10 @@ class ColorTheme {
   final Color accentBlue;
   final Color accentRed;
   final Color accentGreen;
-  final Color yellow;
+  final Color highlight;
+  final Color overlay;
+  final Color overlayDark;
+  final Gradient bgGradient;
 
   ColorTheme.light({
     this.black = const Color(0xff000000),
@@ -474,7 +477,15 @@ class ColorTheme {
     this.accentBlue = const Color(0xff005FFF),
     this.accentRed = const Color(0xffFF3742),
     this.accentGreen = const Color(0xff20E070),
-    this.yellow = const Color(0Xfffbf4dd),
+    this.highlight = const Color(0xfffbf4dd),
+    this.overlay = const Color.fromRGBO(0, 0, 0, 0.2),
+    this.overlayDark = const Color.fromRGBO(0, 0, 0, 0.6),
+    this.bgGradient = const LinearGradient(
+      begin: Alignment.topCenter,
+      end: Alignment.bottomCenter,
+      colors: [const Color(0xfff7f7f7), const Color(0xfffcfcfc)],
+      stops: [0, 1],
+    ),
   });
 
   ColorTheme.dark({
@@ -489,7 +500,15 @@ class ColorTheme {
     this.accentBlue = const Color(0xff005FFF),
     this.accentRed = const Color(0xffFF3742),
     this.accentGreen = const Color(0xff20E070),
-    this.yellow = const Color(0xff302d22),
+    this.highlight = const Color(0xff302d22),
+    this.overlay = const Color.fromRGBO(0, 0, 0, 0.4),
+    this.overlayDark = const Color.fromRGBO(255, 255, 255, 0.6),
+    this.bgGradient = const LinearGradient(
+      begin: Alignment.topCenter,
+      end: Alignment.bottomCenter,
+      colors: [const Color(0xff101214), const Color(0xff070a0d)],
+      stops: [0, 1],
+    ),
   });
 
   ColorTheme copyWith({
@@ -505,7 +524,10 @@ class ColorTheme {
     Color accentBlue,
     Color accentRed,
     Color accentGreen,
-    Color yellow,
+    Color highlight,
+    Color overlay,
+    Color overlayDark,
+    Gradient bgGradient,
   }) {
     return type == ColorThemeType.light
         ? ColorTheme.light(
@@ -520,7 +542,10 @@ class ColorTheme {
             accentBlue: accentBlue ?? this.accentBlue,
             accentRed: accentRed ?? this.accentRed,
             accentGreen: accentGreen ?? this.accentGreen,
-            yellow: yellow ?? this.yellow,
+            highlight: highlight ?? this.highlight,
+            overlay: overlay ?? this.overlay,
+            overlayDark: overlayDark ?? this.overlayDark,
+            bgGradient: bgGradient ?? this.bgGradient,
           )
         : ColorTheme.dark(
             black: black ?? this.black,
@@ -534,7 +559,10 @@ class ColorTheme {
             accentBlue: accentBlue ?? this.accentBlue,
             accentRed: accentRed ?? this.accentRed,
             accentGreen: accentGreen ?? this.accentGreen,
-            yellow: yellow ?? this.yellow,
+            highlight: highlight ?? this.highlight,
+            overlay: overlay ?? this.overlay,
+            overlayDark: overlayDark ?? this.overlayDark,
+            bgGradient: bgGradient ?? this.bgGradient,
           );
   }
 
@@ -552,7 +580,10 @@ class ColorTheme {
       accentBlue: other.accentBlue,
       accentRed: other.accentRed,
       accentGreen: other.accentGreen,
-      yellow: other.yellow,
+      highlight: other.highlight,
+      overlay: other.overlay,
+      overlayDark: other.overlayDark,
+      bgGradient: other.bgGradient,
     );
   }
 }

lib/src/user_list_view.dart

@@ -363,12 +363,10 @@ class _UserListViewState extends State<UserListView>
               child: Text(
                 header,
                 style: TextStyle(
-                    fontWeight: FontWeight.bold,
+                  fontWeight: FontWeight.bold,
-                    fontSize: 14.5,
+                  fontSize: 14.5,
-                    color: StreamChatTheme.of(context)
+                  color: StreamChatTheme.of(context).colorTheme.grey,
-                        .colorTheme
+                ),
-                        .black
-                        .withOpacity(0.3)),
               ),
             ),
           );