From 0d71632ef23250db46e5c3584d3c1011f413b5b5 Mon Sep 17 00:00:00 2001 From: Sahil Kumar Date: Wed, 6 Jan 2021 16:25:00 +0530 Subject: [PATCH] theme: Add colors, Gradient and its implementation Signed-off-by: Sahil Kumar --- example/lib/advanced_options_page.dart | 3 + example/lib/choose_user_page.dart | 3 + example/lib/group_chat_details_screen.dart | 26 ++----- example/lib/group_info_screen.dart | 1 + example/lib/new_chat_screen.dart | 16 +--- example/lib/new_group_chat_screen.dart | 34 +++------ lib/src/image_actions_modal.dart | 88 ++++------------------ lib/src/image_footer.dart | 11 +-- lib/src/image_header.dart | 1 + lib/src/message_actions_modal.dart | 8 +- lib/src/message_list_view.dart | 18 ++--- lib/src/message_reactions_modal.dart | 22 ++++-- lib/src/message_search_list_view.dart | 21 +----- lib/src/message_widget.dart | 2 + lib/src/stream_chat_theme.dart | 45 +++++++++-- lib/src/user_list_view.dart | 10 +-- 16 files changed, 113 insertions(+), 196 deletions(-) diff --git a/example/lib/advanced_options_page.dart b/example/lib/advanced_options_page.dart index e24bd5da..9160a5d9 100644 --- a/example/lib/advanced_options_page.dart +++ b/example/lib/advanced_options_page.dart @@ -271,6 +271,9 @@ class _AdvancedOptionsPageState extends State { showDialog( barrierDismissible: false, context: context, + barrierColor: StreamChatTheme.of(context) + .colorTheme + .overlay, builder: (context) => Center( child: Container( decoration: BoxDecoration( diff --git a/example/lib/choose_user_page.dart b/example/lib/choose_user_page.dart index 55bfa36c..ede5f6df 100644 --- a/example/lib/choose_user_page.dart +++ b/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( diff --git a/example/lib/group_chat_details_screen.dart b/example/lib/group_chat_details_screen.dart index b1fd58c2..31ccc703 100644 --- a/example/lib/group_chat_details_screen.dart +++ b/example/lib/group_chat_details_screen.dart @@ -83,10 +83,7 @@ class _GroupChatDetailsScreenState extends State { 'NAME', style: TextStyle( fontSize: 12, - color: StreamChatTheme.of(context) - .colorTheme - .black - .withOpacity(0.5), + color: StreamChatTheme.of(context).colorTheme.grey, ), ), SizedBox(width: 16), @@ -103,11 +100,9 @@ class _GroupChatDetailsScreenState extends State { contentPadding: const EdgeInsets.all(0), hintText: 'Choose a group chat name', hintStyle: TextStyle( - fontSize: 14, - color: StreamChatTheme.of(context) - .colorTheme - .black - .withOpacity(.5)), + fontSize: 14, + color: StreamChatTheme.of(context).colorTheme.grey, + ), ), ), ), @@ -122,7 +117,7 @@ class _GroupChatDetailsScreenState extends State { 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 { Container( width: double.maxFinite, decoration: BoxDecoration( - gradient: LinearGradient( - begin: Alignment.topCenter, - end: Alignment.bottomCenter, - colors: [ - StreamChatTheme.of(context).colorTheme.whiteSmoke, - StreamChatTheme.of(context).colorTheme.whiteSnow, - ], - ), + gradient: StreamChatTheme.of(context).colorTheme.bgGradient, ), child: Padding( padding: const EdgeInsets.symmetric( @@ -172,7 +160,7 @@ class _GroupChatDetailsScreenState extends State { child: Text( '$_totalUsers ${_totalUsers > 1 ? 'Members' : 'Member'}', style: TextStyle( - fontWeight: FontWeight.w500, + color: StreamChatTheme.of(context).colorTheme.grey, ), ), ), diff --git a/example/lib/group_info_screen.dart b/example/lib/group_info_screen.dart index ffab48df..985fe62d 100644 --- a/example/lib/group_info_screen.dart +++ b/example/lib/group_info_screen.dart @@ -589,6 +589,7 @@ class _GroupInfoScreenState extends State { showDialog( context: context, + barrierColor: StreamChatTheme.of(context).colorTheme.overlay, builder: (context) { return StatefulBuilder(builder: (context, modalSetState) { modalSetStateCallback = modalSetState; diff --git a/example/lib/new_chat_screen.dart b/example/lib/new_chat_screen.dart index ddebe848..c0be5ed3 100644 --- a/example/lib/new_chat_screen.dart +++ b/example/lib/new_chat_screen.dart @@ -237,21 +237,7 @@ class _NewChatScreenState extends State { Container( width: double.maxFinite, decoration: BoxDecoration( - gradient: LinearGradient( - 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], - ), + gradient: StreamChatTheme.of(context).colorTheme.bgGradient, ), child: Padding( padding: const EdgeInsets.symmetric( diff --git a/example/lib/new_group_chat_screen.dart b/example/lib/new_group_chat_screen.dart index 505db69c..c7a25ab3 100644 --- a/example/lib/new_group_chat_screen.dart +++ b/example/lib/new_group_chat_screen.dart @@ -180,21 +180,8 @@ class _NewGroupChatScreenState extends State { child: Container( width: double.maxFinite, decoration: BoxDecoration( - gradient: LinearGradient( - 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], - ), + gradient: + StreamChatTheme.of(context).colorTheme.bgGradient, ), child: Padding( padding: const EdgeInsets.symmetric( @@ -206,10 +193,7 @@ class _NewGroupChatScreenState extends State { ? 'Matches for \"$_userNameQuery\"' : 'On the platform', style: TextStyle( - color: StreamChatTheme.of(context) - .colorTheme - .black - .withOpacity(0.5), + color: StreamChatTheme.of(context).colorTheme.grey, ), ), ), @@ -271,7 +255,9 @@ class _NewGroupChatScreenState extends State { 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 { .textTheme .footnote .copyWith( - color: StreamChatTheme.of(context) - .colorTheme - .black - .withOpacity(.5)), + color: StreamChatTheme.of(context) + .colorTheme + .grey, + ), ), ], ), diff --git a/lib/src/image_actions_modal.dart b/lib/src/image_actions_modal.dart index 0001df6f..332117d4 100644 --- a/lib/src/image_actions_modal.dart +++ b/lib/src/image_actions_modal.dart @@ -29,27 +29,8 @@ class ImageActionsModal extends StatelessWidget { Widget build(BuildContext context) { return GestureDetector( behavior: HitTestBehavior.translucent, - onTap: () { - Navigator.pop(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), - ], - ), + onTap: () => Navigator.maybePop(context), + child: _buildPage(context), ); } @@ -57,53 +38,14 @@ class ImageActionsModal extends StatelessWidget { return Material( color: Colors.transparent, child: Column( + crossAxisAlignment: CrossAxisAlignment.end, children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Padding( - padding: const EdgeInsets.all(8.0), - 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); - }, - ), - ], + SizedBox( + height: kToolbarHeight, + child: IconButton( + icon: StreamSvgIcon.close(), + onPressed: () => Navigator.maybePop(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) - .colorTheme - .black - .withOpacity(0.5), + color: + StreamChatTheme.of(context).colorTheme.grey, ), () {}), _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) - .colorTheme - .black - .withOpacity(0.5), + color: + StreamChatTheme.of(context).colorTheme.grey, ), () async { var url = urls[currentIndex].imageUrl ?? urls[currentIndex].assetUrl ?? diff --git a/lib/src/image_footer.dart b/lib/src/image_footer.dart index 3a6cfbcc..7ee9a128 100644 --- a/lib/src/image_footer.dart +++ b/lib/src/image_footer.dart @@ -157,9 +157,7 @@ class _ImageFooterState extends State { icon: StreamSvgIcon.Icon_grid( color: StreamChatTheme.of(context).colorTheme.black, ), - onPressed: () { - _buildPhotosModal(context); - }, + onPressed: () => _showPhotosModal(context), ), ], ), @@ -168,13 +166,14 @@ class _ImageFooterState extends State { ); } - 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 { icon: StreamSvgIcon.close( color: StreamChatTheme.of(context).colorTheme.black, ), - onPressed: () { - Navigator.pop(context); - }, + onPressed: () => Navigator.maybePop(context), ), ), ], diff --git a/lib/src/image_header.dart b/lib/src/image_header.dart index 6139bc7c..1f6237ab 100644 --- a/lib/src/image_header.dart +++ b/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, diff --git a/lib/src/message_actions_modal.dart b/lib/src/message_actions_modal.dart index 6294ef6a..c7ff56e0 100644 --- a/lib/src/message_actions_modal.dart +++ b/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, - sigmaY: 10.8731, + sigmaX: 10, + sigmaY: 10, ), child: Container( - color: Colors.black.withOpacity(.2), + color: StreamChatTheme.of(context).colorTheme.overlay, ), ), ), diff --git a/lib/src/message_list_view.dart b/lib/src/message_list_view.dart index 294c6484..db9790b9 100644 --- a/lib/src/message_list_view.dart +++ b/lib/src/message_list_view.dart @@ -350,18 +350,9 @@ class _MessageListViewState extends State { buildParentMessage(widget.parentMessage), Container( decoration: BoxDecoration( - gradient: LinearGradient( - begin: Alignment.topCenter, - end: Alignment.bottomCenter, - colors: [ - StreamChatTheme.of(context) - .colorTheme - .whiteSmoke, - StreamChatTheme.of(context) - .colorTheme - .whiteSnow, - ], - ), + gradient: StreamChatTheme.of(context) + .colorTheme + .bgGradient, ), child: Padding( padding: const EdgeInsets.all(8.0), @@ -850,7 +841,8 @@ class _MessageListViewState extends State { 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( tween: ColorTween( begin: highlightColor, diff --git a/lib/src/message_reactions_modal.dart b/lib/src/message_reactions_modal.dart index 232f6f84..375f5e0c 100644 --- a/lib/src/message_reactions_modal.dart +++ b/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: () { - Navigator.pop(context); - }, + onTap: () => Navigator.maybePop(context), child: Stack( children: [ Positioned.fill( child: BackdropFilter( filter: ImageFilter.blur( - sigmaX: 10.8731, - sigmaY: 10.8731, + sigmaX: 10, + sigmaY: 10, ), child: Container( - color: Colors.black.withOpacity(0.2), + color: StreamChatTheme.of(context).colorTheme.overlay, ), ), ), diff --git a/lib/src/message_search_list_view.dart b/lib/src/message_search_list_view.dart index d59ae4a0..3ff9f151 100644 --- a/lib/src/message_search_list_view.dart +++ b/lib/src/message_search_list_view.dart @@ -313,21 +313,7 @@ class _MessageSearchListViewState extends State { Container( width: double.maxFinite, decoration: BoxDecoration( - gradient: LinearGradient( - 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], - ), + gradient: StreamChatTheme.of(context).colorTheme.bgGradient, ), child: Padding( padding: const EdgeInsets.symmetric( @@ -337,10 +323,7 @@ class _MessageSearchListViewState extends State { child: Text( '${items.length} results', style: TextStyle( - color: StreamChatTheme.of(context) - .colorTheme - .black - .withOpacity(0.5), + color: StreamChatTheme.of(context).colorTheme.grey, ), ), ), diff --git a/lib/src/message_widget.dart b/lib/src/message_widget.dart index 15364606..30e636a4 100644 --- a/lib/src/message_widget.dart +++ b/lib/src/message_widget.dart @@ -676,6 +676,7 @@ class _MessageWidgetState extends State { 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 { final channel = StreamChannel.of(context).channel; showDialog( context: context, + barrierColor: StreamChatTheme.of(context).colorTheme.overlay, builder: (context) { return StreamChannel( channel: channel, diff --git a/lib/src/stream_chat_theme.dart b/lib/src/stream_chat_theme.dart index 73ad2046..3fac4173 100644 --- a/lib/src/stream_chat_theme.dart +++ b/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, ); } } diff --git a/lib/src/user_list_view.dart b/lib/src/user_list_view.dart index 5e207672..ef51ad92 100644 --- a/lib/src/user_list_view.dart +++ b/lib/src/user_list_view.dart @@ -363,12 +363,10 @@ class _UserListViewState extends State child: Text( header, style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 14.5, - color: StreamChatTheme.of(context) - .colorTheme - .black - .withOpacity(0.3)), + fontWeight: FontWeight.bold, + fontSize: 14.5, + color: StreamChatTheme.of(context).colorTheme.grey, + ), ), ), );