[MOD] Some theming options added for carousel and image (&documented)

&some dep. updates.

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)

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)
+* `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.

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:

lib/src/chat-message-list-items/carousel_widget.dart

@@ -19,27 +19,29 @@ 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,
           enableInfiniteScroll: false,
         ),
       );
 
-  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,22 +54,22 @@ 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),
           ],
         ),
       );
 
   double _carouselItemHeight(BuildContext context) {
-    final height = ChatStateContainer
-        .of(context)
+    final height = ChatStateContainer.of(context)
         .messageCellSizeConfigurator
         .carouselCellMaxHeightConfiguration(context.mq.size.height);
     return height;

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

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;
 

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<Color>(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<Color>(secondaryDark),

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