From 124f3cc456e7e70491e91bad36bee6ae12d8c8bd Mon Sep 17 00:00:00 2001 From: Enes Karaosman Date: Mon, 8 Nov 2021 15:03:56 +0300 Subject: [PATCH] [MOD] Some theming options added for carousel and image (&documented) &some dep. updates. --- CHANGELOG.md | 5 ++ Theming.md | 31 ++++++++-- example/lib/theme/app_theme.dart | 61 ------------------- example/pubspec.lock | 2 +- .../carousel_widget.dart | 32 +++++----- .../chat-message-list-items/image_widget.dart | 10 ++- lib/src/theme/chat_theme.dart | 7 +++ lib/src/theme/default_theme.dart | 18 ++++++ pubspec.yaml | 10 +-- 9 files changed, 86 insertions(+), 90 deletions(-) delete mode 100644 example/lib/theme/app_theme.dart diff --git a/CHANGELOG.md b/CHANGELOG.md index 643311a..3f7b34a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## 1.1.0 + +* Some new theming options added & Carousel UI updated a bit. +* Internal dependency packages updated. + ## 1.0.0 * Initial version, see what this package can do for you in [README.md](README.md) diff --git a/Theming.md b/Theming.md index 9e180cb..4405e11 100644 --- a/Theming.md +++ b/Theming.md @@ -2,9 +2,30 @@ ### Theming -Visit the helper `ChatTheme` [abstract class](lib/src/theme/chat_theme.dart) in example folder. +Visit `ChatTheme` [abstract class file](lib/src/theme/chat_theme.dart). -* scaffoldBackgroundColor: main background color -* cardTheme: text container background color -* textTheme: text theme for messages (MessageKind.text) -* outlinedButtonTheme: quick reply button theme (MessageKind.quickReply) \ No newline at end of file +* `Color primaryColor`: Used as a background of outgoing messages +* `Color secondaryColor`: Used as a background of incoming messages +* `EdgeInsets messageInset` Can be used to have padding between messages +* `Color backgroundColor`: Used as a background color of a chat widget + +#### Text Message Widget +* `double textMessagePadding` +* `TextStyle incomingMessageBodyTextStyle` +* `TextStyle outgoingMessageBodyTextStyle` + +#### Carousel Message Widget +* `BoxDecoration carouselBoxDecoration` +* `TextStyle carouselTitleTextStyle` +* `TextStyle carouselSubtitleTextStyle` +* `ButtonStyle carouselButtonStyle` + +#### Image Message Widget +* `BorderRadius imageBorderRadius` + +#### Quick Reply Message Widget +* `ButtonStyle quickReplyButtonStyle` + +#### HTML Message Widget +* `Color htmlTextColor`: Color on p, h1, h2, h3, h4, h5 elements. +* `String? htmlTextFontFamily`: FontFamily on p, h1, h2, h3, h4, h5 elements. \ No newline at end of file diff --git a/example/lib/theme/app_theme.dart b/example/lib/theme/app_theme.dart deleted file mode 100644 index 89be261..0000000 --- a/example/lib/theme/app_theme.dart +++ /dev/null @@ -1,61 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter/rendering.dart'; -import 'package:google_fonts/google_fonts.dart'; - -/* -* scaffoldBackgroundColor: main background color -* cardTheme: text container background color -* textTheme: text theme for messages (MessageKind.text) -* + headline6: carousel title -* + subtitle2: carousel subtitle -* outlinedButtonTheme: quick reply button theme (MessageKind.quickReply) -* */ - -const kPrimaryColor = Color(0xFF00BF6D); -const kSecondaryColor = Color(0xFFFE9901); -const kContentColorLightTheme = Color(0xFF1D1D35); -const kContentColorDarkTheme = Color(0xFFF5FCF9); -const kWarningColor = Color(0xFFF3BB1C); -const kErrorColor = Color(0xFFF03738); - -mixin AppTheme { - static ThemeData light(BuildContext context) => ThemeData.light().copyWith( - primaryColor: kPrimaryColor, - scaffoldBackgroundColor: Colors.lightGreen[30], - iconTheme: const IconThemeData(color: kContentColorLightTheme), - // cardTheme: CardTheme(color: kPrimaryColor.withOpacity(0.1)), - textTheme: GoogleFonts.interTextTheme(Theme.of(context).textTheme) - .apply(bodyColor: kContentColorLightTheme), - colorScheme: const ColorScheme.light( - primary: kPrimaryColor, - secondary: kSecondaryColor, - error: kErrorColor, - ), - outlinedButtonTheme: OutlinedButtonThemeData( - style: ButtonStyle( - textStyle: MaterialStateProperty.all(const TextStyle(fontWeight: FontWeight.bold)) - ), - ), - ); - - static ThemeData dark(BuildContext context) => ThemeData.dark().copyWith( - primaryColor: kPrimaryColor, - scaffoldBackgroundColor: kContentColorLightTheme, - iconTheme: const IconThemeData(color: kContentColorDarkTheme), - cardTheme: const CardTheme(color: Color(0xFF3B3F41), margin: EdgeInsets.all(8)), - textTheme: GoogleFonts.interTextTheme(Theme.of(context).textTheme) - .apply(bodyColor: kContentColorDarkTheme), - colorScheme: const ColorScheme.dark().copyWith( - primary: kPrimaryColor, - secondary: kSecondaryColor, - error: kErrorColor, - ), - outlinedButtonTheme: OutlinedButtonThemeData( - style: ButtonStyle( - backgroundColor: MaterialStateProperty.all(Colors.transparent), - foregroundColor: MaterialStateProperty.all(Colors.pink), - textStyle: MaterialStateProperty.all(const TextStyle(fontWeight: FontWeight.bold)) - ), - ), - ); -} diff --git a/example/pubspec.lock b/example/pubspec.lock index fe5885b..7459627 100644 --- a/example/pubspec.lock +++ b/example/pubspec.lock @@ -413,7 +413,7 @@ packages: path: ".." relative: true source: path - version: "1.0.0" + version: "1.0.4" swifty_chat_data: dependency: transitive description: diff --git a/lib/src/chat-message-list-items/carousel_widget.dart b/lib/src/chat-message-list-items/carousel_widget.dart index fec93bf..f1966d6 100644 --- a/lib/src/chat-message-list-items/carousel_widget.dart +++ b/lib/src/chat-message-list-items/carousel_widget.dart @@ -19,10 +19,10 @@ class CarouselWidget extends StatelessWidget with HasAvatar { Message get message => chatMessage; @override - Widget build(BuildContext context) => - CarouselSlider.builder( + Widget build(BuildContext context) => CarouselSlider.builder( itemCount: items.length, - itemBuilder: (context, index, _) => _carouselItem(context, items[index]), + itemBuilder: (context, index, _) => + _carouselItem(context, items[index]), options: CarouselOptions( height: _carouselItemHeight(context), disableCenter: true, @@ -30,16 +30,18 @@ class CarouselWidget extends StatelessWidget with HasAvatar { ), ); - Widget _carouselItem(BuildContext context, CarouselItem item) => - Container( - color: context.theme.secondaryColor, + Widget _carouselItem(BuildContext context, CarouselItem item) => Container( + decoration: context.theme.carouselBoxDecoration, + margin: const EdgeInsets.symmetric(horizontal: 8), child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ if (item.imageProvider != null) - Image( - image: item.imageProvider!, - ).flexible(), + Flexible( + child: Image( + image: item.imageProvider!, + ), + ), Text( item.title, style: context.theme.carouselTitleTextStyle, @@ -52,13 +54,14 @@ class CarouselWidget extends StatelessWidget with HasAvatar { Wrap( children: item.buttons .map( - (button) => - ElevatedButton( - onPressed: () => ChatStateContainer.of(context).onCarouselButtonItemPressed?.call(button), + (button) => ElevatedButton( + onPressed: () => ChatStateContainer.of(context) + .onCarouselButtonItemPressed + ?.call(button), style: context.theme.carouselButtonStyle, child: Text(button.title), ), - ) + ) .toList(), ).padding(all: 8), ], @@ -66,8 +69,7 @@ class CarouselWidget extends StatelessWidget with HasAvatar { ); double _carouselItemHeight(BuildContext context) { - final height = ChatStateContainer - .of(context) + final height = ChatStateContainer.of(context) .messageCellSizeConfigurator .carouselCellMaxHeightConfiguration(context.mq.size.height); return height; diff --git a/lib/src/chat-message-list-items/image_widget.dart b/lib/src/chat-message-list-items/image_widget.dart index e0b3cef..09df92e 100644 --- a/lib/src/chat-message-list-items/image_widget.dart +++ b/lib/src/chat-message-list-items/image_widget.dart @@ -3,6 +3,7 @@ import 'package:flutter/material.dart'; import 'package:swifty_chat_data/swifty_chat_data.dart'; import '../chat.dart'; +import '../extensions/theme_context.dart'; import '../protocols/has_avatar.dart'; import '../protocols/incoming_outgoing_message_widgets.dart'; @@ -31,9 +32,12 @@ class ImageMessageWidget extends StatelessWidget ], ); - Widget imageContainer(BuildContext context) => Image( - width: _imageWidth(context), - image: message.messageKind.imageProvider!, + Widget imageContainer(BuildContext context) => ClipRRect( + borderRadius: context.theme.imageBorderRadius, + child: Image( + width: _imageWidth(context), + image: message.messageKind.imageProvider! + ), ); @override diff --git a/lib/src/theme/chat_theme.dart b/lib/src/theme/chat_theme.dart index 3804e94..18661ec 100644 --- a/lib/src/theme/chat_theme.dart +++ b/lib/src/theme/chat_theme.dart @@ -57,7 +57,14 @@ abstract class ChatTheme { /// of sent messages TextStyle get outgoingMessageBodyTextStyle; + // Image Message Styles + /// Image borderRadius + BorderRadius get imageBorderRadius; + // Carousel Message Styles + /// Carousel container decoration + BoxDecoration get carouselBoxDecoration; + /// Title text style used for displaying text on Carousel widget TextStyle get carouselTitleTextStyle; diff --git a/lib/src/theme/default_theme.dart b/lib/src/theme/default_theme.dart index d7f20a5..ffdf66e 100644 --- a/lib/src/theme/default_theme.dart +++ b/lib/src/theme/default_theme.dart @@ -60,6 +60,15 @@ class DefaultChatTheme extends ChatTheme { @override ButtonStyle get carouselButtonStyle => const ButtonStyle(); + @override + BoxDecoration get carouselBoxDecoration => BoxDecoration( + borderRadius: BorderRadius.circular(16), + color: secondaryColor, + ); + + @override + BorderRadius get imageBorderRadius => BorderRadius.circular(16); + @override ButtonStyle get quickReplyButtonStyle => ButtonStyle( backgroundColor: MaterialStateProperty.all(neutral2), @@ -135,6 +144,15 @@ class DarkChatTheme extends ChatTheme { @override ButtonStyle get carouselButtonStyle => const ButtonStyle(); + @override + BoxDecoration get carouselBoxDecoration => BoxDecoration( + borderRadius: BorderRadius.circular(16), + color: primaryColor, + ); + + @override + BorderRadius get imageBorderRadius => BorderRadius.circular(16); + @override ButtonStyle get quickReplyButtonStyle => ButtonStyle( backgroundColor: MaterialStateProperty.all(secondaryDark), diff --git a/pubspec.yaml b/pubspec.yaml index ae6de56..9630873 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -2,7 +2,7 @@ name: swifty_chat description: >- A Flutter package to quickly get started building Chat UIs with different kind of message kinds. -version: 1.0.3 +version: 1.1.0 homepage: https://github.com/EnesKaraosman/swifty_chat repository: https://github.com/EnesKaraosman/swifty_chat @@ -12,17 +12,17 @@ environment: dependencies: carousel_slider: ^4.0.0 - dart_extensions: ^2.1.3 + dart_extensions: ^2.2.0 flutter: sdk: flutter - flutter_html: ^2.1.2 - styled_widget: ^0.4.0 + flutter_html: ^2.1.5 + styled_widget: ^0.4.0+3 swifty_chat_data: ^0.0.1 dev_dependencies: - flutter_lints: ^1.0.0 + flutter_lints: ^1.0.4 flutter_test: sdk: flutter