ui_kit/refactor/theme_resolver_enhance #139

Merged
malo merged 3 commits from ui_kit/refactor/theme_resolver_enhance into master 2023-02-16 11:44:09 +00:00
20 changed files with 273 additions and 75 deletions

View File

@ -15,6 +15,7 @@
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import 'package:flutter/material.dart';
import 'package:wyatt_ui_components/src/domain/entities/theme_style.dart';
/// {@template theme_resolver}
/// In charge of theme negotiation and merge.
@ -30,7 +31,7 @@ import 'package:flutter/material.dart';
/// - If the value is mandatory: a hardcoded value in "wyatt_ui_kit" is chosen.
/// - If not, the style is simply not applied.
/// {@endtemplate}
abstract class ThemeResolver<S, T, E> {
abstract class ThemeResolver<S extends ThemeStyle<S>, T, E> {
/// {@macro theme_resolver}
const ThemeResolver();
@ -81,8 +82,13 @@ abstract class ThemeResolver<S, T, E> {
/// Choose most suitable style for a given context.
S negotiate(BuildContext context, {E? extra}) {
S style = computeDefaultValue(context, extra: extra);
style = computeExtensionValue(context, style, extra: extra) ?? style;
style = computeCustomValue(context, style, extra: extra) ?? style;
return style;
final S? extensionStyle =
computeExtensionValue(context, style, extra: extra);
style = style.mergeWith(extensionStyle);
final S? customStyle = computeCustomValue(context, style, extra: extra);
return style.mergeWith(customStyle);
}
}

View File

@ -26,7 +26,7 @@ abstract class ButtonComponent extends Component {
this.selectedStyle,
this.invalidStyle,
this.onPressed,
this.themeResolver,
super.themeResolver,
super.key,
});
@ -53,7 +53,4 @@ abstract class ButtonComponent extends Component {
/// Callback on button press
final void Function(ControlState state)? onPressed;
/// Theme Resolver for this component
final ThemeResolver<dynamic, dynamic, dynamic>? themeResolver;
}

View File

@ -16,8 +16,9 @@
import 'package:flutter/widgets.dart';
import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
import 'package:wyatt_ui_components/src/domain/entities/theme_style.dart';
abstract class ButtonStyle<T> {
abstract class ButtonStyle<T> extends ThemeStyle<T> {
const ButtonStyle({
this.radius,
this.padding,

View File

@ -37,6 +37,31 @@ class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
super.shadow,
});
/// Merges non-null `b` attributes in `a`
static FileSelectionButtonStyle? merge(
FileSelectionButtonStyle? a,
FileSelectionButtonStyle? b,
) {
if (b == null) {
return a?.copyWith();
}
if (a == null) {
return b.copyWith();
}
return a.copyWith(
title: b.title,
subTitle: b.subTitle,
radius: b.radius,
padding: b.padding,
foregroundColors: b.foregroundColors,
backgroundColors: b.backgroundColors,
borderColors: b.borderColors,
stroke: b.stroke,
shadow: b.shadow,
);
}
/// Used for interpolation.
static FileSelectionButtonStyle? lerp(
FileSelectionButtonStyle? a,
@ -81,4 +106,15 @@ class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
///
/// Default to `TextTheme.labelSmall`
final TextStyle? subTitle;
@override
FileSelectionButtonStyle mergeWith(FileSelectionButtonStyle? other) =>
FileSelectionButtonStyle.merge(this, other)!;
@override
FileSelectionButtonStyle? lerpWith(
FileSelectionButtonStyle? other,
double t,
) =>
FileSelectionButtonStyle.lerp(this, other, t);
}

View File

@ -36,6 +36,30 @@ class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
super.shadow,
});
/// Merges non-null `b` attributes in `a`
static FlatButtonStyle? merge(
FlatButtonStyle? a,
FlatButtonStyle? b,
) {
if (b == null) {
return a?.copyWith();
}
if (a == null) {
return b.copyWith();
}
return a.copyWith(
label: b.label,
radius: b.radius,
padding: b.padding,
foregroundColors: b.foregroundColors,
backgroundColors: b.backgroundColors,
borderColors: b.borderColors,
stroke: b.stroke,
shadow: b.shadow,
);
}
/// Used for interpolation.
static FlatButtonStyle? lerp(
FlatButtonStyle? a,
@ -76,6 +100,10 @@ class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
final TextStyle? label;
@override
String toString() =>
'FlatButtonStyle(label: $label), inherited: ${super.toString()}';
FlatButtonStyle mergeWith(FlatButtonStyle? other) =>
FlatButtonStyle.merge(this, other)!;
@override
FlatButtonStyle? lerpWith(FlatButtonStyle? other, double t) =>
FlatButtonStyle.lerp(this, other, t);
}

View File

@ -36,6 +36,30 @@ class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
super.shadow,
});
/// Merges non-null `b` attributes in `a`
static SimpleIconButtonStyle? merge(
SimpleIconButtonStyle? a,
SimpleIconButtonStyle? b,
) {
if (b == null) {
return a?.copyWith();
}
if (a == null) {
return b.copyWith();
}
return a.copyWith(
dimension: b.dimension,
radius: b.radius,
padding: b.padding,
foregroundColors: b.foregroundColors,
backgroundColors: b.backgroundColors,
borderColors: b.borderColors,
stroke: b.stroke,
shadow: b.shadow,
);
}
/// Used for interpolation.
static SimpleIconButtonStyle? lerp(
SimpleIconButtonStyle? a,
@ -74,4 +98,12 @@ class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
///
/// Default to `context.buttonTheme.height`
final double? dimension;
@override
SimpleIconButtonStyle mergeWith(SimpleIconButtonStyle? other) =>
SimpleIconButtonStyle.merge(this, other)!;
@override
SimpleIconButtonStyle? lerpWith(SimpleIconButtonStyle? other, double t) =>
SimpleIconButtonStyle.lerp(this, other, t);
}

