feat: change CategorySelectorButton to use the category icon and some extra styling

CHANGELOG.md

@@ -18,6 +18,7 @@
 - Fix when clicking on post delete in the post screen of the userstory it will now navigate back to the timeline and delete the post
 - Fix like icon being used for both like and unliked posts
 - Fix post creator can only like the post once and after it is actually created
+- Change the CategorySelectorButton to use more styling options and allow for an icon to be shown
 
 ## 3.0.1
 

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

@@ -223,8 +223,7 @@ class CategoriesOptions {
 
   /// Abilty to override the standard category selector
   final Widget Function(
-    String? categoryKey,
+    TimelineCategory category,
-    String categoryName,
     Function() onTap,
     // ignore: avoid_positional_boolean_parameters
     bool selected,

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

@@ -8,6 +8,7 @@ class TimelinePaddingOptions {
     this.postPadding =
         const EdgeInsets.symmetric(vertical: 12.0, horizontal: 12.0),
     this.postOverviewButtonBottomPadding = 30.0,
+    this.categoryButtonTextPadding,
   });
 
   /// The padding between posts in the timeline
@@ -18,4 +19,7 @@ class TimelinePaddingOptions {
 
   /// The bottom padding of the button on the post overview screen
   final double postOverviewButtonBottomPadding;
+
+  /// The padding between the icon and the text in the category button
+  final double? categoryButtonTextPadding;
 }

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

@@ -15,7 +15,7 @@ class TimelineTheme {
     this.sendIcon,
     this.moreIcon,
     this.deleteIcon,
-    this.categorySelectionBorderColor,
+    this.categorySelectionButtonBorderColor,
     this.categorySelectionButtonBackgroundColor,
     this.postCreationFloatingActionButtonColor,
     this.textStyles = const TimelineTextStyles(),
@@ -45,7 +45,7 @@ class TimelineTheme {
   final TimelineTextStyles textStyles;
 
   /// The color of the border around the category in the selection screen
-  final Color? categorySelectionBorderColor;
+  final Color? categorySelectionButtonBorderColor;
 
   /// The color of the background of the category selection button in the
   /// selection screen

packages/flutter_timeline_view/lib/src/screens/timeline_selection_screen.dart

@@ -55,7 +55,8 @@ class TimelineSelectionScreen extends StatelessWidget {
                     decoration: BoxDecoration(
                       borderRadius: BorderRadius.circular(10),
                       border: Border.all(
-                        color: options.theme.categorySelectionBorderColor ??
+                        color:
+                            options.theme.categorySelectionButtonBorderColor ??
                                 Theme.of(context).primaryColor,
                         width: 2,
                       ),

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

@@ -41,8 +41,7 @@ class _CategorySelectorState extends State<CategorySelector> {
           ),
           for (var category in categories) ...[
             widget.options.categoriesOptions.categoryButtonBuilder?.call(
-                  category.key,
+                  category,
-                  category.title,
                   () => widget.onTapCategory(category.key),
                   widget.filter == category.key,
                   widget.isOnTop,

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

@@ -36,7 +36,10 @@ class CategorySelectorButton extends StatelessWidget {
           ),
           fixedSize: MaterialStatePropertyAll(Size(140, isOnTop ? 140 : 20)),
           backgroundColor: MaterialStatePropertyAll(
-            selected ? theme.colorScheme.primary : Colors.transparent,
+            selected
+                ? theme.colorScheme.primary
+                : options.theme.categorySelectionButtonBackgroundColor ??
+                    Colors.transparent,
           ),
           shape: MaterialStatePropertyAll(
             RoundedRectangleBorder(
@@ -44,7 +47,8 @@ class CategorySelectorButton extends StatelessWidget {
                 Radius.circular(8),
               ),
               side: BorderSide(
-                color: theme.colorScheme.primary,
+                color: options.theme.categorySelectionButtonBorderColor ??
+                    theme.colorScheme.primary,
                 width: 2,
               ),
             ),
@@ -53,7 +57,9 @@ class CategorySelectorButton extends StatelessWidget {
         child: isOnTop
             ? SizedBox(
                 width: MediaQuery.of(context).size.width,
-                child: Column(
+                child: Stack(
+                  children: [
+                    Column(
                       mainAxisAlignment: MainAxisAlignment.end,
                       crossAxisAlignment: CrossAxisAlignment.start,
                       children: [
@@ -70,13 +76,25 @@ class CategorySelectorButton extends StatelessWidget {
                         ),
                       ],
                     ),
+                    Center(child: category.icon),
+                  ],
+                ),
               )
             : Row(
                 children: [
                   Flexible(
+                    child: Row(
+                      children: [
+                        category.icon,
+                        SizedBox(
+                          width:
+                              options.paddings.categoryButtonTextPadding ?? 8,
+                        ),
+                        Expanded(
                           child: Text(
                             category.title,
-                      style: (options.theme.textStyles.categoryTitleStyle ??
+                            style:
+                                (options.theme.textStyles.categoryTitleStyle ??
                                         theme.textTheme.labelLarge)
                                     ?.copyWith(
                               color: selected
@@ -90,6 +108,9 @@ class CategorySelectorButton extends StatelessWidget {
                       ],
                     ),
                   ),
+                ],
+              ),
+      ),
     );
   }
 }