From 23449ec57d8276409b9a3051ec39786651b6440f Mon Sep 17 00:00:00 2001 From: Freek van de Ven Date: Thu, 23 May 2024 15:59:18 +0200 Subject: [PATCH] feat: change CategorySelectorButton to use the category icon and some extra styling --- CHANGELOG.md | 1 + .../lib/src/config/timeline_options.dart | 3 +- .../lib/src/config/timeline_paddings.dart | 4 + .../lib/src/config/timeline_theme.dart | 4 +- .../screens/timeline_selection_screen.dart | 5 +- .../lib/src/widgets/category_selector.dart | 3 +- .../src/widgets/category_selector_button.dart | 73 ++++++++++++------- 7 files changed, 59 insertions(+), 34 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4c6f89a..83d379f 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/flutter_timeline_view/lib/src/config/timeline_options.dart b/packages/flutter_timeline_view/lib/src/config/timeline_options.dart index 592bf65..4c627b5 100644 --- a/packages/flutter_timeline_view/lib/src/config/timeline_options.dart +++ b/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, diff --git a/packages/flutter_timeline_view/lib/src/config/timeline_paddings.dart b/packages/flutter_timeline_view/lib/src/config/timeline_paddings.dart index 193a0a9..33a4ba4 100644 --- a/packages/flutter_timeline_view/lib/src/config/timeline_paddings.dart +++ b/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; } diff --git a/packages/flutter_timeline_view/lib/src/config/timeline_theme.dart b/packages/flutter_timeline_view/lib/src/config/timeline_theme.dart index 3462b2b..49609cd 100644 --- a/packages/flutter_timeline_view/lib/src/config/timeline_theme.dart +++ b/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 diff --git a/packages/flutter_timeline_view/lib/src/screens/timeline_selection_screen.dart b/packages/flutter_timeline_view/lib/src/screens/timeline_selection_screen.dart index 39f3317..8d23418 100644 --- a/packages/flutter_timeline_view/lib/src/screens/timeline_selection_screen.dart +++ b/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: diff --git a/packages/flutter_timeline_view/lib/src/widgets/category_selector.dart b/packages/flutter_timeline_view/lib/src/widgets/category_selector.dart index 2e69922..c9fe02b 100644 --- a/packages/flutter_timeline_view/lib/src/widgets/category_selector.dart +++ b/packages/flutter_timeline_view/lib/src/widgets/category_selector.dart @@ -41,8 +41,7 @@ class _CategorySelectorState extends State { ), 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, diff --git a/packages/flutter_timeline_view/lib/src/widgets/category_selector_button.dart b/packages/flutter_timeline_view/lib/src/widgets/category_selector_button.dart index 0d19566..5ef5611 100644 --- a/packages/flutter_timeline_view/lib/src/widgets/category_selector_button.dart +++ b/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, + ), + ), + ], ), ), ],