View File

@ -37,6 +37,31 @@ class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
super.shadow,
});
/// Merges non-null `b` attributes in `a`
static SymbolButtonStyle? merge(
SymbolButtonStyle? a,
SymbolButtonStyle? b,
) {
if (b == null) {
return a?.copyWith();
}
if (a == null) {
return b.copyWith();
}
return a.copyWith(
label: b.label,
dimension: b.dimension,
radius: b.radius,
padding: b.padding,
foregroundColors: b.foregroundColors,
backgroundColors: b.backgroundColors,
borderColors: b.borderColors,
stroke: b.stroke,
shadow: b.shadow,
);
}
/// Used for interpolation.
static SymbolButtonStyle? lerp(
SymbolButtonStyle? a,
@ -81,4 +106,12 @@ class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
///
/// Default to `context.buttonTheme.height`
final double? dimension;
@override
SymbolButtonStyle mergeWith(SymbolButtonStyle? other) =>
SymbolButtonStyle.merge(this, other)!;
@override
SymbolButtonStyle? lerpWith(SymbolButtonStyle? other, double t) =>
SymbolButtonStyle.lerp(this, other, t);
}

View File

@ -15,7 +15,11 @@
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import 'package:flutter/material.dart';
import 'package:wyatt_ui_components/src/core/utils/theme_resolver.dart';
abstract class Component extends StatelessWidget {
const Component({super.key});
const Component({this.themeResolver, super.key});
/// Theme Resolver for this component
final ThemeResolver<dynamic, dynamic, dynamic>? themeResolver;
}

View File

@ -21,3 +21,4 @@ export './cards/cards.dart';
export './component.dart';
export './error_widget_component.dart';
export './loading_widget_component.dart';
export './theme_style.dart';

View File

