feat: add categorySelectionButtonSelectedTextColor and categorySelectionButtonUnselectedTextColor to the theme

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## 4.1.0
 - Migrate to flutter 3.22 which deprecates the background and onBackground properties in the ThemeData and also removes MaterialStatePropertyAll
+- Add categorySelectionButtonSelectedTextColor and categorySelectionButtonUnselectedTextColor to the timeline theme to allow for the customization of the text color of the category selection buttons
 
 ## 4.0.0
 

packages/flutter_timeline/pubspec.yaml

@@ -3,7 +3,7 @@
 # SPDX-License-Identifier: GPL-3.0-or-later
 name: flutter_timeline
 description: Visual elements and interface combined into one package
-version: 4.0.0
+version: 4.1.0
 
 publish_to: none
 
@@ -21,13 +21,13 @@ dependencies:
     git: 
        url: https://github.com/Iconica-Development/flutter_timeline
        path: packages/flutter_timeline_view
-       ref: 4.0.0
+       ref: 4.1.0
 
   flutter_timeline_interface:
     git:
       url: https://github.com/Iconica-Development/flutter_timeline
       path: packages/flutter_timeline_interface
-      ref: 4.0.0
+      ref: 4.1.0
 
 dev_dependencies:
   flutter_lints: ^2.0.0

packages/flutter_timeline_firebase/pubspec.yaml

@@ -4,7 +4,7 @@
 
 name: flutter_timeline_firebase
 description: Implementation of the Flutter Timeline interface for Firebase.
-version: 4.0.0
+version: 4.1.0
 
 publish_to: none
 
@@ -23,7 +23,7 @@ dependencies:
     git: 
        url: https://github.com/Iconica-Development/flutter_timeline
        path: packages/flutter_timeline_interface
-       ref: 4.0.0
+       ref: 4.1.0
 
 dev_dependencies:
   flutter_lints: ^2.0.0

packages/flutter_timeline_interface/pubspec.yaml

@@ -4,7 +4,7 @@
 
 name: flutter_timeline_interface
 description: Interface for the service of the Flutter Timeline component
-version: 4.0.0
+version: 4.1.0
 
 publish_to: none
 

packages/flutter_timeline_view/lib/src/config/timeline_theme.dart

@@ -17,6 +17,8 @@ class TimelineTheme {
     this.deleteIcon,
     this.categorySelectionButtonBorderColor,
     this.categorySelectionButtonBackgroundColor,
+    this.categorySelectionButtonSelectedTextColor,
+    this.categorySelectionButtonUnselectedTextColor,
     this.postCreationFloatingActionButtonColor,
     this.textStyles = const TimelineTextStyles(),
   });
@@ -51,6 +53,13 @@ class TimelineTheme {
   /// selection screen
   final Color? categorySelectionButtonBackgroundColor;
 
+  /// The color of the text of the category selection button when it is selected
+  final Color? categorySelectionButtonSelectedTextColor;
+
+  /// The color of the text of the category selection button when
+  /// it is not selected
+  final Color? categorySelectionButtonUnselectedTextColor;
+
   /// The color of the floating action button on the overview screen
   final Color? postCreationFloatingActionButtonColor;
 }

packages/flutter_timeline_view/lib/src/widgets/category_selector_button.dart

@@ -21,6 +21,7 @@ class CategorySelectorButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     var theme = Theme.of(context);
+    var size = MediaQuery.of(context).size;
 
     return SizedBox(
       height: isOnTop ? 140 : 40,
@@ -56,23 +57,18 @@ class CategorySelectorButton extends StatelessWidget {
         ),
         child: isOnTop
             ? SizedBox(
-                width: MediaQuery.of(context).size.width,
+                width: size.width,
                 child: Stack(
                   children: [
                     Column(
                       mainAxisAlignment: MainAxisAlignment.end,
                       crossAxisAlignment: CrossAxisAlignment.start,
                       children: [
-                        Text(
+                        _CategoryButtonText(
-                          category.title,
+                          category: category,
-                          style: (options.theme.textStyles.categoryTitleStyle ??
+                          options: options,
-                                  theme.textTheme.labelLarge)
+                          theme: theme,
-                              ?.copyWith(
+                          selected: selected,
-                            color: selected
-                                ? theme.colorScheme.onPrimary
-                                : theme.colorScheme.onSurface,
-                          ),
-                          textAlign: TextAlign.start,
                         ),
                       ],
                     ),
@@ -91,17 +87,11 @@ class CategorySelectorButton extends StatelessWidget {
                               options.paddings.categoryButtonTextPadding ?? 8,
                         ),
                         Expanded(
-                          child: Text(
+                          child: _CategoryButtonText(
-                            category.title,
+                            category: category,
-                            style:
+                            options: options,
-                                (options.theme.textStyles.categoryTitleStyle ??
+                            theme: theme,
-                                        theme.textTheme.labelLarge)
+                            selected: selected,
-                                    ?.copyWith(
-                              color: selected
-                                  ? theme.colorScheme.onPrimary
-                                  : theme.colorScheme.onSurface,
-                            ),
-                            textAlign: TextAlign.start,
                             overflow: TextOverflow.ellipsis,
                           ),
                         ),
@@ -114,3 +104,35 @@ class CategorySelectorButton extends StatelessWidget {
     );
   }
 }
+
+class _CategoryButtonText extends StatelessWidget {
+  const _CategoryButtonText({
+    required this.category,
+    required this.options,
+    required this.theme,
+    required this.selected,
+    this.overflow,
+  });
+
+  final TimelineCategory category;
+  final TimelineOptions options;
+  final ThemeData theme;
+  final bool selected;
+  final TextOverflow? overflow;
+
+  @override
+  Widget build(BuildContext context) => Text(
+        category.title,
+        style: (options.theme.textStyles.categoryTitleStyle ??
+                theme.textTheme.labelLarge)
+            ?.copyWith(
+          color: selected
+              ? options.theme.categorySelectionButtonSelectedTextColor ??
+                  theme.colorScheme.onPrimary
+              : options.theme.categorySelectionButtonUnselectedTextColor ??
+                  theme.colorScheme.onSurface,
+        ),
+        textAlign: TextAlign.start,
+        overflow: overflow,
+      );
+}

packages/flutter_timeline_view/pubspec.yaml

@@ -4,7 +4,7 @@
 
 name: flutter_timeline_view
 description: Visual elements of the Flutter Timeline Component
-version: 4.0.0
+version: 4.1.0
 
 publish_to: none
 
@@ -23,7 +23,7 @@ dependencies:
     git: 
        url: https://github.com/Iconica-Development/flutter_timeline
        path: packages/flutter_timeline_interface
-       ref: 4.0.0
+       ref: 4.1.0
   flutter_image_picker:
     git:
       url: https://github.com/Iconica-Development/flutter_image_picker