feat: add categorySelectionButtonSelectedTextColor and categorySelectionButtonUnselectedTextColor to the theme

This commit is contained in:
Freek van de Ven 2024-06-17 18:32:36 +02:00
parent 567765f856
commit d77136edd4
7 changed files with 62 additions and 30 deletions

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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;
}

View file

@ -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(
category.title,
style: (options.theme.textStyles.categoryTitleStyle ??
theme.textTheme.labelLarge)
?.copyWith(
color: selected
? theme.colorScheme.onPrimary
: theme.colorScheme.onSurface,
),
textAlign: TextAlign.start,
_CategoryButtonText(
category: category,
options: options,
theme: theme,
selected: selected,
),
],
),
@ -91,17 +87,11 @@ class CategorySelectorButton extends StatelessWidget {
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,
child: _CategoryButtonText(
category: category,
options: options,
theme: theme,
selected: selected,
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,
);
}

View file

@ -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