@ -14,13 +14,12 @@
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import 'package:flutter/widgets.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
abstract class ThemeStyle<T> {
const ThemeStyle();
mixin ExportBloc<T extends StateStreamableSource<Object?>> {
T get bloc;
Widget exportBloc({required Widget child}) => BlocProvider<T>.value(
value: bloc,
child: child,
);
/// Merges non-null `other` attributes in `this` and returns a copy.
T mergeWith(T? other);
/// Used for interpolation.
T? lerpWith(T? other, double t);
}

View File

@ -0,0 +1,36 @@
// Copyright (C) 2023 WYATT GROUP
// Please see the AUTHORS file for details.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
class ExportableBloc<T extends StateStreamableSource<Object?>>
extends StatelessWidget {
const ExportableBloc({
required this.bloc,
required this.child,
super.key,
});
final T bloc;
final Widget child;
@override
Widget build(BuildContext context) => BlocProvider<T>.value(
value: bloc,
child: child,
);
}

View File

@ -0,0 +1,49 @@
// Copyright (C) 2023 WYATT GROUP
// Please see the AUTHORS file for details.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/material.dart';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
class DotterBorderChild extends StatelessWidget {
const DotterBorderChild({
required this.style,
required this.child,
super.key,
});
final FileSelectionButtonStyle style;
final Widget child;
@override
Widget build(BuildContext context) {
if (style.borderColors != null && style.stroke != null) {
return DottedBorder(
padding: EdgeInsets.zero,
dashPattern: const [5, 5],
strokeWidth: style.stroke!,
color: style.borderColors!.color,
borderType: BorderType.RRect,
radius:
style.radius?.resolve(TextDirection.ltr).bottomLeft ?? Radius.zero,
strokeCap: StrokeCap.square,
child: child,
);
} else {
return child;
}
}
}

View File

@ -18,15 +18,15 @@ import 'package:flutter/material.dart' hide ButtonStyle;
import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/src/components/buttons/cubit/invalid_button_cubit.dart';
import 'package:wyatt_ui_kit/src/components/buttons/exportable_bloc.dart';
import 'package:wyatt_ui_kit/src/components/buttons/file_selection_button/file_selection_button_screen.dart';
import 'package:wyatt_ui_kit/src/components/buttons/file_selection_button/file_selection_button_theme_resolver.dart';
import 'package:wyatt_ui_kit/src/core/mixin/export_bloc_mixin.dart';
part 'file_selection_button.g.dart';
@ComponentCopyWithExtension()
class FileSelectionButton extends FileSelectionButtonComponent
with $FileSelectionButtonCWMixin, ExportBloc<InvalidButtonCubit> {
with $FileSelectionButtonCWMixin {
FileSelectionButton({
super.leading,
super.title,
@ -46,7 +46,6 @@ class FileSelectionButton extends FileSelectionButtonComponent
final InvalidButtonCubit _cubit = InvalidButtonCubit();
@override
InvalidButtonCubit get bloc => _cubit;
@override
@ -82,7 +81,8 @@ class FileSelectionButton extends FileSelectionButtonComponent
super.themeResolver as FileSelectionButtonThemeResolver?;
@override
Widget build(BuildContext context) => exportBloc(
Widget build(BuildContext context) => ExportableBloc(
bloc: _cubit,
child: FileSelectionButtonScreen(
leading: leading,
title: title,

View File

@ -14,7 +14,6 @@
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/material.dart' hide ButtonStyle;
import 'package:flutter/services.dart';
import 'package:gap/gap.dart';
@ -22,6 +21,7 @@ import 'package:wyatt_bloc_helper/wyatt_bloc_helper.dart';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/src/components/buttons/cubit/button_cubit.dart';
import 'package:wyatt_ui_kit/src/components/buttons/cubit/invalid_button_cubit.dart';
import 'package:wyatt_ui_kit/src/components/buttons/file_selection_button/dotter_border_child.dart';
import 'package:wyatt_ui_kit/src/components/buttons/file_selection_button/file_selection_button_theme_resolver.dart';
import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart';
@ -65,7 +65,7 @@ class FileSelectionButtonScreen
InvalidButtonCubit create(BuildContext context) => InvalidButtonCubit();
/// Negotiate the theme to get a complete style.
FileSelectionButtonStyle resolve(BuildContext context, ButtonState state) {
FileSelectionButtonStyle _resolve(BuildContext context, ButtonState state) {
final FileSelectionButtonThemeResolver resolver = themeResolver ??
FileSelectionButtonThemeResolver(
computeExtensionValueFn: (
@ -135,31 +135,9 @@ class FileSelectionButtonScreen
return resolver.negotiate(context, extra: state);
}
Widget _border(
BuildContext context,
FileSelectionButtonStyle style,
Widget child,
) {
if (style.borderColors != null && style.stroke != null) {
return DottedBorder(
padding: EdgeInsets.zero,
dashPattern: const [5, 5],
strokeWidth: style.stroke!,
color: style.borderColors!.color,
borderType: BorderType.RRect,
radius:
style.radius?.resolve(TextDirection.ltr).bottomLeft ?? Radius.zero,
strokeCap: StrokeCap.square,
child: child,
);
} else {
return child;
}
}
@override
Widget onBuild(BuildContext context, ButtonState state) {
final style = resolve(context, state);
final style = _resolve(context, state);
return Focus(
onFocusChange: (hasFocus) =>
@ -192,10 +170,9 @@ class FileSelectionButtonScreen
onPressed?.call(state.state);
bloc(context).onClickUpOut();
},
child: _border(
context,
style,
DecoratedBox(
child: DotterBorderChild(
style: style,
child: DecoratedBox(
decoration: BoxDecoration(
color: style.backgroundColors?.color,
// if no gradient colors => no default value
@ -221,7 +198,7 @@ class FileSelectionButtonScreen
children: [
if (leading != null) ...[
leading ?? const SizedBox.shrink(),
Gap((style.padding?.horizontal ?? 10)/2),
Gap((style.padding?.horizontal ?? 10) / 2),
],
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
@ -237,7 +214,7 @@ class FileSelectionButtonScreen
/// buttonStyle.foregroundColor.colors ??
/// null
///
/// More infos in `negociate()` method
/// More infos in `ThemeResolver` class
if (title != null) ...[
Text(
title!.text,
@ -263,7 +240,7 @@ class FileSelectionButtonScreen
/// buttonStyle.foregroundColor.colors ??
/// null
///
/// More infos in `negociate()` method
/// More infos in `ThemeResolver` class
if (subTitle != null) ...[
const Gap(5),
Text(

View File

@ -18,15 +18,14 @@ import 'package:flutter/material.dart' hide ButtonStyle;
import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/src/components/buttons/cubit/button_cubit.dart';
import 'package:wyatt_ui_kit/src/components/buttons/exportable_bloc.dart';
import 'package:wyatt_ui_kit/src/components/buttons/flat_button/flat_button_screen.dart';
import 'package:wyatt_ui_kit/src/components/buttons/flat_button/flat_button_theme_resolver.dart';
import 'package:wyatt_ui_kit/src/core/mixin/export_bloc_mixin.dart';
part 'flat_button.g.dart';
@ComponentCopyWithExtension()
class FlatButton extends FlatButtonComponent
with $FlatButtonCWMixin, ExportBloc<ButtonCubit> {
class FlatButton extends FlatButtonComponent with $FlatButtonCWMixin {
FlatButton({
super.prefix,
super.suffix,
@ -44,7 +43,6 @@ class FlatButton extends FlatButtonComponent
final ButtonCubit _cubit = ButtonCubit();
@override
ButtonCubit get bloc => _cubit;
@override
@ -67,7 +65,8 @@ class FlatButton extends FlatButtonComponent
super.themeResolver as FlatButtonThemeResolver?;
@override
Widget build(BuildContext context) => exportBloc(
Widget build(BuildContext context) => ExportableBloc(
bloc: _cubit,
child: FlatButtonScreen(
prefix: prefix,
suffix: suffix,

View File

@ -59,7 +59,7 @@ class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
ButtonCubit create(BuildContext context) => ButtonCubit();
/// Negotiate the theme to get a complete style.
FlatButtonStyle resolve(BuildContext context, ControlState state) {
FlatButtonStyle _resolve(BuildContext context, ControlState state) {
final FlatButtonThemeResolver resolver = themeResolver ??
FlatButtonThemeResolver(
computeExtensionValueFn: (
@ -103,7 +103,7 @@ class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
@override
Widget onBuild(BuildContext context, ButtonState state) {
final style = resolve(context, state.state);
final style = _resolve(context, state.state);
return Focus(
onFocusChange: (hasFocus) =>

View File

@ -18,15 +18,15 @@ import 'package:flutter/material.dart' hide ButtonStyle;
import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/src/components/buttons/cubit/button_cubit.dart';
import 'package:wyatt_ui_kit/src/components/buttons/exportable_bloc.dart';
import 'package:wyatt_ui_kit/src/components/buttons/simple_icon_button/simple_icon_button_theme_resolver.dart';
import 'package:wyatt_ui_kit/src/components/buttons/simple_icon_button/simple_icon_screen.dart';
import 'package:wyatt_ui_kit/src/core/mixin/export_bloc_mixin.dart';
part 'simple_icon_button.g.dart';
@ComponentCopyWithExtension()
class SimpleIconButton extends SimpleIconButtonComponent
with $SimpleIconButtonCWMixin, ExportBloc<ButtonCubit> {
with $SimpleIconButtonCWMixin {
SimpleIconButton({
super.icon,
super.disabledStyle,
@ -41,7 +41,6 @@ class SimpleIconButton extends SimpleIconButtonComponent
final ButtonCubit _cubit = ButtonCubit();
@override
ButtonCubit get bloc => _cubit;
@override
@ -69,7 +68,8 @@ class SimpleIconButton extends SimpleIconButtonComponent
super.themeResolver as SimpleIconButtonThemeResolver?;
@override
Widget build(BuildContext context) => exportBloc(
Widget build(BuildContext context) => ExportableBloc(
bloc: _cubit,
child: SimpleIconButtonScreen(
icon: icon,
disabledStyle: disabledStyle,

View File

@ -52,7 +52,7 @@ class SimpleIconButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
ButtonCubit create(BuildContext context) => ButtonCubit();
/// Negotiate the theme to get a complete style.
SimpleIconButtonStyle resolve(BuildContext context, ControlState state) {
SimpleIconButtonStyle _resolve(BuildContext context, ControlState state) {
final SimpleIconButtonThemeResolver resolver = themeResolver ??
SimpleIconButtonThemeResolver(
computeExtensionValueFn: (
@ -96,7 +96,7 @@ class SimpleIconButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
@override
Widget onBuild(BuildContext context, ButtonState state) {
final style = resolve(context, state.state);
final style = _resolve(context, state.state);
return Focus(
onFocusChange: (hasFocus) =>

View File

@ -18,15 +18,15 @@ import 'package:flutter/material.dart' hide ButtonStyle;
import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/src/components/buttons/cubit/selectable_button_cubit.dart';
import 'package:wyatt_ui_kit/src/components/buttons/exportable_bloc.dart';
import 'package:wyatt_ui_kit/src/components/buttons/symbol_button/symbol_button_screen.dart';
import 'package:wyatt_ui_kit/src/components/buttons/symbol_button/symbol_button_theme_resolver.dart';
import 'package:wyatt_ui_kit/src/core/mixin/export_bloc_mixin.dart';
part 'symbol_button.g.dart';
@ComponentCopyWithExtension()
class SymbolButton extends SymbolButtonComponent
with $SymbolButtonCWMixin, ExportBloc<SelectableButtonCubit> {
with $SymbolButtonCWMixin{
SymbolButton({
super.icon,
super.label,
@ -44,7 +44,6 @@ class SymbolButton extends SymbolButtonComponent
final SelectableButtonCubit _cubit = SelectableButtonCubit();
@override
SelectableButtonCubit get bloc => _cubit;
@override
@ -74,7 +73,8 @@ class SymbolButton extends SymbolButtonComponent
super.themeResolver as SymbolButtonThemeResolver?;
@override
Widget build(BuildContext context) => exportBloc(
Widget build(BuildContext context) => ExportableBloc(
bloc: _cubit,
child: SymbolButtonScreen(
icon: icon,
label: label,

View File

@ -61,7 +61,7 @@ class SymbolButtonScreen
SelectableButtonCubit create(BuildContext context) => SelectableButtonCubit();
/// Negotiate the theme to get a complete style.
SymbolButtonStyle resolve(BuildContext context, ButtonState state) {
SymbolButtonStyle _resolve(BuildContext context, ButtonState state) {
final SymbolButtonThemeResolver resolver = themeResolver ??
SymbolButtonThemeResolver(
computeExtensionValueFn: (
@ -127,7 +127,7 @@ class SymbolButtonScreen
@override
Widget onBuild(BuildContext context, ButtonState state) {
final style = resolve(context, state);
final style = _resolve(context, state);
return Focus(
onFocusChange: (hasFocus) =>