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,
-    String categoryName,
+    TimelineCategory category,
     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,8 +55,9 @@ class TimelineSelectionScreen extends StatelessWidget {
                     decoration: BoxDecoration(
                       borderRadius: BorderRadius.circular(10),
                       border: Border.all(
-                        color: options.theme.categorySelectionBorderColor ??
-                            Theme.of(context).primaryColor,
+                        color:
+                            options.theme.categorySelectionButtonBorderColor ??
+                                Theme.of(context).primaryColor,
                         width: 2,
                       ),
                       color:

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.title,
+                  category,
                   () => 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,38 +57,55 @@ class CategorySelectorButton extends StatelessWidget {
         child: isOnTop
             ? SizedBox(
                 width: MediaQuery.of(context).size.width,
-                child: Column(
-                  mainAxisAlignment: MainAxisAlignment.end,
-                  crossAxisAlignment: CrossAxisAlignment.start,
+                child: Stack(
                   children: [
-                    Text(
-                      category.title,
-                      style: (options.theme.textStyles.categoryTitleStyle ??
-                              theme.textTheme.labelLarge)
-                          ?.copyWith(
-                        color: selected
-                            ? theme.colorScheme.onPrimary
-                            : theme.colorScheme.onSurface,
-                      ),
-                      textAlign: TextAlign.start,
+                    Column(
+                      mainAxisAlignment: MainAxisAlignment.end,
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text(
+                          category.title,
+                          style: (options.theme.textStyles.categoryTitleStyle ??
+                                  theme.textTheme.labelLarge)
+                              ?.copyWith(
+                            color: selected
+                                ? theme.colorScheme.onPrimary
+                                : theme.colorScheme.onSurface,
+                          ),
+                          textAlign: TextAlign.start,
+                        ),
+                      ],
                     ),
+                    Center(child: category.icon),
                   ],
                 ),
               )
             : Row(
                 children: [
                   Flexible(
-                    child: Text(
-                      category.title,
-                      style: (options.theme.textStyles.categoryTitleStyle ??
-                              theme.textTheme.labelLarge)
-                          ?.copyWith(
-                        color: selected
-                            ? theme.colorScheme.onPrimary
-                            : theme.colorScheme.onSurface,
-                      ),
-                      textAlign: TextAlign.start,
-                      overflow: TextOverflow.ellipsis,
+                    child: Row(
+                      children: [
+                        category.icon,
+                        SizedBox(
+                          width:
+                              options.paddings.categoryButtonTextPadding ?? 8,
+                        ),
+                        Expanded(
+                          child: Text(
+                            category.title,
+                            style:
+                                (options.theme.textStyles.categoryTitleStyle ??
+                                        theme.textTheme.labelLarge)
+                                    ?.copyWith(
+                              color: selected
+                                  ? theme.colorScheme.onPrimary
+                                  : theme.colorScheme.onSurface,
+                            ),
+                            textAlign: TextAlign.start,
+                            overflow: TextOverflow.ellipsis,
+                          ),
+                        ),
+                      ],
                     ),
                   ),
                 ],