From 1c2166533eb860a597d36aeed3eed7ad46eedb49 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Mon, 11 Nov 2024 21:24:11 -0300 Subject: [PATCH 01/57] feat: implement a new Mix's primitive component --- packages/mix/lib/mix.dart | 30 +- .../src/core/factory/style_widgets_ext.dart | 1 + .../mix/lib/src/specs/flex/flex_widget.dart | 98 +--- .../lib/src/specs/flexbox/flexbox_spec.dart | 111 +++++ .../lib/src/specs/flexbox/flexbox_spec.g.dart | 355 +++++++++++++++ .../lib/src/specs/flexbox/flexbox_widget.dart | 196 ++++++++ packages/mix/lib/src/specs/spec_util.dart | 4 + .../test/src/specs/flex/flex_widget_test.dart | 47 ++ .../specs/flexbox/flexbox_attribute_test.dart | 407 +++++++++++++++++ .../src/specs/flexbox/flexbox_spec_test.dart | 424 ++++++++++++++++++ .../src/specs/flexbox/flexbox_util_test.dart | 147 ++++++ .../specs/flexbox/flexbox_widget_test.dart | 262 +++++++++++ 12 files changed, 1970 insertions(+), 112 deletions(-) create mode 100644 packages/mix/lib/src/specs/flexbox/flexbox_spec.dart create mode 100644 packages/mix/lib/src/specs/flexbox/flexbox_spec.g.dart create mode 100644 packages/mix/lib/src/specs/flexbox/flexbox_widget.dart create mode 100644 packages/mix/test/src/specs/flexbox/flexbox_attribute_test.dart create mode 100644 packages/mix/test/src/specs/flexbox/flexbox_spec_test.dart create mode 100644 packages/mix/test/src/specs/flexbox/flexbox_util_test.dart create mode 100644 packages/mix/test/src/specs/flexbox/flexbox_widget_test.dart diff --git a/packages/mix/lib/mix.dart b/packages/mix/lib/mix.dart index 1fda7fcbb..ef70982e7 100644 --- a/packages/mix/lib/mix.dart +++ b/packages/mix/lib/mix.dart @@ -1,15 +1,15 @@ -/// /\\\\ /\\\\ /\\\\\\\\\\\ /\\\ /\\\ -/// \/\\\\\\ /\\\\\\ \/////\\\/// \///\\\ /\\\/ -/// \/\\\//\\\ /\\\//\\\ \/\\\ \///\\\\\\/ -/// \/\\\\///\\\/\\\/ \/\\\ \/\\\ \//\\\\ -/// \/\\\ \///\\\/ \/\\\ \/\\\ \/\\\\ -/// \/\\\ \/// \/\\\ \/\\\ /\\\\\\ -/// \/\\\ \/\\\ \/\\\ /\\\////\\\ -/// \/\\\ \/\\\ /\\\\\\\\\\\ /\\\/ \///\\\ -/// \/// \/// \/////////// \/// \/// -/// -/// https://fluttermix.com +/// /\\\\ /\\\\ /\\\\\\\\\\\ /\\\ /\\\ +/// \/\\\\\\ /\\\\\\ \/////\\\/// \///\\\ /\\\/ +/// \/\\\//\\\ /\\\//\\\ \/\\\ \///\\\\\\/ +/// \/\\\\///\\\/\\\/ \/\\\ \/\\\ \//\\\\ +/// \/\\\ \///\\\/ \/\\\ \/\\\ \/\\\\ +/// \/\\\ \/// \/\\\ \/\\\ /\\\\\\ +/// \/\\\ \/\\\ \/\\\ /\\\////\\\ +/// \/\\\ \/\\\ /\\\\\\\\\\\ /\\\/ \///\\\ +/// \/// \/// \/////////// \/// \/// /// +/// https://fluttermix.com +/// /// /\///////////////////////////////////////////////////\ /// \/\ ***** GENERATED CODE ***** \ \ /// \/\ ** DO NOT EDIT THIS FILE ** \ \ @@ -54,7 +54,6 @@ export 'src/attributes/strut_style/strut_style_dto.dart'; export 'src/attributes/text_height_behavior/text_height_behavior_dto.dart'; export 'src/attributes/text_style/text_style_dto.dart'; export 'src/attributes/text_style/text_style_util.dart'; - /// CORE export 'src/core/attribute.dart'; export 'src/core/attributes_map.dart'; @@ -72,7 +71,6 @@ export 'src/core/styled_widget.dart'; export 'src/core/utility.dart'; export 'src/core/variant.dart'; export 'src/core/widget_state/widget_state_controller.dart'; - /// MODIFIERS export 'src/modifiers/align_widget_modifier.dart'; export 'src/modifiers/aspect_ratio_widget_modifier.dart'; @@ -89,12 +87,13 @@ export 'src/modifiers/sized_box_widget_modifier.dart'; export 'src/modifiers/transform_widget_modifier.dart'; export 'src/modifiers/visibility_widget_modifier.dart'; export 'src/modifiers/widget_modifiers_util.dart'; - /// SPECS export 'src/specs/box/box_spec.dart'; export 'src/specs/box/box_widget.dart'; export 'src/specs/flex/flex_spec.dart'; export 'src/specs/flex/flex_widget.dart'; +export 'src/specs/flexbox/flexbox_spec.dart'; +export 'src/specs/flexbox/flexbox_widget.dart'; export 'src/specs/icon/icon_spec.dart'; export 'src/specs/icon/icon_widget.dart'; export 'src/specs/image/image_spec.dart'; @@ -105,7 +104,6 @@ export 'src/specs/stack/stack_widget.dart'; export 'src/specs/text/text_directives_util.dart'; export 'src/specs/text/text_spec.dart'; export 'src/specs/text/text_widget.dart'; - /// THEME export 'src/theme/material/material_theme.dart'; export 'src/theme/material/material_tokens.dart'; @@ -118,7 +116,6 @@ export 'src/theme/tokens/space_token.dart'; export 'src/theme/tokens/text_style_token.dart'; export 'src/theme/tokens/token_resolver.dart'; export 'src/theme/tokens/token_util.dart'; - /// VARIANTS export 'src/variants/context_variant.dart'; export 'src/variants/context_variant_util/on_breakpoint_util.dart'; @@ -130,6 +127,5 @@ export 'src/variants/context_variant_util/on_platform_util.dart'; export 'src/variants/context_variant_util/on_util.dart'; export 'src/variants/variant_attribute.dart'; export 'src/variants/widget_state_variant.dart'; - /// WIDGETS export 'src/widgets/pressable_widget.dart'; diff --git a/packages/mix/lib/src/core/factory/style_widgets_ext.dart b/packages/mix/lib/src/core/factory/style_widgets_ext.dart index 843c2a700..d4478b7f3 100644 --- a/packages/mix/lib/src/core/factory/style_widgets_ext.dart +++ b/packages/mix/lib/src/core/factory/style_widgets_ext.dart @@ -3,6 +3,7 @@ import 'package:flutter/widgets.dart'; import '../../specs/box/box_widget.dart'; import '../../specs/flex/flex_widget.dart'; +import '../../specs/flexbox/flexbox_widget.dart'; import '../../specs/icon/icon_widget.dart'; import '../../specs/text/text_widget.dart'; import 'style_mix.dart'; diff --git a/packages/mix/lib/src/specs/flex/flex_widget.dart b/packages/mix/lib/src/specs/flex/flex_widget.dart index a5ff1c2ff..b30a925de 100644 --- a/packages/mix/lib/src/specs/flex/flex_widget.dart +++ b/packages/mix/lib/src/specs/flex/flex_widget.dart @@ -4,7 +4,6 @@ import 'package:flutter/widgets.dart'; import '../../core/styled_widget.dart'; import '../../modifiers/internal/render_widget_modifier.dart'; -import '../box/box_spec.dart'; import 'flex_spec.dart'; /// A flexible layout widget enhanced with `Style` for simplified styling. @@ -88,8 +87,11 @@ class FlexSpecWidget extends StatelessWidget { mainAxisSize: spec?.mainAxisSize ?? _defaultFlex.mainAxisSize, crossAxisAlignment: spec?.crossAxisAlignment ?? _defaultFlex.crossAxisAlignment, + textDirection: spec?.textDirection ?? _defaultFlex.textDirection, verticalDirection: spec?.verticalDirection ?? _defaultFlex.verticalDirection, + textBaseline: spec?.textBaseline ?? _defaultFlex.textBaseline, + clipBehavior: spec?.clipBehavior ?? _defaultFlex.clipBehavior, children: _buildChildren(gap), ); @@ -200,98 +202,4 @@ class StyledColumn extends StyledFlex { }) : super(direction: Axis.vertical); } -/// A flex container widget with integrated `Style` for enhanced styling. -/// -/// `FlexBox` combines the features of `StyledContainer` and `StyledFlex`, offering -/// a powerful tool for creating flexible layouts with advanced styling capabilities -/// through `Style`. It's perfect for designing complex layouts that require both -/// container and flex properties with uniform styling. -/// -/// The `direction` parameter sets the layout's orientation, while the `Style` -/// integration simplifies the process of applying consistent styles to all elements. -/// -/// Example Usage: -/// ```dart -/// FlexBox( -/// direction: Axis.horizontal, -/// style: yourStyle, -/// children: [Widget1(), Widget2()], -/// ); -/// ``` -class FlexBox extends StyledWidget { - const FlexBox({ - super.style, - super.key, - super.inherit, - required this.direction, - required this.children, - super.orderOfModifiers = const [], - }); - - final List children; - final Axis direction; - - @override - Widget build(BuildContext context) { - return withMix(context, (mix) { - final boxSpec = BoxSpec.of(mix); - final flexSpec = FlexSpec.of(mix); - - return boxSpec( - orderOfModifiers: orderOfModifiers, - child: flexSpec(direction: direction, children: children), - ); - }); - } -} - -/// A horizontal flex container with `Style` for easy and consistent styling. -/// -/// `HBox` is a specialized `FlexBox` designed for horizontal layouts, simplifying -/// the process of applying horizontal alignment with advanced styling via `Style`. -/// It's an efficient way to achieve consistent styling in horizontal arrangements. -/// -/// Inherits all functionalities of `FlexBox`, optimized for horizontal layouts. -/// -/// Example Usage: -/// ```dart -/// HBox( -/// style: yourStyle, -/// children: [Widget1(), Widget2()], -/// ); -/// ``` -class HBox extends FlexBox { - const HBox({ - super.style, - super.key, - super.inherit, - super.children = const [], - }) : super(direction: Axis.horizontal); -} - -/// A vertical flex container that uses `Style` for streamlined styling. -/// -/// `VBox` is a vertical counterpart to `HBox`, utilizing `Style` for efficient -/// and consistent styling in vertical layouts. It offers an easy way to manage -/// vertical alignment and styling in a cohesive manner. -/// -/// Inherits the comprehensive styling and layout capabilities of `FlexBox`, tailored -/// for vertical orientations. -/// -/// Example Usage: -/// ```dart -/// VBox( -/// style: yourStyle, -/// children: [Widget1(), Widget2()], -/// ); -/// ``` -class VBox extends FlexBox { - const VBox({ - super.style, - super.key, - super.inherit, - super.children = const [], - }) : super(direction: Axis.vertical); -} - final _defaultFlex = Flex(direction: Axis.horizontal, children: const []); diff --git a/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart b/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart new file mode 100644 index 000000000..36c874ca8 --- /dev/null +++ b/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart @@ -0,0 +1,111 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/widgets.dart'; +import 'package:mix_annotations/mix_annotations.dart'; + +import '../../attributes/animated/animated_data.dart'; +import '../../attributes/animated/animated_data_dto.dart'; +import '../../attributes/animated/animated_util.dart'; +import '../../attributes/modifiers/widget_modifiers_data.dart'; +import '../../attributes/modifiers/widget_modifiers_data_dto.dart'; +import '../../attributes/modifiers/widget_modifiers_util.dart'; +import '../../core/attribute.dart'; +import '../../core/factory/mix_data.dart'; +import '../../core/factory/mix_provider.dart'; +import '../../core/spec.dart'; +import '../box/box_spec.dart'; +import '../flex/flex_spec.dart'; +import 'flexbox_widget.dart'; + +part 'flexbox_spec.g.dart'; + +const _boxUtility = MixableUtility( + properties: [ + (path: 'alignment', alias: 'alignment'), + (path: 'padding', alias: 'padding'), + (path: 'margin', alias: 'margin'), + (path: 'constraints', alias: 'constraints'), + (path: 'constraints.minWidth', alias: 'minWidth'), + (path: 'constraints.maxWidth', alias: 'maxWidth'), + (path: 'constraints.minHeight', alias: 'minHeight'), + (path: 'constraints.maxHeight', alias: 'maxHeight'), + (path: 'decoration.color', alias: 'color'), + (path: 'decoration.border', alias: 'border'), + (path: 'decoration.border.directional', alias: 'borderDirectional'), + (path: 'decoration.borderRadius', alias: 'borderRadius'), + ( + path: 'decoration.borderRadius.directional', + alias: 'borderRadiusDirectional', + ), + (path: 'decoration.gradient', alias: 'gradient'), + (path: 'decoration.gradient.sweep', alias: 'sweepGradient'), + (path: 'decoration.gradient.radial', alias: 'radialGradient'), + (path: 'decoration.gradient.linear', alias: 'linearGradient'), + (path: 'decoration.boxShadows', alias: 'shadows'), + (path: 'decoration.boxShadow', alias: 'shadow'), + (path: 'decoration.elevation', alias: 'elevation'), + (path: 'shape', alias: 'shape'), + (path: 'foregroundDecoration', alias: 'foregroundDecoration'), + (path: 'transform', alias: 'transform'), + (path: 'transformAlignment', alias: 'transformAlignment'), + (path: 'clipBehavior', alias: 'clipBehavior'), + (path: 'width', alias: 'width'), + (path: 'height', alias: 'height'), + ], +); + +const _flexUtility = MixableUtility( + properties: [ + (path: 'direction', alias: 'direction'), + (path: 'mainAxisAlignment', alias: 'mainAxisAlignment'), + (path: 'crossAxisAlignment', alias: 'crossAxisAlignment'), + (path: 'mainAxisSize', alias: 'mainAxisSize'), + (path: 'verticalDirection', alias: 'verticalDirection'), + (path: 'textDirection', alias: 'textDirection'), + (path: 'textBaseline', alias: 'textBaseline'), + (path: 'gap', alias: 'gap'), + ], +); + +@MixableSpec() +final class FlexBoxSpec extends Spec + with _$FlexBoxSpec, Diagnosticable { + @MixableProperty(utilities: [_boxUtility]) + final BoxSpec box; + + @MixableProperty(utilities: [_flexUtility]) + final FlexSpec flex; + + static const of = _$FlexBoxSpec.of; + static const from = _$FlexBoxSpec.from; + + const FlexBoxSpec({ + super.animated, + super.modifiers, + BoxSpec? box, + FlexSpec? flex, + }) : box = box ?? const BoxSpec(), + flex = flex ?? const FlexSpec(); + + Widget call({List children = const [], required Axis direction}) { + return (isAnimated) + ? AnimatedFlexBoxSpecWidget( + spec: this, + direction: direction, + curve: animated!.curve, + duration: animated!.duration, + onEnd: animated!.onEnd, + children: children, + ) + : FlexBoxSpecWidget( + spec: this, + direction: direction, + children: children, + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + _debugFillProperties(properties); + } +} diff --git a/packages/mix/lib/src/specs/flexbox/flexbox_spec.g.dart b/packages/mix/lib/src/specs/flexbox/flexbox_spec.g.dart new file mode 100644 index 000000000..060a48bcf --- /dev/null +++ b/packages/mix/lib/src/specs/flexbox/flexbox_spec.g.dart @@ -0,0 +1,355 @@ +// GENERATED CODE - DO NOT MODIFY BY HAND + +part of 'flexbox_spec.dart'; + +// ************************************************************************** +// MixableSpecGenerator +// ************************************************************************** + +mixin _$FlexBoxSpec on Spec { + static FlexBoxSpec from(MixData mix) { + return mix.attributeOf()?.resolve(mix) ?? + const FlexBoxSpec(); + } + + /// {@template flex_box_spec_of} + /// Retrieves the [FlexBoxSpec] from the nearest [Mix] ancestor in the widget tree. + /// + /// This method uses [Mix.of] to obtain the [Mix] instance associated with the + /// given [BuildContext], and then retrieves the [FlexBoxSpec] from that [Mix]. + /// If no ancestor [Mix] is found, this method returns an empty [FlexBoxSpec]. + /// + /// Example: + /// + /// ```dart + /// final flexBoxSpec = FlexBoxSpec.of(context); + /// ``` + /// {@endtemplate} + static FlexBoxSpec of(BuildContext context) { + return _$FlexBoxSpec.from(Mix.of(context)); + } + + /// Creates a copy of this [FlexBoxSpec] but with the given fields + /// replaced with the new values. + @override + FlexBoxSpec copyWith({ + AnimatedData? animated, + WidgetModifiersData? modifiers, + BoxSpec? box, + FlexSpec? flex, + }) { + return FlexBoxSpec( + animated: animated ?? _$this.animated, + modifiers: modifiers ?? _$this.modifiers, + box: box ?? _$this.box, + flex: flex ?? _$this.flex, + ); + } + + /// Linearly interpolates between this [FlexBoxSpec] and another [FlexBoxSpec] based on the given parameter [t]. + /// + /// The parameter [t] represents the interpolation factor, typically ranging from 0.0 to 1.0. + /// When [t] is 0.0, the current [FlexBoxSpec] is returned. When [t] is 1.0, the [other] [FlexBoxSpec] is returned. + /// For values of [t] between 0.0 and 1.0, an interpolated [FlexBoxSpec] is returned. + /// + /// If [other] is null, this method returns the current [FlexBoxSpec] instance. + /// + /// The interpolation is performed on each property of the [FlexBoxSpec] using the appropriate + /// interpolation method: + /// + + /// For [animated] and [modifiers] and [box] and [flex], the interpolation is performed using a step function. + /// If [t] is less than 0.5, the value from the current [FlexBoxSpec] is used. Otherwise, the value + /// from the [other] [FlexBoxSpec] is used. + /// + /// This method is typically used in animations to smoothly transition between + /// different [FlexBoxSpec] configurations. + @override + FlexBoxSpec lerp(FlexBoxSpec? other, double t) { + if (other == null) return _$this; + + return FlexBoxSpec( + animated: t < 0.5 ? _$this.animated : other.animated, + modifiers: other.modifiers, + box: _$this.box.lerp(other.box, t), + flex: _$this.flex.lerp(other.flex, t), + ); + } + + /// The list of properties that constitute the state of this [FlexBoxSpec]. + /// + /// This property is used by the [==] operator and the [hashCode] getter to + /// compare two [FlexBoxSpec] instances for equality. + @override + List get props => [ + _$this.animated, + _$this.modifiers, + _$this.box, + _$this.flex, + ]; + + FlexBoxSpec get _$this => this as FlexBoxSpec; + + void _debugFillProperties(DiagnosticPropertiesBuilder properties) { + properties.add( + DiagnosticsProperty('animated', _$this.animated, defaultValue: null)); + properties.add( + DiagnosticsProperty('modifiers', _$this.modifiers, defaultValue: null)); + properties.add(DiagnosticsProperty('box', _$this.box, defaultValue: null)); + properties + .add(DiagnosticsProperty('flex', _$this.flex, defaultValue: null)); + } +} + +/// Represents the attributes of a [FlexBoxSpec]. +/// +/// This class encapsulates properties defining the layout and +/// appearance of a [FlexBoxSpec]. +/// +/// Use this class to configure the attributes of a [FlexBoxSpec] and pass it to +/// the [FlexBoxSpec] constructor. +final class FlexBoxSpecAttribute extends SpecAttribute + with Diagnosticable { + final BoxSpecAttribute? box; + final FlexSpecAttribute? flex; + + const FlexBoxSpecAttribute({ + super.animated, + super.modifiers, + this.box, + this.flex, + }); + + /// Resolves to [FlexBoxSpec] using the provided [MixData]. + /// + /// If a property is null in the [MixData], it falls back to the + /// default value defined in the `defaultValue` for that property. + /// + /// ```dart + /// final flexBoxSpec = FlexBoxSpecAttribute(...).resolve(mix); + /// ``` + @override + FlexBoxSpec resolve(MixData mix) { + return FlexBoxSpec( + animated: animated?.resolve(mix) ?? mix.animation, + modifiers: modifiers?.resolve(mix), + box: box?.resolve(mix), + flex: flex?.resolve(mix), + ); + } + + /// Merges the properties of this [FlexBoxSpecAttribute] with the properties of [other]. + /// + /// If [other] is null, returns this instance unchanged. Otherwise, returns a new + /// [FlexBoxSpecAttribute] with the properties of [other] taking precedence over + /// the corresponding properties of this instance. + /// + /// Properties from [other] that are null will fall back + /// to the values from this instance. + @override + FlexBoxSpecAttribute merge(FlexBoxSpecAttribute? other) { + if (other == null) return this; + + return FlexBoxSpecAttribute( + animated: animated?.merge(other.animated) ?? other.animated, + modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, + box: box?.merge(other.box) ?? other.box, + flex: flex?.merge(other.flex) ?? other.flex, + ); + } + + /// The list of properties that constitute the state of this [FlexBoxSpecAttribute]. + /// + /// This property is used by the [==] operator and the [hashCode] getter to + /// compare two [FlexBoxSpecAttribute] instances for equality. + @override + List get props => [ + animated, + modifiers, + box, + flex, + ]; + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + .add(DiagnosticsProperty('animated', animated, defaultValue: null)); + properties + .add(DiagnosticsProperty('modifiers', modifiers, defaultValue: null)); + properties.add(DiagnosticsProperty('box', box, defaultValue: null)); + properties.add(DiagnosticsProperty('flex', flex, defaultValue: null)); + } +} + +/// Utility class for configuring [FlexBoxSpec] properties. +/// +/// This class provides methods to set individual properties of a [FlexBoxSpec]. +/// Use the methods of this class to configure specific properties of a [FlexBoxSpec]. +class FlexBoxSpecUtility + extends SpecUtility { + /// Utility for defining [FlexBoxSpecAttribute.animated] + late final animated = AnimatedUtility((v) => only(animated: v)); + + /// Utility for defining [FlexBoxSpecAttribute.modifiers] + late final wrap = SpecModifierUtility((v) => only(modifiers: v)); + + /// Utility for defining [FlexBoxSpecAttribute.box] + late final box = BoxSpecUtility((v) => only(box: v)); + + /// Utility for defining [FlexBoxSpecAttribute.box.alignment] + late final alignment = box.alignment; + + /// Utility for defining [FlexBoxSpecAttribute.box.padding] + late final padding = box.padding; + + /// Utility for defining [FlexBoxSpecAttribute.box.margin] + late final margin = box.margin; + + /// Utility for defining [FlexBoxSpecAttribute.box.constraints] + late final constraints = box.constraints; + + /// Utility for defining [FlexBoxSpecAttribute.box.constraints.minWidth] + late final minWidth = box.constraints.minWidth; + + /// Utility for defining [FlexBoxSpecAttribute.box.constraints.maxWidth] + late final maxWidth = box.constraints.maxWidth; + + /// Utility for defining [FlexBoxSpecAttribute.box.constraints.minHeight] + late final minHeight = box.constraints.minHeight; + + /// Utility for defining [FlexBoxSpecAttribute.box.constraints.maxHeight] + late final maxHeight = box.constraints.maxHeight; + + /// Utility for defining [FlexBoxSpecAttribute.box.decoration.color] + late final color = box.decoration.color; + + /// Utility for defining [FlexBoxSpecAttribute.box.decoration.border] + late final border = box.decoration.border; + + /// Utility for defining [FlexBoxSpecAttribute.box.decoration.border.directional] + late final borderDirectional = box.decoration.border.directional; + + /// Utility for defining [FlexBoxSpecAttribute.box.decoration.borderRadius] + late final borderRadius = box.decoration.borderRadius; + + /// Utility for defining [FlexBoxSpecAttribute.box.decoration.borderRadius.directional] + late final borderRadiusDirectional = box.decoration.borderRadius.directional; + + /// Utility for defining [FlexBoxSpecAttribute.box.decoration.gradient] + late final gradient = box.decoration.gradient; + + /// Utility for defining [FlexBoxSpecAttribute.box.decoration.gradient.sweep] + late final sweepGradient = box.decoration.gradient.sweep; + + /// Utility for defining [FlexBoxSpecAttribute.box.decoration.gradient.radial] + late final radialGradient = box.decoration.gradient.radial; + + /// Utility for defining [FlexBoxSpecAttribute.box.decoration.gradient.linear] + late final linearGradient = box.decoration.gradient.linear; + + /// Utility for defining [FlexBoxSpecAttribute.box.decoration.boxShadows] + late final shadows = box.decoration.boxShadows; + + /// Utility for defining [FlexBoxSpecAttribute.box.decoration.boxShadow] + late final shadow = box.decoration.boxShadow; + + /// Utility for defining [FlexBoxSpecAttribute.box.decoration.elevation] + late final elevation = box.decoration.elevation; + + /// Utility for defining [FlexBoxSpecAttribute.box.shape] + late final shape = box.shape; + + /// Utility for defining [FlexBoxSpecAttribute.box.foregroundDecoration] + late final foregroundDecoration = box.foregroundDecoration; + + /// Utility for defining [FlexBoxSpecAttribute.box.transform] + late final transform = box.transform; + + /// Utility for defining [FlexBoxSpecAttribute.box.transformAlignment] + late final transformAlignment = box.transformAlignment; + + /// Utility for defining [FlexBoxSpecAttribute.box.clipBehavior] + late final clipBehavior = box.clipBehavior; + + /// Utility for defining [FlexBoxSpecAttribute.box.width] + late final width = box.width; + + /// Utility for defining [FlexBoxSpecAttribute.box.height] + late final height = box.height; + + /// Utility for defining [FlexBoxSpecAttribute.flex] + late final flex = FlexSpecUtility((v) => only(flex: v)); + + /// Utility for defining [FlexBoxSpecAttribute.flex.direction] + late final direction = flex.direction; + + /// Utility for defining [FlexBoxSpecAttribute.flex.mainAxisAlignment] + late final mainAxisAlignment = flex.mainAxisAlignment; + + /// Utility for defining [FlexBoxSpecAttribute.flex.crossAxisAlignment] + late final crossAxisAlignment = flex.crossAxisAlignment; + + /// Utility for defining [FlexBoxSpecAttribute.flex.mainAxisSize] + late final mainAxisSize = flex.mainAxisSize; + + /// Utility for defining [FlexBoxSpecAttribute.flex.verticalDirection] + late final verticalDirection = flex.verticalDirection; + + /// Utility for defining [FlexBoxSpecAttribute.flex.textDirection] + late final textDirection = flex.textDirection; + + /// Utility for defining [FlexBoxSpecAttribute.flex.textBaseline] + late final textBaseline = flex.textBaseline; + + /// Utility for defining [FlexBoxSpecAttribute.flex.gap] + late final gap = flex.gap; + + FlexBoxSpecUtility(super.builder, {super.mutable}); + + FlexBoxSpecUtility get chain => + FlexBoxSpecUtility(attributeBuilder, mutable: true); + + static FlexBoxSpecUtility get self => + FlexBoxSpecUtility((v) => v); + + /// Returns a new [FlexBoxSpecAttribute] with the specified properties. + @override + T only({ + AnimatedDataDto? animated, + WidgetModifiersDataDto? modifiers, + BoxSpecAttribute? box, + FlexSpecAttribute? flex, + }) { + return builder(FlexBoxSpecAttribute( + animated: animated, + modifiers: modifiers, + box: box, + flex: flex, + )); + } +} + +/// A tween that interpolates between two [FlexBoxSpec] instances. +/// +/// This class can be used in animations to smoothly transition between +/// different [FlexBoxSpec] specifications. +class FlexBoxSpecTween extends Tween { + FlexBoxSpecTween({ + super.begin, + super.end, + }); + + @override + FlexBoxSpec lerp(double t) { + if (begin == null && end == null) { + return const FlexBoxSpec(); + } + + if (begin == null) { + return end!; + } + + return begin!.lerp(end!, t); + } +} diff --git a/packages/mix/lib/src/specs/flexbox/flexbox_widget.dart b/packages/mix/lib/src/specs/flexbox/flexbox_widget.dart new file mode 100644 index 000000000..22b6fb3e9 --- /dev/null +++ b/packages/mix/lib/src/specs/flexbox/flexbox_widget.dart @@ -0,0 +1,196 @@ +// ignore_for_file: prefer_const_constructors + +import 'package:flutter/widgets.dart'; + +import '../../core/factory/mix_provider.dart'; +import '../../core/styled_widget.dart'; +import '../../modifiers/internal/render_widget_modifier.dart'; +import '../box/box_spec.dart'; +import '../flex/flex_spec.dart'; +import 'flexbox_spec.dart'; + +/// A flex container widget with integrated `Style` for enhanced styling. +/// +/// `FlexBox` combines the features of `StyledContainer` and `StyledFlex`, offering +/// a powerful tool for creating flexible layouts with advanced styling capabilities +/// through `Style`. It's perfect for designing complex layouts that require both +/// container and flex properties with uniform styling. +/// +/// The `direction` parameter sets the layout's orientation, while the `Style` +/// integration simplifies the process of applying consistent styles to all elements. +/// +/// Example Usage: +/// ```dart +/// FlexBox( +/// direction: Axis.horizontal, +/// style: yourStyle, +/// children: [Widget1(), Widget2()], +/// ); +/// ``` +class FlexBox extends StyledWidget { + const FlexBox({ + super.style, + super.key, + super.inherit, + required this.direction, + required this.children, + super.orderOfModifiers = const [], + }); + + final List children; + final Axis direction; + + @override + Widget build(BuildContext context) { + // TODO: the support for FlexBoxSpec using BoxSpec and FlexSpec is a temporary + // solution to not break the existing API. it should be implemented using only + // FlexBoxSpec in the next major version. + return withMix(context, (context) { + final mixData = Mix.of(context); + + final spec = + mixData.attributeOf()?.resolve(mixData); + + final boxSpec = spec?.box ?? BoxSpec.of(context); + final flexSpec = spec?.flex ?? FlexSpec.of(context); + + final newSpec = FlexBoxSpec( + animated: spec?.animated, + modifiers: spec?.modifiers, + box: boxSpec, + flex: flexSpec, + ); + + return newSpec(direction: direction, children: children); + }); + } +} + +class FlexBoxSpecWidget extends StatelessWidget { + const FlexBoxSpecWidget({ + super.key, + this.spec, + required this.children, + required this.direction, + this.orderOfModifiers = const [], + }); + + final List children; + final Axis direction; + final FlexBoxSpec? spec; + final List orderOfModifiers; + + @override + Widget build(BuildContext context) { + final spec = this.spec ?? const FlexBoxSpec(); + + // TODO: Convert to a BoxSpecWidget and a FlexSpecWidget in the next major version. + // it should be implemented following the same pattern as the others SpecWidgets. + // This code must be like this to keep the existing animation API working. + return RenderSpecModifiers( + orderOfModifiers: orderOfModifiers, + spec: spec, + child: spec.box( + orderOfModifiers: orderOfModifiers, + child: spec.flex(direction: direction, children: children), + ), + ); + } +} + +class AnimatedFlexBoxSpecWidget extends ImplicitlyAnimatedWidget { + const AnimatedFlexBoxSpecWidget({ + super.key, + required this.spec, + required this.children, + required this.direction, + this.orderOfModifiers = const [], + super.curve, + required super.duration, + super.onEnd, + }); + + final FlexBoxSpec spec; + final List children; + final Axis direction; + final List orderOfModifiers; + + @override + AnimatedFlexBoxSpecWidgetState createState() => + AnimatedFlexBoxSpecWidgetState(); +} + +class AnimatedFlexBoxSpecWidgetState + extends AnimatedWidgetBaseState { + FlexBoxSpecTween? _specTween; + + @override + // ignore: avoid-dynamic + void forEachTween(TweenVisitor visitor) { + _specTween = visitor( + _specTween, + widget.spec, + // ignore: avoid-dynamic + (dynamic value) => FlexBoxSpecTween(begin: value as FlexBoxSpec), + ) as FlexBoxSpecTween?; + } + + @override + Widget build(BuildContext context) { + return FlexBoxSpecWidget( + spec: _specTween?.evaluate(animation), + direction: widget.direction, + orderOfModifiers: widget.orderOfModifiers, + children: widget.children, + ); + } +} + +/// A horizontal flex container with `Style` for easy and consistent styling. +/// +/// `HBox` is a specialized `FlexBox` designed for horizontal layouts, simplifying +/// the process of applying horizontal alignment with advanced styling via `Style`. +/// It's an efficient way to achieve consistent styling in horizontal arrangements. +/// +/// Inherits all functionalities of `FlexBox`, optimized for horizontal layouts. +/// +/// Example Usage: +/// ```dart +/// HBox( +/// style: yourStyle, +/// children: [Widget1(), Widget2()], +/// ); +/// ``` +class HBox extends FlexBox { + const HBox({ + super.style, + super.key, + super.inherit, + super.children = const [], + }) : super(direction: Axis.horizontal); +} + +/// A vertical flex container that uses `Style` for streamlined styling. +/// +/// `VBox` is a vertical counterpart to `HBox`, utilizing `Style` for efficient +/// and consistent styling in vertical layouts. It offers an easy way to manage +/// vertical alignment and styling in a cohesive manner. +/// +/// Inherits the comprehensive styling and layout capabilities of `FlexBox`, tailored +/// for vertical orientations. +/// +/// Example Usage: +/// ```dart +/// VBox( +/// style: yourStyle, +/// children: [Widget1(), Widget2()], +/// ); +/// ``` +class VBox extends FlexBox { + const VBox({ + super.style, + super.key, + super.inherit, + super.children = const [], + }) : super(direction: Axis.vertical); +} diff --git a/packages/mix/lib/src/specs/spec_util.dart b/packages/mix/lib/src/specs/spec_util.dart index 600ba0d82..2f5938790 100644 --- a/packages/mix/lib/src/specs/spec_util.dart +++ b/packages/mix/lib/src/specs/spec_util.dart @@ -3,6 +3,7 @@ import '../modifiers/widget_modifiers_util.dart'; import '../variants/context_variant_util/on_util.dart'; import 'box/box_spec.dart'; import 'flex/flex_spec.dart'; +import 'flexbox/flexbox_spec.dart'; import 'icon/icon_spec.dart'; import 'image/image_spec.dart'; import 'stack/stack_spec.dart'; @@ -11,6 +12,7 @@ import 'text/text_spec.dart'; const _mixUtility = MixUtilities(); BoxSpecUtility get $box => _mixUtility.box; +FlexBoxSpecUtility get $flexbox => _mixUtility.flexbox; FlexSpecUtility get $flex => _mixUtility.flex; ImageSpecUtility get $image => _mixUtility.image; IconSpecUtility get $icon => _mixUtility.icon; @@ -23,6 +25,8 @@ class MixUtilities { const MixUtilities(); BoxSpecUtility get box => BoxSpecUtility.self; FlexSpecUtility get flex => FlexSpecUtility.self; + FlexBoxSpecUtility get flexbox => + FlexBoxSpecUtility.self; ImageSpecUtility get image => ImageSpecUtility.self; IconSpecUtility get icon => IconSpecUtility.self; TextSpecUtility get text => TextSpecUtility.self; diff --git a/packages/mix/test/src/specs/flex/flex_widget_test.dart b/packages/mix/test/src/specs/flex/flex_widget_test.dart index 7d136f94b..a6e962e1b 100644 --- a/packages/mix/test/src/specs/flex/flex_widget_test.dart +++ b/packages/mix/test/src/specs/flex/flex_widget_test.dart @@ -6,6 +6,53 @@ import '../../../helpers/override_modifiers_order.dart'; import '../../../helpers/testing_utils.dart'; void main() { + testWidgets('FlexSpec properties should match Flex properties', + (WidgetTester tester) async { + const flexSpec = FlexSpec( + direction: Axis.horizontal, + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisSize: MainAxisSize.max, + verticalDirection: VerticalDirection.down, + textDirection: TextDirection.ltr, + textBaseline: TextBaseline.alphabetic, + clipBehavior: Clip.antiAlias, + gap: 16, + ); + + const flexKey = Key('flex'); + const flexWidget = FlexSpecWidget( + key: flexKey, + spec: flexSpec, + direction: Axis.horizontal, + children: [Text('test')], + ); + + await tester.pumpWidget( + const MaterialApp( + home: Scaffold( + body: flexWidget, + ), + ), + ); + + final flexFinder = find.byKey(flexKey); + expect(flexFinder, findsOneWidget); + + final flex = tester.widget(find.descendant( + of: flexFinder, + matching: find.byType(Flex), + )); + + expect(flex.direction, flexSpec.direction); + expect(flex.mainAxisAlignment, flexSpec.mainAxisAlignment); + expect(flex.crossAxisAlignment, flexSpec.crossAxisAlignment); + expect(flex.mainAxisSize, flexSpec.mainAxisSize); + expect(flex.verticalDirection, flexSpec.verticalDirection); + expect(flex.textDirection, flexSpec.textDirection); + expect(flex.textBaseline, flexSpec.textBaseline); + }); + group('FlexSpecWidget', () { testWidgets('prioritizes the direction in spec', (tester) async { await tester.pumpMaterialApp( diff --git a/packages/mix/test/src/specs/flexbox/flexbox_attribute_test.dart b/packages/mix/test/src/specs/flexbox/flexbox_attribute_test.dart new file mode 100644 index 000000000..49ec6e5db --- /dev/null +++ b/packages/mix/test/src/specs/flexbox/flexbox_attribute_test.dart @@ -0,0 +1,407 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:mix/mix.dart'; + +import '../../../helpers/testing_utils.dart'; + +void main() { + group('FlexBoxSpecAttribute', () { + test('Constructor assigns correct properties', () { + final flexBoxSpecAttribute = FlexBoxSpecAttribute( + box: BoxSpecAttribute( + alignment: Alignment.center, + padding: SpacingDto.only(top: 20, bottom: 20, left: 20, right: 20), + margin: SpacingDto.only( + top: 10, + bottom: 10, + left: 10, + right: 10, + ), + constraints: const BoxConstraintsDto(maxHeight: 100), + decoration: const BoxDecorationDto(color: ColorDto(Colors.blue)), + transform: Matrix4.identity(), + clipBehavior: Clip.antiAlias, + width: 100, + height: 100, + modifiers: const WidgetModifiersDataDto([ + OpacityModifierSpecAttribute(opacity: 0.5), + SizedBoxModifierSpecAttribute(height: 10, width: 10), + ]), + ), + flex: const FlexSpecAttribute( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisSize: MainAxisSize.max, + verticalDirection: VerticalDirection.down, + textDirection: TextDirection.ltr, + textBaseline: TextBaseline.alphabetic, + ), + ); + + expect(flexBoxSpecAttribute.box!.alignment, Alignment.center); + expect(flexBoxSpecAttribute.box!.clipBehavior, Clip.antiAlias); + + expect( + flexBoxSpecAttribute.box!.constraints, + const BoxConstraintsDto(maxHeight: 100), + ); + expect( + flexBoxSpecAttribute.box!.decoration, + const BoxDecorationDto(color: ColorDto(Colors.blue)), + ); + + expect(flexBoxSpecAttribute.box!.height, 100); + expect( + flexBoxSpecAttribute.box!.margin, + SpacingDto.only(top: 10, bottom: 10, left: 10, right: 10), + ); + expect( + flexBoxSpecAttribute.box!.padding, + SpacingDto.only(top: 20, bottom: 20, left: 20, right: 20), + ); + expect(flexBoxSpecAttribute.box!.transform, Matrix4.identity()); + expect(flexBoxSpecAttribute.box!.width, 100); + expect( + flexBoxSpecAttribute.box!.modifiers, + const WidgetModifiersDataDto([ + OpacityModifierSpecAttribute(opacity: 0.5), + SizedBoxModifierSpecAttribute(height: 10, width: 10), + ])); + + expect(flexBoxSpecAttribute.flex!.mainAxisAlignment, + MainAxisAlignment.center); + expect(flexBoxSpecAttribute.flex!.crossAxisAlignment, + CrossAxisAlignment.center); + expect(flexBoxSpecAttribute.flex!.mainAxisSize, MainAxisSize.max); + expect( + flexBoxSpecAttribute.flex!.verticalDirection, VerticalDirection.down); + expect(flexBoxSpecAttribute.flex!.textDirection, TextDirection.ltr); + expect(flexBoxSpecAttribute.flex!.textBaseline, TextBaseline.alphabetic); + }); + + // resolve() + test('resolve() returns correct instance', () { + final flexBoxSpecAttribute = FlexBoxSpecAttribute( + box: BoxSpecAttribute( + alignment: Alignment.center, + padding: SpacingDto.only(top: 20, bottom: 20, left: 20, right: 20), + margin: SpacingDto.only( + top: 10, + bottom: 10, + left: 10, + right: 10, + ), + constraints: const BoxConstraintsDto(maxHeight: 100), + decoration: const BoxDecorationDto(color: ColorDto(Colors.blue)), + transform: Matrix4.identity(), + clipBehavior: Clip.antiAlias, + width: 100, + height: 100, + modifiers: const WidgetModifiersDataDto([ + OpacityModifierSpecAttribute(opacity: 0.5), + SizedBoxModifierSpecAttribute(height: 10, width: 10), + ]), + ), + flex: const FlexSpecAttribute( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisSize: MainAxisSize.max, + verticalDirection: VerticalDirection.down, + textDirection: TextDirection.ltr, + textBaseline: TextBaseline.alphabetic, + ), + ); + + final flexBoxSpec = flexBoxSpecAttribute.resolve(EmptyMixData); + + expect(flexBoxSpec.box.alignment, Alignment.center); + expect(flexBoxSpec.box.clipBehavior, Clip.antiAlias); + + expect( + flexBoxSpec.box.constraints, + const BoxConstraints(maxWidth: double.infinity, maxHeight: 100), + ); + expect( + flexBoxSpec.box.decoration, const BoxDecoration(color: Colors.blue)); + + expect(flexBoxSpec.box.height, 100); + expect( + flexBoxSpec.box.margin, + const EdgeInsets.only(left: 10, top: 10, right: 10, bottom: 10), + ); + expect( + flexBoxSpec.box.padding, + const EdgeInsets.only(left: 20, top: 20, right: 20, bottom: 20), + ); + expect(flexBoxSpec.box.transform, Matrix4.identity()); + expect(flexBoxSpec.box.width, 100); + expect(flexBoxSpec.box.modifiers!.value, [ + const OpacityModifierSpec(0.5), + const SizedBoxModifierSpec(height: 10, width: 10), + ]); + + expect(flexBoxSpec.flex.mainAxisAlignment, MainAxisAlignment.center); + expect(flexBoxSpec.flex.crossAxisAlignment, CrossAxisAlignment.center); + expect(flexBoxSpec.flex.mainAxisSize, MainAxisSize.max); + expect(flexBoxSpec.flex.verticalDirection, VerticalDirection.down); + expect(flexBoxSpec.flex.textDirection, TextDirection.ltr); + expect(flexBoxSpec.flex.textBaseline, TextBaseline.alphabetic); + }); + + // merge() + test('merge() returns correct instance', () { + final flexBoxSpecAttribute = FlexBoxSpecAttribute( + box: BoxSpecAttribute( + alignment: Alignment.center, + padding: SpacingDto.only(top: 20, bottom: 20, left: 20, right: 20), + margin: SpacingDto.only( + top: 10, + bottom: 10, + left: 10, + right: 10, + ), + constraints: const BoxConstraintsDto(maxHeight: 100), + decoration: const BoxDecorationDto(color: ColorDto(Colors.blue)), + transform: Matrix4.identity(), + clipBehavior: Clip.antiAlias, + width: 100, + height: 100, + modifiers: const WidgetModifiersDataDto([ + OpacityModifierSpecAttribute(opacity: 0.5), + SizedBoxModifierSpecAttribute(height: 10, width: 10), + ]), + ), + flex: const FlexSpecAttribute( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisSize: MainAxisSize.max, + verticalDirection: VerticalDirection.down, + textDirection: TextDirection.ltr, + textBaseline: TextBaseline.alphabetic, + ), + ); + + final mergedFlexBoxSpecAttribute = flexBoxSpecAttribute.merge( + FlexBoxSpecAttribute( + box: BoxSpecAttribute( + alignment: Alignment.centerLeft, + padding: SpacingDto.only(top: 30, bottom: 30, left: 30, right: 30), + margin: SpacingDto.only( + top: 20, + bottom: 20, + left: 20, + right: 20, + ), + constraints: const BoxConstraintsDto(maxHeight: 200), + decoration: const BoxDecorationDto(color: ColorDto(Colors.red)), + transform: Matrix4.identity(), + clipBehavior: Clip.antiAliasWithSaveLayer, + width: 200, + height: 200, + modifiers: const WidgetModifiersDataDto([ + SizedBoxModifierSpecAttribute(width: 20), + ]), + ), + flex: const FlexSpecAttribute( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + verticalDirection: VerticalDirection.up, + textDirection: TextDirection.rtl, + textBaseline: TextBaseline.ideographic, + ), + ), + ); + + expect(mergedFlexBoxSpecAttribute.box!.alignment, Alignment.centerLeft); + expect(mergedFlexBoxSpecAttribute.box!.clipBehavior, + Clip.antiAliasWithSaveLayer); + + expect( + mergedFlexBoxSpecAttribute.box!.constraints, + const BoxConstraintsDto(maxHeight: 200), + ); + expect( + mergedFlexBoxSpecAttribute.box!.decoration, + const BoxDecorationDto(color: ColorDto(Colors.red)), + ); + + expect(mergedFlexBoxSpecAttribute.box!.height, 200); + expect( + mergedFlexBoxSpecAttribute.box!.margin, + SpacingDto.only(top: 20, bottom: 20, left: 20, right: 20), + ); + expect( + mergedFlexBoxSpecAttribute.box!.padding, + SpacingDto.only(top: 30, bottom: 30, left: 30, right: 30), + ); + expect(mergedFlexBoxSpecAttribute.box!.transform, Matrix4.identity()); + expect(mergedFlexBoxSpecAttribute.box!.width, 200); + expect( + mergedFlexBoxSpecAttribute.box!.modifiers, + const WidgetModifiersDataDto([ + OpacityModifierSpecAttribute(opacity: 0.5), + SizedBoxModifierSpecAttribute(height: 10, width: 20), + ])); + + expect(mergedFlexBoxSpecAttribute.flex!.mainAxisAlignment, + MainAxisAlignment.start); + expect(mergedFlexBoxSpecAttribute.flex!.crossAxisAlignment, + CrossAxisAlignment.start); + expect(mergedFlexBoxSpecAttribute.flex!.mainAxisSize, MainAxisSize.min); + expect(mergedFlexBoxSpecAttribute.flex!.verticalDirection, + VerticalDirection.up); + expect(mergedFlexBoxSpecAttribute.flex!.textDirection, TextDirection.rtl); + expect(mergedFlexBoxSpecAttribute.flex!.textBaseline, + TextBaseline.ideographic); + }); + + // equality + test('equality', () { + final flexBoxSpecAttribute = FlexBoxSpecAttribute( + box: BoxSpecAttribute( + alignment: Alignment.center, + padding: SpacingDto.only(top: 20, bottom: 20, left: 20, right: 20), + margin: SpacingDto.only( + top: 10, + bottom: 10, + left: 10, + right: 10, + ), + constraints: const BoxConstraintsDto(maxHeight: 100), + decoration: const BoxDecorationDto(color: ColorDto(Colors.blue)), + transform: Matrix4.identity(), + clipBehavior: Clip.antiAlias, + width: 100, + height: 100, + modifiers: const WidgetModifiersDataDto([ + OpacityModifierSpecAttribute(opacity: 0.5), + SizedBoxModifierSpecAttribute(height: 10, width: 10), + ]), + ), + flex: const FlexSpecAttribute( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisSize: MainAxisSize.max, + verticalDirection: VerticalDirection.down, + textDirection: TextDirection.ltr, + textBaseline: TextBaseline.alphabetic, + ), + ); + + expect( + flexBoxSpecAttribute, + equals( + FlexBoxSpecAttribute( + box: BoxSpecAttribute( + alignment: Alignment.center, + padding: + SpacingDto.only(top: 20, bottom: 20, left: 20, right: 20), + margin: SpacingDto.only( + top: 10, + bottom: 10, + left: 10, + right: 10, + ), + constraints: const BoxConstraintsDto(maxHeight: 100), + decoration: const BoxDecorationDto(color: ColorDto(Colors.blue)), + transform: Matrix4.identity(), + clipBehavior: Clip.antiAlias, + width: 100, + height: 100, + modifiers: const WidgetModifiersDataDto( + [ + OpacityModifierSpecAttribute(opacity: 0.5), + SizedBoxModifierSpecAttribute(height: 10, width: 10), + ], + ), + ), + flex: const FlexSpecAttribute( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisSize: MainAxisSize.max, + verticalDirection: VerticalDirection.down, + textDirection: TextDirection.ltr, + textBaseline: TextBaseline.alphabetic, + ), + ), + ), + ); + }); + + // not equals + test('not equals', () { + final flexBoxSpecAttribute = FlexBoxSpecAttribute( + box: BoxSpecAttribute( + alignment: Alignment.center, + padding: SpacingDto.only(top: 20, bottom: 20, left: 20, right: 20), + margin: SpacingDto.only( + top: 10, + bottom: 10, + left: 10, + right: 10, + ), + constraints: const BoxConstraintsDto(maxHeight: 100), + decoration: const BoxDecorationDto(color: ColorDto(Colors.blue)), + transform: Matrix4.identity(), + clipBehavior: Clip.antiAlias, + width: 100, + height: 100, + ), + flex: const FlexSpecAttribute( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisSize: MainAxisSize.max, + verticalDirection: VerticalDirection.down, + textDirection: TextDirection.ltr, + textBaseline: TextBaseline.alphabetic, + ), + ); + + expect( + flexBoxSpecAttribute, + isNot( + equals( + FlexBoxSpecAttribute( + box: BoxSpecAttribute( + alignment: Alignment.centerLeft, + padding: SpacingDto.only( + top: 30, + bottom: 30, + left: 30, + right: 30, + ), + margin: SpacingDto.only( + top: 20, + bottom: 20, + left: 20, + right: 20, + ), + constraints: const BoxConstraintsDto(maxHeight: 200), + decoration: const BoxDecorationDto(color: ColorDto(Colors.red)), + transform: Matrix4.identity(), + clipBehavior: Clip.antiAliasWithSaveLayer, + width: 200, + height: 200, + modifiers: const WidgetModifiersDataDto( + [ + OpacityModifierSpecAttribute(opacity: 0.4), + SizedBoxModifierSpecAttribute(height: 20, width: 10), + ], + ), + ), + flex: const FlexSpecAttribute( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + verticalDirection: VerticalDirection.up, + textDirection: TextDirection.rtl, + textBaseline: TextBaseline.ideographic, + ), + ), + ), + ), + ); + }); + }); +} diff --git a/packages/mix/test/src/specs/flexbox/flexbox_spec_test.dart b/packages/mix/test/src/specs/flexbox/flexbox_spec_test.dart new file mode 100644 index 000000000..6ce9d9449 --- /dev/null +++ b/packages/mix/test/src/specs/flexbox/flexbox_spec_test.dart @@ -0,0 +1,424 @@ +import 'dart:ui'; + +import 'package:flutter/material.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:mix/mix.dart'; + +import '../../../helpers/testing_utils.dart'; + +void main() { + group('FlexBoxSpec', () { + test('resolve', () { + final mix = MixData.create( + MockBuildContext(), + Style( + FlexBoxSpecAttribute( + box: BoxSpecAttribute( + alignment: Alignment.center, + padding: SpacingDto.only(top: 8, bottom: 16), + margin: SpacingDto.only(top: 10.0, bottom: 12.0), + constraints: + const BoxConstraintsDto(maxWidth: 300.0, minHeight: 200.0), + decoration: const BoxDecorationDto(color: ColorDto(Colors.blue)), + transform: Matrix4.translationValues(10.0, 10.0, 0.0), + clipBehavior: Clip.antiAlias, + width: 300, + height: 200, + ), + flex: const FlexSpecAttribute( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisSize: MainAxisSize.max, + verticalDirection: VerticalDirection.down, + textDirection: TextDirection.ltr, + textBaseline: TextBaseline.alphabetic, + ), + ), + ), + ); + + final spec = mix.attributeOf()!.resolve(mix); + + expect(spec.box.alignment, Alignment.center); + expect(spec.box.padding, const EdgeInsets.only(top: 8.0, bottom: 16.0)); + expect(spec.box.margin, const EdgeInsets.only(top: 10.0, bottom: 12.0)); + expect( + spec.box.constraints, + const BoxConstraints(maxWidth: 300.0, minHeight: 200.0), + ); + expect(spec.box.decoration, const BoxDecoration(color: Colors.blue)); + expect(spec.box.transform, Matrix4.translationValues(10.0, 10.0, 0.0)); + expect(spec.box.clipBehavior, Clip.antiAlias); + expect(spec.box.width, 300); + expect(spec.box.height, 200); + + expect(spec.flex.mainAxisAlignment, MainAxisAlignment.center); + expect(spec.flex.crossAxisAlignment, CrossAxisAlignment.center); + expect(spec.flex.mainAxisSize, MainAxisSize.max); + expect(spec.flex.verticalDirection, VerticalDirection.down); + expect(spec.flex.textDirection, TextDirection.ltr); + expect(spec.flex.textBaseline, TextBaseline.alphabetic); + }); + + test('copyWith', () { + final spec = FlexBoxSpec( + box: BoxSpec( + alignment: Alignment.center, + padding: const EdgeInsets.all(16.0), + margin: const EdgeInsets.only(top: 8.0, bottom: 8.0), + constraints: const BoxConstraints(maxWidth: 300.0, minHeight: 200.0), + decoration: const BoxDecoration(color: Colors.blue), + transform: Matrix4.translationValues(10.0, 10.0, 0.0), + clipBehavior: Clip.antiAlias, + width: 300, + height: 200, + ), + flex: const FlexSpec( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisSize: MainAxisSize.max, + verticalDirection: VerticalDirection.down, + textDirection: TextDirection.ltr, + textBaseline: TextBaseline.alphabetic, + ), + ); + + final copiedSpec = spec.copyWith( + box: spec.box.copyWith( + width: 250.0, + height: 150.0, + ), + flex: spec.flex.copyWith( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + ), + ); + + expect(copiedSpec.box.alignment, Alignment.center); + expect(copiedSpec.box.padding, const EdgeInsets.all(16.0)); + expect( + copiedSpec.box.margin, const EdgeInsets.only(top: 8.0, bottom: 8.0)); + expect(copiedSpec.box.width, 250.0); + expect(copiedSpec.box.height, 150.0); + + expect(copiedSpec.flex.mainAxisAlignment, MainAxisAlignment.start); + expect(copiedSpec.flex.crossAxisAlignment, CrossAxisAlignment.start); + expect(copiedSpec.flex.mainAxisSize, MainAxisSize.max); + expect(copiedSpec.flex.verticalDirection, VerticalDirection.down); + expect(copiedSpec.flex.textDirection, TextDirection.ltr); + expect(copiedSpec.flex.textBaseline, TextBaseline.alphabetic); + }); + + test('lerp', () { + final spec1 = FlexBoxSpec( + box: BoxSpec( + alignment: Alignment.topLeft, + padding: const EdgeInsets.all(8.0), + margin: const EdgeInsets.only(top: 4.0), + constraints: const BoxConstraints(maxWidth: 200.0), + decoration: const BoxDecoration(color: Colors.red), + transform: Matrix4.identity(), + clipBehavior: Clip.none, + width: 300, + height: 200, + ), + flex: const FlexSpec( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + ), + ); + + final spec2 = FlexBoxSpec( + box: BoxSpec( + alignment: Alignment.bottomRight, + padding: const EdgeInsets.all(16.0), + margin: const EdgeInsets.only(top: 8.0), + constraints: const BoxConstraints(maxWidth: 400.0), + decoration: const BoxDecoration(color: Colors.blue), + transform: Matrix4.rotationZ(0.5), + clipBehavior: Clip.antiAlias, + width: 400, + height: 300, + ), + flex: const FlexSpec( + mainAxisAlignment: MainAxisAlignment.end, + crossAxisAlignment: CrossAxisAlignment.end, + mainAxisSize: MainAxisSize.max, + ), + ); + + const t = 0.5; + final lerpedSpec = spec1.lerp(spec2, t); + + expect( + lerpedSpec.box.alignment, + Alignment.lerp(Alignment.topLeft, Alignment.bottomRight, t), + ); + expect( + lerpedSpec.box.padding, + EdgeInsets.lerp( + const EdgeInsets.all(8.0), + const EdgeInsets.all(16.0), + t, + ), + ); + expect(lerpedSpec.box.width, lerpDouble(300, 400, t)); + expect(lerpedSpec.box.height, lerpDouble(200, 300, t)); + + expect(lerpedSpec.flex.mainAxisAlignment, MainAxisAlignment.end); + expect(lerpedSpec.flex.crossAxisAlignment, CrossAxisAlignment.end); + expect(lerpedSpec.flex.mainAxisSize, MainAxisSize.max); + }); + + test('equality', () { + final spec1 = FlexBoxSpec( + box: BoxSpec( + alignment: Alignment.topLeft, + padding: const EdgeInsets.all(8.0), + margin: const EdgeInsets.only(top: 4.0), + constraints: const BoxConstraints(maxWidth: 200.0), + decoration: const BoxDecoration(color: Colors.red), + transform: Matrix4.identity(), + clipBehavior: Clip.none, + width: 300, + height: 200, + ), + flex: const FlexSpec( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + ), + ); + + final spec2 = FlexBoxSpec( + box: BoxSpec( + alignment: Alignment.topLeft, + padding: const EdgeInsets.all(8.0), + margin: const EdgeInsets.only(top: 4.0), + constraints: const BoxConstraints(maxWidth: 200.0), + decoration: const BoxDecoration(color: Colors.red), + transform: Matrix4.identity(), + clipBehavior: Clip.none, + width: 300, + height: 200, + ), + flex: const FlexSpec( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + ), + ); + + expect(spec1, spec2); + }); + + test('merge() returns correct instance', () { + final flexBoxSpecAttribute = FlexBoxSpecAttribute( + box: BoxSpecAttribute( + alignment: Alignment.center, + padding: SpacingDto.only(top: 20, bottom: 20, left: 20, right: 20), + margin: SpacingDto.only( + top: 10, + bottom: 10, + left: 10, + right: 10, + ), + constraints: const BoxConstraintsDto(maxHeight: 100), + decoration: const BoxDecorationDto(color: ColorDto(Colors.blue)), + transform: Matrix4.identity(), + clipBehavior: Clip.antiAlias, + width: 100, + height: 100, + ), + flex: const FlexSpecAttribute( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisSize: MainAxisSize.max, + verticalDirection: VerticalDirection.down, + textDirection: TextDirection.ltr, + textBaseline: TextBaseline.alphabetic, + ), + ); + + final mergedFlexBoxSpecAttribute = flexBoxSpecAttribute.merge( + FlexBoxSpecAttribute( + box: BoxSpecAttribute( + alignment: Alignment.centerLeft, + padding: SpacingDto.only(top: 30, bottom: 30, left: 30, right: 30), + margin: SpacingDto.only( + top: 20, + bottom: 20, + left: 20, + right: 20, + ), + constraints: const BoxConstraintsDto(maxHeight: 200), + decoration: const BoxDecorationDto(color: ColorDto(Colors.red)), + transform: Matrix4.identity(), + clipBehavior: Clip.antiAliasWithSaveLayer, + width: 200, + height: 200, + ), + flex: const FlexSpecAttribute( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + verticalDirection: VerticalDirection.up, + textDirection: TextDirection.rtl, + textBaseline: TextBaseline.ideographic, + ), + ), + ); + + expect(mergedFlexBoxSpecAttribute.box!.alignment, Alignment.centerLeft); + expect(mergedFlexBoxSpecAttribute.box!.clipBehavior, + Clip.antiAliasWithSaveLayer); + expect(mergedFlexBoxSpecAttribute.box!.constraints, + const BoxConstraintsDto(maxHeight: 200)); + expect(mergedFlexBoxSpecAttribute.box!.decoration, + const BoxDecorationDto(color: ColorDto(Colors.red))); + expect(mergedFlexBoxSpecAttribute.box!.height, 200); + expect( + mergedFlexBoxSpecAttribute.box!.margin, + SpacingDto.only(top: 20, bottom: 20, left: 20, right: 20), + ); + expect( + mergedFlexBoxSpecAttribute.box!.padding, + SpacingDto.only(top: 30, bottom: 30, left: 30, right: 30), + ); + expect(mergedFlexBoxSpecAttribute.box!.transform, Matrix4.identity()); + expect(mergedFlexBoxSpecAttribute.box!.width, 200); + + expect(mergedFlexBoxSpecAttribute.flex!.mainAxisAlignment, + MainAxisAlignment.start); + expect(mergedFlexBoxSpecAttribute.flex!.crossAxisAlignment, + CrossAxisAlignment.start); + expect(mergedFlexBoxSpecAttribute.flex!.mainAxisSize, MainAxisSize.min); + expect(mergedFlexBoxSpecAttribute.flex!.verticalDirection, + VerticalDirection.up); + expect(mergedFlexBoxSpecAttribute.flex!.textDirection, TextDirection.rtl); + expect(mergedFlexBoxSpecAttribute.flex!.textBaseline, + TextBaseline.ideographic); + }); + }); + + group('FlexBoxSpecUtility fluent', () { + test('fluent behavior', () { + final flexBox = FlexBoxSpecUtility.self; + + final util = flexBox.chain + ..box.alignment.center() + ..box.padding(8) + ..flex.mainAxisAlignment.center() + ..flex.crossAxisAlignment.center(); + + final attr = util.attributeValue!; + + expect(util, isA()); + expect(attr.box!.alignment, Alignment.center); + expect(attr.box!.padding, const EdgeInsets.all(8.0).toDto()); + expect(attr.box!.margin, null); + expect(attr.flex!.mainAxisAlignment, MainAxisAlignment.center); + expect(attr.flex!.crossAxisAlignment, CrossAxisAlignment.center); + + final style = Style(util); + + final flexBoxAttribute = + style.styles.attributeOfType(); + + expect(flexBoxAttribute?.box!.alignment, Alignment.center); + expect(flexBoxAttribute?.box!.padding, const EdgeInsets.all(8.0).toDto()); + expect(flexBoxAttribute?.box!.margin, null); + expect( + flexBoxAttribute?.flex!.mainAxisAlignment, MainAxisAlignment.center); + expect(flexBoxAttribute?.flex!.crossAxisAlignment, + CrossAxisAlignment.center); + + final mixData = style.of(MockBuildContext()); + final flexBoxSpec = FlexBoxSpec.from(mixData); + + expect(flexBoxSpec.box.alignment, Alignment.center); + expect(flexBoxSpec.box.padding, const EdgeInsets.all(8.0)); + expect(flexBoxSpec.box.margin, null); + expect(flexBoxSpec.flex.mainAxisAlignment, MainAxisAlignment.center); + expect(flexBoxSpec.flex.crossAxisAlignment, CrossAxisAlignment.center); + }); + + test('Immutable behavior when having multiple flexboxes', () { + final flexBoxUtil = FlexBoxSpecUtility.self; + final flexBox1 = flexBoxUtil.chain + ..box.padding(10) + ..flex.mainAxisAlignment.start(); + final flexBox2 = flexBoxUtil.chain + ..box.padding(20) + ..flex.mainAxisAlignment.end(); + + final attr1 = flexBox1.attributeValue!; + final attr2 = flexBox2.attributeValue!; + + expect(attr1.box!.padding, const EdgeInsets.all(10.0).toDto()); + expect(attr2.box!.padding, const EdgeInsets.all(20.0).toDto()); + expect(attr1.flex!.mainAxisAlignment, MainAxisAlignment.start); + expect(attr2.flex!.mainAxisAlignment, MainAxisAlignment.end); + + final style1 = Style(flexBox1); + final style2 = Style(flexBox2); + + final flexBoxAttribute1 = + style1.styles.attributeOfType(); + final flexBoxAttribute2 = + style2.styles.attributeOfType(); + + expect( + flexBoxAttribute1?.box!.padding, const EdgeInsets.all(10.0).toDto()); + expect( + flexBoxAttribute2?.box!.padding, const EdgeInsets.all(20.0).toDto()); + expect( + flexBoxAttribute1?.flex!.mainAxisAlignment, MainAxisAlignment.start); + expect(flexBoxAttribute2?.flex!.mainAxisAlignment, MainAxisAlignment.end); + + final mixData1 = style1.of(MockBuildContext()); + final mixData2 = style2.of(MockBuildContext()); + + final flexBoxSpec1 = FlexBoxSpec.from(mixData1); + final flexBoxSpec2 = FlexBoxSpec.from(mixData2); + + expect(flexBoxSpec1.box.padding, const EdgeInsets.all(10.0)); + expect(flexBoxSpec2.box.padding, const EdgeInsets.all(20.0)); + expect(flexBoxSpec1.flex.mainAxisAlignment, MainAxisAlignment.start); + expect(flexBoxSpec2.flex.mainAxisAlignment, MainAxisAlignment.end); + }); + + test('Mutate behavior and not on same utility', () { + final flexBox = FlexBoxSpecUtility.self; + + final flexBoxValue = flexBox.chain; + flexBoxValue + ..box.padding(10) + ..box.color.red() + ..box.alignment.center() + ..flex.mainAxisAlignment.center() + ..flex.crossAxisAlignment.center(); + + final flexBoxAttribute = flexBoxValue.attributeValue!; + final flexBoxAttribute2 = flexBox.box.padding(20); + + expect(flexBoxAttribute.box!.padding, const EdgeInsets.all(10.0).toDto()); + expect( + (flexBoxAttribute.box!.decoration as BoxDecorationDto).color, + const ColorDto(Colors.red), + ); + expect(flexBoxAttribute.box!.alignment, Alignment.center); + expect( + flexBoxAttribute.flex!.mainAxisAlignment, MainAxisAlignment.center); + expect( + flexBoxAttribute.flex!.crossAxisAlignment, CrossAxisAlignment.center); + + expect( + flexBoxAttribute2.box!.padding, const EdgeInsets.all(20.0).toDto()); + expect((flexBoxAttribute2.box!.decoration as BoxDecorationDto?)?.color, + isNull); + expect(flexBoxAttribute2.box!.alignment, isNull); + }); + }); +} diff --git a/packages/mix/test/src/specs/flexbox/flexbox_util_test.dart b/packages/mix/test/src/specs/flexbox/flexbox_util_test.dart new file mode 100644 index 000000000..6f04bb1a5 --- /dev/null +++ b/packages/mix/test/src/specs/flexbox/flexbox_util_test.dart @@ -0,0 +1,147 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:mix/mix.dart'; + +const $testvariant = Variant('test'); +void main() { + group('FlexBoxUtility', () { + final flexBoxUtility = FlexBoxSpecUtility.self; + + test('call() returns correct instance', () { + final flexBox = flexBoxUtility.chain + ..box.alignment.center() + ..box.padding(10) + ..box.margin(10) + ..box.constraints.maxWidth(200) + ..box.width(10) + ..box.height(10) + ..box.transform(Matrix4.identity()) + ..box.clipBehavior.antiAlias() + ..flex.mainAxisAlignment.center() + ..flex.crossAxisAlignment.center(); + + final attr = flexBox.attributeValue!; + + expect(attr.box!.alignment, Alignment.center); + expect(attr.box!.clipBehavior, Clip.antiAlias); + expect(attr.box!.constraints!.maxWidth, 200); + expect(attr.box!.height, 10); + expect(attr.box!.margin, const EdgeInsets.all(10).toDto()); + expect(attr.box!.padding, const EdgeInsets.all(10).toDto()); + expect(attr.box!.transform, Matrix4.identity()); + expect(attr.box!.width, 10); + expect(attr.flex!.mainAxisAlignment, MainAxisAlignment.center); + expect(attr.flex!.crossAxisAlignment, CrossAxisAlignment.center); + }); + + test('box alignment returns correct instance', () { + final flexBox = flexBoxUtility.chain..box.alignment.center(); + expect(flexBox.attributeValue!.box!.alignment, Alignment.center); + }); + + test('box clipBehavior returns correct instance', () { + final flexBox = flexBoxUtility.chain..box.clipBehavior.antiAlias(); + expect(flexBox.attributeValue!.box!.clipBehavior, Clip.antiAlias); + }); + + test('box color returns correct instance', () { + final flexBox = flexBoxUtility.chain..box.color.blue(); + expect( + (flexBox.attributeValue!.box!.decoration as BoxDecorationDto).color, + const ColorDto(Colors.blue), + ); + }); + + test('box constraints returns correct instance', () { + expect(flexBoxUtility.box.constraints, isA()); + }); + + test('box shape returns correct instance', () { + expect(flexBoxUtility.box.shapeDecoration, isA()); + }); + + test('box height returns correct instance', () { + final flexBox = flexBoxUtility.chain..box.height(10); + expect(flexBox.attributeValue!.box!.height, 10); + }); + + test('box margin returns correct instance', () { + expect(flexBoxUtility.box.margin, isA()); + }); + + test('box padding returns correct instance', () { + expect(flexBoxUtility.box.padding, isA()); + }); + + test('box transform returns correct instance', () { + final flexBox = flexBoxUtility.chain..box.transform(Matrix4.identity()); + expect(flexBox.attributeValue!.box!.transform, Matrix4.identity()); + }); + + test('box width returns correct instance', () { + final flexBox = flexBoxUtility.chain..box.width(10); + expect(flexBox.attributeValue!.box!.width, 10); + }); + + test('box decoration returns correct instance', () { + final flexBox = flexBoxUtility.chain + ..box.decoration( + borderRadius: BorderRadius.circular(10), + color: Colors.amber, + ); + + final decoration = + flexBox.attributeValue!.box!.decoration as BoxDecorationDto; + expect(decoration.color, const ColorDto(Colors.amber)); + expect( + decoration.borderRadius, + BorderRadius.circular(10).toDto(), + ); + }); + + test('box foregroundDecoration returns correct instance', () { + final flexBox = flexBoxUtility.chain + ..box.foregroundDecoration( + borderRadius: BorderRadius.circular(10), + color: Colors.amber, + ); + + final foregroundDecoration = + flexBox.attributeValue!.box!.foregroundDecoration as BoxDecorationDto; + expect( + foregroundDecoration.color, + const ColorDto(Colors.amber), + reason: 'The color is not correct', + ); + expect( + foregroundDecoration.borderRadius, + BorderRadius.circular(10).toDto(), + reason: 'The BorderRadius is not correct', + ); + }); + + test('flex properties return correct instances', () { + final flexBox = flexBoxUtility.chain + ..flex.mainAxisAlignment.center() + ..flex.crossAxisAlignment.center() + ..flex.mainAxisSize.min() + ..flex.direction.horizontal() + ..flex.verticalDirection.down() + ..flex.textDirection.ltr() + ..flex.textBaseline.alphabetic() + ..flex.clipBehavior.antiAlias() + ..flex.gap(10); + + final attr = flexBox.attributeValue!.flex!; + expect(attr.mainAxisAlignment, MainAxisAlignment.center); + expect(attr.crossAxisAlignment, CrossAxisAlignment.center); + expect(attr.mainAxisSize, MainAxisSize.min); + expect(attr.direction, Axis.horizontal); + expect(attr.verticalDirection, VerticalDirection.down); + expect(attr.textDirection, TextDirection.ltr); + expect(attr.textBaseline, TextBaseline.alphabetic); + expect(attr.clipBehavior, Clip.antiAlias); + expect(attr.gap!.value, 10); + }); + }); +} diff --git a/packages/mix/test/src/specs/flexbox/flexbox_widget_test.dart b/packages/mix/test/src/specs/flexbox/flexbox_widget_test.dart new file mode 100644 index 000000000..dd629ab5f --- /dev/null +++ b/packages/mix/test/src/specs/flexbox/flexbox_widget_test.dart @@ -0,0 +1,262 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:mix/mix.dart'; + +import '../../../helpers/override_modifiers_order.dart'; +import '../../../helpers/testing_utils.dart'; + +void main() { + testWidgets('FlexBox', (WidgetTester tester) async { + final paddingAttr = $box.padding(10); + final marginAttr = $box.margin(15); + final alignmentAttr = $box.alignment.center(); + final clipAttr = $box.clipBehavior.hardEdge(); + final mainAxisAttr = $flex.mainAxisAlignment.center(); + final crossAxisAttr = $flex.crossAxisAlignment.center(); + + final boxDecorationAttr = $box.decoration( + border: Border.all(color: Colors.red, width: 1, style: BorderStyle.solid), + borderRadius: BorderRadius.circular(10), + color: Colors.red, + ); + + await tester.pumpStyledWidget( + FlexBox( + style: Style( + paddingAttr, + marginAttr, + alignmentAttr, + clipAttr, + boxDecorationAttr, + mainAxisAttr, + crossAxisAttr, + ), + direction: Axis.horizontal, + children: const [], + ), + ); + + final flexFinder = find.byType(Flex); + final containerFinder = find.byType(Container); + final flexWidget = tester.widget(flexFinder); + final containerWidget = tester.widget(containerFinder); + + expect(containerWidget.padding, const EdgeInsets.all(10)); + expect(containerWidget.margin, const EdgeInsets.all(15)); + expect(containerWidget.alignment, Alignment.center); + expect(containerWidget.clipBehavior, Clip.hardEdge); + expect( + containerWidget.decoration, + BoxDecoration( + color: Colors.red, + border: + Border.all(color: Colors.red, width: 1, style: BorderStyle.solid), + borderRadius: BorderRadius.circular(10), + ), + ); + expect(flexWidget.mainAxisAlignment, MainAxisAlignment.center); + expect(flexWidget.crossAxisAlignment, CrossAxisAlignment.center); + }); + + testWidgets( + 'FlexBox should apply modifiers only once', + (tester) async { + await tester.pumpMaterialApp( + FlexBox( + style: Style( + $box.height(100), + $box.width(100), + $with.align(), + ), + direction: Axis.horizontal, + children: const [ + FlexBox( + direction: Axis.horizontal, + children: [], + ), + ], + ), + ); + + expect(find.byType(Align), findsOneWidget); + }, + ); + + testWidgets('FlexBox handles onEnd', (WidgetTester tester) async { + var countPressTime = 0; + var countOnEnd = 0; + + await tester.pumpWidget( + MaterialApp( + home: PressableBox( + onPress: () { + countPressTime++; + }, + child: FlexBox( + style: Style( + $flexbox.height(50), + $flexbox.width(50), + $flexbox.wrap.transform.scale(1), + $on.press( + $flexbox.wrap.transform.scale(1.5), + ), + ).animate( + onEnd: () { + print('onEnd'); + countOnEnd++; + }, + ), + direction: Axis.horizontal, + children: const [Box()], + ), + ), + ), + ); + + final pressableFinder = find.byType(Pressable); + await tester.tap(pressableFinder); + + await tester.pumpAndSettle(); + + expect(countPressTime, 1); + expect(countOnEnd, 1); + }); + + testWidgets('FlexBox handles onEnd #2', (WidgetTester tester) async { + var countPressTime = 0; + var countOnEnd = 0; + + await tester.pumpWidget( + MaterialApp( + home: PressableBox( + onPress: () { + countPressTime++; + }, + child: FlexBox( + style: Style( + $box.height(50), + $box.width(50), + $box.wrap.transform.scale(1), + $on.press( + $box.wrap.transform.scale(1.5), + ), + ).animate( + onEnd: () { + print('onEnd'); + countOnEnd++; + }, + ), + direction: Axis.horizontal, + children: const [Box()], + ), + ), + ), + ); + + final pressableFinder = find.byType(Pressable); + await tester.tap(pressableFinder); + + await tester.pumpAndSettle(); + + expect(countPressTime, 1); + expect(countOnEnd, 1); + }); + + testWidgets( + 'FlexBoxSpec properties should match Flex and Container properties', + (WidgetTester tester) async { + final flexBoxSpec = FlexBoxSpec( + box: BoxSpec( + alignment: Alignment.center, + padding: const EdgeInsets.all(16), + margin: const EdgeInsets.symmetric(horizontal: 8), + decoration: BoxDecoration( + color: Colors.blue, + borderRadius: BorderRadius.circular(10), + ), + foregroundDecoration: BoxDecoration( + border: Border.all(color: Colors.red, width: 2), + ), + transform: Matrix4.rotationZ(0.1), + transformAlignment: Alignment.topLeft, + clipBehavior: Clip.antiAlias, + width: 150, + height: 100, + ), + flex: const FlexSpec( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisSize: MainAxisSize.max, + direction: Axis.horizontal, + verticalDirection: VerticalDirection.down, + textDirection: TextDirection.ltr, + textBaseline: TextBaseline.alphabetic, + ), + ); + + const flexBoxKey = Key('flexbox'); + final flexBox = FlexBoxSpecWidget( + key: flexBoxKey, + spec: flexBoxSpec, + direction: Axis.horizontal, + children: const [], + ); + + await tester.pumpWidget( + MaterialApp( + home: Scaffold( + body: flexBox, + ), + ), + ); + + final flexBoxFinder = find.byKey(flexBoxKey); + expect(flexBoxFinder, findsOneWidget); + + final containerWidget = tester.widget(find.descendant( + of: flexBoxFinder, + matching: find.byType(Container), + )); + + final flexWidget = tester.widget(find.descendant( + of: flexBoxFinder, + matching: find.byType(Flex), + )); + + expect(containerWidget.alignment, flexBoxSpec.box.alignment); + expect(containerWidget.padding, flexBoxSpec.box.padding); + expect(containerWidget.margin, flexBoxSpec.box.margin); + expect(containerWidget.decoration, flexBoxSpec.box.decoration); + expect(containerWidget.foregroundDecoration, + flexBoxSpec.box.foregroundDecoration); + expect(containerWidget.transform, flexBoxSpec.box.transform); + expect( + containerWidget.transformAlignment, flexBoxSpec.box.transformAlignment); + expect(containerWidget.clipBehavior, flexBoxSpec.box.clipBehavior); + + expect(flexWidget.mainAxisAlignment, flexBoxSpec.flex.mainAxisAlignment); + expect(flexWidget.crossAxisAlignment, flexBoxSpec.flex.crossAxisAlignment); + expect(flexWidget.mainAxisSize, flexBoxSpec.flex.mainAxisSize); + expect(flexWidget.direction, flexBoxSpec.flex.direction); + expect(flexWidget.verticalDirection, flexBoxSpec.flex.verticalDirection); + expect(flexWidget.textDirection, flexBoxSpec.flex.textDirection); + expect(flexWidget.textBaseline, flexBoxSpec.flex.textBaseline); + }); + + testWidgets( + 'Renders modifiers in the correct order with many overrides', + (tester) async { + testOverrideModifiersOrder( + tester, + widgetBuilder: (style, orderOfModifiers) { + return FlexBox( + style: style, + orderOfModifiers: orderOfModifiers, + direction: Axis.horizontal, + children: const [], + ); + }, + ); + }, + ); +} From ac9dfd8c1eefb79c9cc089b4a5f6d2c21d0724db Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Mon, 11 Nov 2024 21:37:24 -0300 Subject: [PATCH 02/57] Update main.dart --- packages/mix/example/lib/main.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mix/example/lib/main.dart b/packages/mix/example/lib/main.dart index d9e2c59d7..406dce46c 100644 --- a/packages/mix/example/lib/main.dart +++ b/packages/mix/example/lib/main.dart @@ -19,8 +19,8 @@ final style = Style( $box.margin(10), $box.border( color: Colors.black, - width: 1, style: BorderStyle.solid, + width: 1, ), ); From a4f04f60e655b611478e8eb0dbff992f4c5669c7 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Mon, 11 Nov 2024 21:57:34 -0300 Subject: [PATCH 03/57] lint --- packages/mix/lib/src/theme/tokens/breakpoints_token.dart | 2 +- packages/mix/lib/src/theme/tokens/color_token.dart | 2 +- packages/remix/lib/src/app/remix_app.dart | 2 +- .../lib/src/components/checkbox/checkbox_widget.dart | 2 +- packages/remix/lib/src/theme/remix_theme.dart | 8 ++++---- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/mix/lib/src/theme/tokens/breakpoints_token.dart b/packages/mix/lib/src/theme/tokens/breakpoints_token.dart index dcad98970..22ea3d456 100644 --- a/packages/mix/lib/src/theme/tokens/breakpoints_token.dart +++ b/packages/mix/lib/src/theme/tokens/breakpoints_token.dart @@ -73,7 +73,7 @@ class BreakpointToken extends MixToken { return themeValue is BreakpointResolver ? themeValue.resolve(context) - : themeValue ?? const Breakpoint(); + : (themeValue ?? const Breakpoint()); } } diff --git a/packages/mix/lib/src/theme/tokens/color_token.dart b/packages/mix/lib/src/theme/tokens/color_token.dart index f2724083e..18a424d5b 100644 --- a/packages/mix/lib/src/theme/tokens/color_token.dart +++ b/packages/mix/lib/src/theme/tokens/color_token.dart @@ -32,7 +32,7 @@ class ColorToken extends MixToken { return themeValue is ColorResolver ? themeValue.resolve(context) - : themeValue ?? Colors.transparent; + : (themeValue ?? Colors.transparent); } } diff --git a/packages/remix/lib/src/app/remix_app.dart b/packages/remix/lib/src/app/remix_app.dart index b25f7c2ef..0f52184da 100644 --- a/packages/remix/lib/src/app/remix_app.dart +++ b/packages/remix/lib/src/app/remix_app.dart @@ -129,7 +129,7 @@ class _RemixAppState extends State { return widget.builder!(context, child); }, ) - : child ?? const SizedBox.shrink(), + : (child ?? const SizedBox.shrink()), ); } diff --git a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart index a1500ef68..ebe41b1c0 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart @@ -89,7 +89,7 @@ class _CheckboxState extends State { child: IconWidget( widget.value ? widget.iconChecked - : widget.iconUnchecked ?? widget.iconChecked, + : (widget.iconUnchecked ?? widget.iconChecked), ), ), if (widget.label != null) spec.label(widget.label!), diff --git a/packages/remix/lib/src/theme/remix_theme.dart b/packages/remix/lib/src/theme/remix_theme.dart index e9622a6ba..3384b8941 100644 --- a/packages/remix/lib/src/theme/remix_theme.dart +++ b/packages/remix/lib/src/theme/remix_theme.dart @@ -293,16 +293,16 @@ class RemixTheme extends StatelessWidget { RemixThemeData _defineRemixThemeData(BuildContext context) { if (themeMode != null) { return themeMode == ThemeMode.dark - ? darkTheme ?? _defaultThemeDark - : theme ?? _defaultThemeLight; + ? (darkTheme ?? _defaultThemeDark) + : (theme ?? _defaultThemeLight); } final brightness = MediaQuery.platformBrightnessOf(context); final isDark = brightness == Brightness.dark; return isDark - ? darkTheme ?? _defaultThemeDark - : theme ?? _defaultThemeLight; + ? (darkTheme ?? _defaultThemeDark) + : (theme ?? _defaultThemeLight); } @override From 3d37800c55cd6bf25ff82e89a54a6af780958037 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Mon, 11 Nov 2024 22:00:09 -0300 Subject: [PATCH 04/57] Update rule_config.dart --- packages/mix_lint/lib/src/utils/rule_config.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mix_lint/lib/src/utils/rule_config.dart b/packages/mix_lint/lib/src/utils/rule_config.dart index 982e876c4..c04e5f14d 100644 --- a/packages/mix_lint/lib/src/utils/rule_config.dart +++ b/packages/mix_lint/lib/src/utils/rule_config.dart @@ -6,7 +6,7 @@ typedef RuleParameterParser = T Function(Map json); typedef RuleProblemFactory = String Function(T value); -class RuleConfig { +class RuleConfig { final String name; final ErrorSeverity errorSeverity; final String? correctionMessage; From a4334040d083c7b52289ae90ed9be4b891cba8c2 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Thu, 14 Nov 2024 11:55:27 -0300 Subject: [PATCH 05/57] lint fixes --- melos.yaml | 4 +- packages/mix/example/lib/main.dart | 25 ++++------ .../src/core/factory/style_widgets_ext.dart | 2 +- packages/mix/lib/src/core/styled_widget.dart | 6 +-- .../internal/gesture_mix_state.dart | 2 +- .../internal/render_widget_modifier.dart | 8 ++-- .../scroll_view_widget_modifier.dart | 2 +- .../modifiers/visibility_widget_modifier.dart | 2 +- packages/mix/lib/src/specs/box/box_spec.dart | 4 +- .../mix/lib/src/specs/box/box_widget.dart | 4 +- .../mix/lib/src/specs/flex/flex_spec.dart | 4 +- .../mix/lib/src/specs/flex/flex_widget.dart | 6 +-- .../lib/src/specs/flexbox/flexbox_spec.dart | 4 +- .../lib/src/specs/flexbox/flexbox_widget.dart | 8 ++-- .../mix/lib/src/specs/icon/icon_widget.dart | 2 +- .../mix/lib/src/specs/image/image_widget.dart | 2 +- .../mix/lib/src/specs/stack/stack_spec.dart | 2 +- .../mix/lib/src/specs/stack/stack_widget.dart | 4 +- .../mix/lib/src/specs/text/text_widget.dart | 2 +- .../mix/lib/src/widgets/pressable_widget.dart | 42 ++++++++-------- ...ining_tokens_or_variants_within_style.dart | 4 +- packages/remix/lib/src/app/remix_app.dart | 2 +- .../accordion/accordion_widget.dart | 6 +-- .../header/accordion_header_spec_widget.dart | 2 +- .../src/components/button/button_widget.dart | 6 +-- .../components/callout/callout_widget.dart | 2 +- .../components/checkbox/checkbox_widget.dart | 8 ++-- .../lib/src/components/chip/chip_widget.dart | 10 ++-- .../src/components/dialog/dialog_widget.dart | 4 +- .../icon_button/icon_button_widget.dart | 4 +- .../menu_item/menu_item_widget.dart | 8 ++-- .../src/components/radio/radio_widget.dart | 8 ++-- .../segmented_control_button_widget.dart | 2 +- .../segmented_control_widget.dart | 4 +- .../select/button/select_button_widget.dart | 2 +- .../select/item/select_menu_widget.dart | 2 +- .../src/components/select/select_widget.dart | 14 +++--- .../src/components/slider/slider_widget.dart | 48 +++++++++---------- .../src/components/switch/switch_widget.dart | 6 +-- .../textfield/textfield_widget.dart | 10 ++-- .../lib/src/components/toast/toast_layer.dart | 4 +- .../src/components/toast/toast_widget.dart | 4 +- packages/remix/lib/src/theme/remix_theme.dart | 2 +- 43 files changed, 145 insertions(+), 152 deletions(-) diff --git a/melos.yaml b/melos.yaml index 23d5690b3..6926ab284 100644 --- a/melos.yaml +++ b/melos.yaml @@ -30,11 +30,11 @@ scripts: failFast: true analyze:dart: - run: melos exec -c 10 -- dart analyze . + run: melos exec -c 4 -- dart analyze . description: Run Dart static analysis checks. analyze:dcm: - run: melos exec -c 10 -- dcm analyze . --fatal-style --fatal-performance --fatal-warnings + run: melos exec -c 4 -- dcm analyze . --fatal-style --fatal-performance --fatal-warnings description: Run DCM static analysis checks. packageFilters: dependsOn: "dart_code_metrics_presets" diff --git a/packages/mix/example/lib/main.dart b/packages/mix/example/lib/main.dart index 406dce46c..d3f9f813b 100644 --- a/packages/mix/example/lib/main.dart +++ b/packages/mix/example/lib/main.dart @@ -1,12 +1,8 @@ import 'package:flutter/material.dart'; import 'package:mix/mix.dart'; -void main() async { - runApp( - const MaterialApp( - home: MyApp(), - ), - ); +void main() { + runApp(const MaterialApp(home: MyApp())); } final style = Style( @@ -17,11 +13,7 @@ final style = Style( $box.borderRadius(10), $box.padding(20, 10), $box.margin(10), - $box.border( - color: Colors.black, - style: BorderStyle.solid, - width: 1, - ), + $box.border(color: Colors.black, style: BorderStyle.solid, width: 1), ); class MyApp extends StatelessWidget { @@ -30,11 +22,12 @@ class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( - body: Center( - child: Box( - style: style, - child: const Center(child: Text('Hello Mix')), + body: Center( + child: Box( + style: style, + child: const Center(child: Text('Hello Mix')), + ), ), - )); + ); } } diff --git a/packages/mix/lib/src/core/factory/style_widgets_ext.dart b/packages/mix/lib/src/core/factory/style_widgets_ext.dart index d4478b7f3..939be5adb 100644 --- a/packages/mix/lib/src/core/factory/style_widgets_ext.dart +++ b/packages/mix/lib/src/core/factory/style_widgets_ext.dart @@ -29,7 +29,7 @@ extension StyleExt on Style { Key? key, Style? style, }) { - return container(inherit: inherit, key: key, style: style, child: child); + return container(child: child, inherit: inherit, key: key, style: style); } HBox hbox({ diff --git a/packages/mix/lib/src/core/styled_widget.dart b/packages/mix/lib/src/core/styled_widget.dart index a3626566e..2a41f2e25 100644 --- a/packages/mix/lib/src/core/styled_widget.dart +++ b/packages/mix/lib/src/core/styled_widget.dart @@ -105,17 +105,17 @@ class SpecBuilder extends StatelessWidget { return mix.isAnimated ? RenderAnimatedModifiers( modifiers: modifiers, + child: child, duration: mix.animation!.duration, mix: mix, orderOfModifiers: orderOfModifiers, curve: mix.animation!.curve, - child: child, ) : RenderModifiers( + child: child, modifiers: modifiers, mix: mix, orderOfModifiers: orderOfModifiers, - child: child, ); } @@ -143,7 +143,7 @@ class SpecBuilder extends StatelessWidget { _hasWidgetStateVariant && MixWidgetState.of(context) == null; if (needsWidgetState || controller != null) { - current = Interactable(controller: controller, child: current); + current = Interactable(child: current, controller: controller); } // Otherwise, directly build the mixed child widget diff --git a/packages/mix/lib/src/core/widget_state/internal/gesture_mix_state.dart b/packages/mix/lib/src/core/widget_state/internal/gesture_mix_state.dart index 21f1673e9..018eccc50 100644 --- a/packages/mix/lib/src/core/widget_state/internal/gesture_mix_state.dart +++ b/packages/mix/lib/src/core/widget_state/internal/gesture_mix_state.dart @@ -189,6 +189,7 @@ class _GestureMixStateWidgetState extends State { @override Widget build(BuildContext context) { return GestureDetector( + child: widget.child, onTapUp: widget.onTap != null ? _onTapUp : null, onTap: widget.onTap != null ? _onTap : null, onTapCancel: widget.onTap != null ? _onTapCancel : null, @@ -203,7 +204,6 @@ class _GestureMixStateWidgetState extends State { onPanCancel: widget.onPanCancel != null ? _onPanCancel : null, behavior: widget.hitTestBehavior, excludeFromSemantics: widget.excludeFromSemantics, - child: widget.child, ); } } diff --git a/packages/mix/lib/src/modifiers/internal/render_widget_modifier.dart b/packages/mix/lib/src/modifiers/internal/render_widget_modifier.dart index a18024c13..8808e656a 100644 --- a/packages/mix/lib/src/modifiers/internal/render_widget_modifier.dart +++ b/packages/mix/lib/src/modifiers/internal/render_widget_modifier.dart @@ -105,8 +105,8 @@ class RenderModifiers extends StatelessWidget { @override Widget build(BuildContext context) { return _RenderModifiers( - modifiers: combineModifiers(mix, modifiers, orderOfModifiers).reversed, child: child, + modifiers: combineModifiers(mix, modifiers, orderOfModifiers).reversed, ); } } @@ -160,10 +160,10 @@ class RenderAnimatedModifiers extends StatelessWidget { orderOfModifiers, defaultOrder: MixTheme.maybeOf(context)?.defaultOrderOfModifiers, ).reversed.toList(), + child: child, duration: duration, curve: curve, onEnd: onEnd, - child: child, ); } } @@ -275,15 +275,15 @@ class RenderSpecModifiers extends StatelessWidget { return spec.isAnimated ? RenderAnimatedModifiers( modifiers: modifiers, + child: child, duration: spec.animated!.duration, orderOfModifiers: orderOfModifiers, curve: spec.animated!.curve, - child: child, ) : RenderModifiers( + child: child, modifiers: modifiers, orderOfModifiers: orderOfModifiers, - child: child, ); } } diff --git a/packages/mix/lib/src/modifiers/scroll_view_widget_modifier.dart b/packages/mix/lib/src/modifiers/scroll_view_widget_modifier.dart index 624f642b9..31192fe53 100644 --- a/packages/mix/lib/src/modifiers/scroll_view_widget_modifier.dart +++ b/packages/mix/lib/src/modifiers/scroll_view_widget_modifier.dart @@ -43,8 +43,8 @@ final class ScrollViewModifierSpec reverse: reverse ?? false, padding: padding, physics: physics, - clipBehavior: clipBehavior ?? Clip.hardEdge, child: child, + clipBehavior: clipBehavior ?? Clip.hardEdge, ); } } diff --git a/packages/mix/lib/src/modifiers/visibility_widget_modifier.dart b/packages/mix/lib/src/modifiers/visibility_widget_modifier.dart index b195d113f..6baa69419 100644 --- a/packages/mix/lib/src/modifiers/visibility_widget_modifier.dart +++ b/packages/mix/lib/src/modifiers/visibility_widget_modifier.dart @@ -26,7 +26,7 @@ final class VisibilityModifierSpec @override Widget build(Widget child) { - return Visibility(visible: visible, child: child); + return Visibility(child: child, visible: visible); } } diff --git a/packages/mix/lib/src/specs/box/box_spec.dart b/packages/mix/lib/src/specs/box/box_spec.dart index 63529c0ad..d842cd1ad 100644 --- a/packages/mix/lib/src/specs/box/box_spec.dart +++ b/packages/mix/lib/src/specs/box/box_spec.dart @@ -123,16 +123,16 @@ final class BoxSpec extends Spec with _$BoxSpec, Diagnosticable { return isAnimated ? AnimatedBoxSpecWidget( spec: this, + child: child, duration: animated!.duration, curve: animated!.curve, onEnd: animated?.onEnd, orderOfModifiers: orderOfModifiers, - child: child, ) : BoxSpecWidget( spec: this, - orderOfModifiers: orderOfModifiers, child: child, + orderOfModifiers: orderOfModifiers, ); } diff --git a/packages/mix/lib/src/specs/box/box_widget.dart b/packages/mix/lib/src/specs/box/box_widget.dart index d5e8ab6f9..7d99f43d1 100644 --- a/packages/mix/lib/src/specs/box/box_widget.dart +++ b/packages/mix/lib/src/specs/box/box_widget.dart @@ -75,7 +75,6 @@ class BoxSpecWidget extends StatelessWidget { Widget build(BuildContext context) { return RenderSpecModifiers( orderOfModifiers: orderOfModifiers, - spec: spec ?? const BoxSpec(), child: Container( alignment: spec?.alignment, padding: spec?.padding, @@ -87,9 +86,10 @@ class BoxSpecWidget extends StatelessWidget { margin: spec?.margin, transform: spec?.transform, transformAlignment: spec?.transformAlignment, - clipBehavior: spec?.clipBehavior ?? Clip.none, child: child, + clipBehavior: spec?.clipBehavior ?? Clip.none, ), + spec: spec ?? const BoxSpec(), ); } } diff --git a/packages/mix/lib/src/specs/flex/flex_spec.dart b/packages/mix/lib/src/specs/flex/flex_spec.dart index 27831ed84..cea690187 100644 --- a/packages/mix/lib/src/specs/flex/flex_spec.dart +++ b/packages/mix/lib/src/specs/flex/flex_spec.dart @@ -67,15 +67,15 @@ final class FlexSpec extends Spec with _$FlexSpec, Diagnosticable { return isAnimated ? AnimatedFlexSpecWidget( spec: this, + children: children, direction: direction, curve: animated!.curve, duration: animated!.duration, - children: children, ) : FlexSpecWidget( spec: this, - direction: direction, children: children, + direction: direction, ); } diff --git a/packages/mix/lib/src/specs/flex/flex_widget.dart b/packages/mix/lib/src/specs/flex/flex_widget.dart index b30a925de..e9d3cbbf6 100644 --- a/packages/mix/lib/src/specs/flex/flex_widget.dart +++ b/packages/mix/lib/src/specs/flex/flex_widget.dart @@ -42,7 +42,7 @@ class StyledFlex extends StyledWidget { return withMix(context, (context) { final spec = FlexSpec.of(context); - return spec(direction: direction, children: children); + return spec(children: children, direction: direction); }); } } @@ -99,8 +99,8 @@ class FlexSpecWidget extends StatelessWidget { ? flexWidget : RenderSpecModifiers( orderOfModifiers: orderOfModifiers, - spec: spec!, child: flexWidget, + spec: spec!, ); } } @@ -145,9 +145,9 @@ class AnimatedFlexSpecWidgetState Widget build(BuildContext context) { return FlexSpecWidget( spec: _specTween?.evaluate(animation), + children: widget.children, direction: widget.direction, orderOfModifiers: widget.orderOfModifiers, - children: widget.children, ); } } diff --git a/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart b/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart index 36c874ca8..2cf2dc94b 100644 --- a/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart +++ b/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart @@ -90,16 +90,16 @@ final class FlexBoxSpec extends Spec return (isAnimated) ? AnimatedFlexBoxSpecWidget( spec: this, + children: children, direction: direction, curve: animated!.curve, duration: animated!.duration, onEnd: animated!.onEnd, - children: children, ) : FlexBoxSpecWidget( spec: this, - direction: direction, children: children, + direction: direction, ); } diff --git a/packages/mix/lib/src/specs/flexbox/flexbox_widget.dart b/packages/mix/lib/src/specs/flexbox/flexbox_widget.dart index 22b6fb3e9..e8e0341f7 100644 --- a/packages/mix/lib/src/specs/flexbox/flexbox_widget.dart +++ b/packages/mix/lib/src/specs/flexbox/flexbox_widget.dart @@ -61,7 +61,7 @@ class FlexBox extends StyledWidget { flex: flexSpec, ); - return newSpec(direction: direction, children: children); + return newSpec(children: children, direction: direction); }); } } @@ -89,11 +89,11 @@ class FlexBoxSpecWidget extends StatelessWidget { // This code must be like this to keep the existing animation API working. return RenderSpecModifiers( orderOfModifiers: orderOfModifiers, - spec: spec, child: spec.box( + child: spec.flex(children: children, direction: direction), orderOfModifiers: orderOfModifiers, - child: spec.flex(direction: direction, children: children), ), + spec: spec, ); } } @@ -139,9 +139,9 @@ class AnimatedFlexBoxSpecWidgetState Widget build(BuildContext context) { return FlexBoxSpecWidget( spec: _specTween?.evaluate(animation), + children: widget.children, direction: widget.direction, orderOfModifiers: widget.orderOfModifiers, - children: widget.children, ); } } diff --git a/packages/mix/lib/src/specs/icon/icon_widget.dart b/packages/mix/lib/src/specs/icon/icon_widget.dart index dbd8f3193..cb62796c6 100644 --- a/packages/mix/lib/src/specs/icon/icon_widget.dart +++ b/packages/mix/lib/src/specs/icon/icon_widget.dart @@ -76,7 +76,6 @@ class IconSpecWidget extends StatelessWidget { Widget build(BuildContext context) { return RenderSpecModifiers( orderOfModifiers: orderOfModifiers, - spec: spec ?? const IconSpec(), child: Icon( icon, size: spec?.size, @@ -89,6 +88,7 @@ class IconSpecWidget extends StatelessWidget { semanticLabel: semanticLabel, textDirection: textDirection, ), + spec: spec ?? const IconSpec(), ); } } diff --git a/packages/mix/lib/src/specs/image/image_widget.dart b/packages/mix/lib/src/specs/image/image_widget.dart index 6f25d0543..4cab8893d 100644 --- a/packages/mix/lib/src/specs/image/image_widget.dart +++ b/packages/mix/lib/src/specs/image/image_widget.dart @@ -106,7 +106,6 @@ class ImageSpecWidget extends StatelessWidget { Widget build(BuildContext context) { return RenderSpecModifiers( orderOfModifiers: orderOfModifiers, - spec: spec ?? const ImageSpec(), child: Image( image: image, frameBuilder: frameBuilder, @@ -128,6 +127,7 @@ class ImageSpecWidget extends StatelessWidget { isAntiAlias: isAntiAlias, filterQuality: spec?.filterQuality ?? FilterQuality.low, ), + spec: spec ?? const ImageSpec(), ); } } diff --git a/packages/mix/lib/src/specs/stack/stack_spec.dart b/packages/mix/lib/src/specs/stack/stack_spec.dart index d849ea831..f633d45f5 100644 --- a/packages/mix/lib/src/specs/stack/stack_spec.dart +++ b/packages/mix/lib/src/specs/stack/stack_spec.dart @@ -42,9 +42,9 @@ final class StackSpec extends Spec with _$StackSpec, Diagnosticable { return isAnimated ? AnimatedStackSpecWidget( spec: this, + children: children, curve: animated!.curve, duration: animated!.duration, - children: children, ) : StackSpecWidget(spec: this, children: children); } diff --git a/packages/mix/lib/src/specs/stack/stack_widget.dart b/packages/mix/lib/src/specs/stack/stack_widget.dart index 187c82173..75b2cc5eb 100644 --- a/packages/mix/lib/src/specs/stack/stack_widget.dart +++ b/packages/mix/lib/src/specs/stack/stack_widget.dart @@ -57,7 +57,6 @@ class StackSpecWidget extends StatelessWidget { // The Stack widget is used here, applying the resolved styles from StackSpec. return RenderSpecModifiers( orderOfModifiers: orderOfModifiers, - spec: spec ?? const StackSpec(), child: Stack( alignment: spec?.alignment ?? _defaultStack.alignment, textDirection: spec?.textDirection, @@ -65,6 +64,7 @@ class StackSpecWidget extends StatelessWidget { clipBehavior: spec?.clipBehavior ?? _defaultStack.clipBehavior, children: children ?? const [], ), + spec: spec ?? const StackSpec(), ); } } @@ -109,8 +109,8 @@ class AnimatedStackSpecWidgetState return StackSpecWidget( spec: spec, - orderOfModifiers: widget.orderOfModifiers, children: widget.children, + orderOfModifiers: widget.orderOfModifiers, ); } } diff --git a/packages/mix/lib/src/specs/text/text_widget.dart b/packages/mix/lib/src/specs/text/text_widget.dart index 75de9aeb2..55ec69f3d 100644 --- a/packages/mix/lib/src/specs/text/text_widget.dart +++ b/packages/mix/lib/src/specs/text/text_widget.dart @@ -93,7 +93,6 @@ class TextSpecWidget extends StatelessWidget { // The Text widget is used here, applying the resolved styles and properties from TextSpec. return RenderSpecModifiers( orderOfModifiers: const [], - spec: spec ?? const TextSpec(), child: Text( spec?.directive?.apply(text) ?? text, style: spec?.style, @@ -111,6 +110,7 @@ class TextSpecWidget extends StatelessWidget { textWidthBasis: spec?.textWidthBasis, textHeightBehavior: spec?.textHeightBehavior, ), + spec: spec ?? const TextSpec(), ); } } diff --git a/packages/mix/lib/src/widgets/pressable_widget.dart b/packages/mix/lib/src/widgets/pressable_widget.dart index 228a00236..89d47be7b 100644 --- a/packages/mix/lib/src/widgets/pressable_widget.dart +++ b/packages/mix/lib/src/widgets/pressable_widget.dart @@ -55,6 +55,7 @@ class PressableBox extends StatelessWidget { @override Widget build(BuildContext context) { return Pressable( + child: Box(style: style, child: child), enabled: enabled, onPress: onPress, hitTestBehavior: hitTestBehavior, @@ -63,7 +64,6 @@ class PressableBox extends StatelessWidget { autofocus: autofocus, focusNode: focusNode, unpressDelay: unpressDelay, - child: Box(style: style, child: child), ); } } @@ -197,14 +197,13 @@ class PressableWidgetState extends State { @override Widget build(BuildContext context) { Widget current = GestureMixStateWidget( - enableFeedback: widget.enableFeedback, - controller: _controller, - onTap: widget.enabled ? widget.onPress?.call : null, - onLongPress: widget.enabled ? widget.onLongPress?.call : null, - excludeFromSemantics: widget.excludeFromSemantics, - hitTestBehavior: widget.hitTestBehavior, - unpressDelay: widget.unpressDelay, child: InteractiveMixStateWidget( + child: MouseRegionMixStateWidget( + child: MixWidgetStateBuilder( + controller: _controller, + builder: (_) => widget.child, + ), + ), enabled: widget.enabled, onFocusChange: widget.onFocusChange, autofocus: widget.autofocus, @@ -215,21 +214,22 @@ class PressableWidgetState extends State { mouseCursor: mouseCursor, controller: _controller, actions: actions, - child: MouseRegionMixStateWidget( - child: MixWidgetStateBuilder( - controller: _controller, - builder: (_) => widget.child, - ), - ), ), + enableFeedback: widget.enableFeedback, + controller: _controller, + onTap: widget.enabled ? widget.onPress?.call : null, + onLongPress: widget.enabled ? widget.onLongPress?.call : null, + excludeFromSemantics: widget.excludeFromSemantics, + hitTestBehavior: widget.hitTestBehavior, + unpressDelay: widget.unpressDelay, ); if (!widget.excludeFromSemantics) { current = Semantics( + child: current, button: true, label: widget.semanticButtonLabel, onTap: widget.onPress, - child: current, ); } @@ -308,6 +308,12 @@ class _InteractableState extends State { @override Widget build(BuildContext context) { return InteractiveMixStateWidget( + child: MouseRegionMixStateWidget( + child: MixWidgetStateBuilder( + controller: _controller, + builder: (context) => widget.child, + ), + ), enabled: widget.enabled, onFocusChange: widget.onFocusChange, autofocus: widget.autofocus, @@ -321,12 +327,6 @@ class _InteractableState extends State { shortcuts: widget.shortcuts, controller: _controller, actions: widget.actions, - child: MouseRegionMixStateWidget( - child: MixWidgetStateBuilder( - controller: _controller, - builder: (context) => widget.child, - ), - ), ); } } diff --git a/packages/mix_lint/lib/src/lints/avoid_defining_tokens_or_variants_within_style.dart b/packages/mix_lint/lib/src/lints/avoid_defining_tokens_or_variants_within_style.dart index af6939e9f..a7e0bc730 100644 --- a/packages/mix_lint/lib/src/lints/avoid_defining_tokens_or_variants_within_style.dart +++ b/packages/mix_lint/lib/src/lints/avoid_defining_tokens_or_variants_within_style.dart @@ -23,16 +23,16 @@ class AvoidDefiningTokensOrVariantsWithinStyle extends DartLintRule { ) { context.checkTypeHierarchyCompliance( parent: styleChecker, + child: variantChecker, reporter: reporter, code: _code, - child: variantChecker, ); context.checkTypeHierarchyCompliance( parent: styleChecker, + child: mixTokenChecker, reporter: reporter, code: _code, - child: mixTokenChecker, ); } } diff --git a/packages/remix/lib/src/app/remix_app.dart b/packages/remix/lib/src/app/remix_app.dart index 0f52184da..81fa1af80 100644 --- a/packages/remix/lib/src/app/remix_app.dart +++ b/packages/remix/lib/src/app/remix_app.dart @@ -122,7 +122,6 @@ class _RemixAppState extends State { Widget _remixBuilder(BuildContext context, Widget? child) { return RemixTheme( theme: widget.theme, - darkTheme: widget.darkTheme, child: widget.builder != null ? Builder( builder: (BuildContext context) { @@ -130,6 +129,7 @@ class _RemixAppState extends State { }, ) : (child ?? const SizedBox.shrink()), + darkTheme: widget.darkTheme, ); } diff --git a/packages/remix/lib/src/components/accordion/accordion_widget.dart b/packages/remix/lib/src/components/accordion/accordion_widget.dart index fb3acaf39..e20391bcb 100644 --- a/packages/remix/lib/src/components/accordion/accordion_widget.dart +++ b/packages/remix/lib/src/components/accordion/accordion_widget.dart @@ -66,11 +66,8 @@ class _AccordionState extends State with TickerProviderStateMixin { return spec.container( child: spec.flex( - direction: Axis.vertical, children: [ Pressable( - onPress: _handleTap, - controller: _controller, child: SpecBuilder( style: variantStyle, builder: (context) { @@ -79,9 +76,12 @@ class _AccordionState extends State with TickerProviderStateMixin { return widget.header(spec.header); }, ), + onPress: _handleTap, + controller: _controller, ), content, ], + direction: Axis.vertical, ), ); }, diff --git a/packages/remix/lib/src/components/accordion/header/accordion_header_spec_widget.dart b/packages/remix/lib/src/components/accordion/header/accordion_header_spec_widget.dart index db02b5ae9..bb70adb49 100644 --- a/packages/remix/lib/src/components/accordion/header/accordion_header_spec_widget.dart +++ b/packages/remix/lib/src/components/accordion/header/accordion_header_spec_widget.dart @@ -24,13 +24,13 @@ class AccordionHeaderSpecWidget extends StatelessWidget { return ContainerWidget( child: FlexWidget( - direction: Axis.horizontal, children: [ if (leadingIcon != null) LeadingIconWidget(leadingIcon), TitleWidget(title), const Spacer(), TrailingIconWidget(trailingIcon), ], + direction: Axis.horizontal, ), ); } diff --git a/packages/remix/lib/src/components/button/button_widget.dart b/packages/remix/lib/src/components/button/button_widget.dart index 1c397ede1..5bf622a20 100644 --- a/packages/remix/lib/src/components/button/button_widget.dart +++ b/packages/remix/lib/src/components/button/button_widget.dart @@ -53,8 +53,6 @@ class Button extends StatelessWidget { final configuration = SpecConfiguration(context, ButtonSpecUtility.self); return Pressable( - enabled: !isDisabled, - onPress: disabled || loading ? null : onPressed, child: SpecBuilder( style: style.makeStyle(configuration).applyVariants([ ...variants, @@ -73,6 +71,8 @@ class Button extends StatelessWidget { ); }, ), + enabled: !isDisabled, + onPress: disabled || loading ? null : onPressed, ); } } @@ -114,13 +114,13 @@ class ButtonSpecWidget extends StatelessWidget { Widget _buildChildren(ButtonSpec spec) { final flexWidget = spec.flex( - direction: Axis.horizontal, children: [ if (iconLeft != null) spec.icon(iconLeft), // If there is no icon always render the label if (label.isNotEmpty || !_hasIcon) spec.label(label), if (iconRight != null) spec.icon(iconRight), ], + direction: Axis.horizontal, ); return loading ? _buildLoadingOverlay(spec, flexWidget) : flexWidget; diff --git a/packages/remix/lib/src/components/callout/callout_widget.dart b/packages/remix/lib/src/components/callout/callout_widget.dart index 1ab33b6cb..d4e864556 100644 --- a/packages/remix/lib/src/components/callout/callout_widget.dart +++ b/packages/remix/lib/src/components/callout/callout_widget.dart @@ -31,8 +31,8 @@ class Callout extends StatelessWidget { return spec.container( child: spec.flex( - direction: Axis.horizontal, children: [if (icon != null) spec.icon(icon!), spec.text(text)], + direction: Axis.horizontal, ), ); }, diff --git a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart index ebe41b1c0..e80a5f7e2 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart @@ -67,9 +67,6 @@ class _CheckboxState extends State { final configuration = SpecConfiguration(context, CheckboxSpecUtility.self); return Pressable( - enabled: !widget.disabled, - onPress: widget.disabled ? null : _handleOnPress, - controller: _controller, child: SpecBuilder( style: style .makeStyle(configuration) @@ -83,7 +80,6 @@ class _CheckboxState extends State { final IconWidget = spec.indicator; return ContainerLayout( - direction: Axis.horizontal, children: [ ContainerWidget( child: IconWidget( @@ -94,9 +90,13 @@ class _CheckboxState extends State { ), if (widget.label != null) spec.label(widget.label!), ], + direction: Axis.horizontal, ); }, ), + enabled: !widget.disabled, + onPress: widget.disabled ? null : _handleOnPress, + controller: _controller, ); } } diff --git a/packages/remix/lib/src/components/chip/chip_widget.dart b/packages/remix/lib/src/components/chip/chip_widget.dart index 0c2af005a..9c4966056 100644 --- a/packages/remix/lib/src/components/chip/chip_widget.dart +++ b/packages/remix/lib/src/components/chip/chip_widget.dart @@ -64,10 +64,6 @@ class _ChipState extends State { final configuration = SpecConfiguration(context, ChipSpecUtility.self); return Pressable( - enabled: !widget.disabled, - onPress: - widget.disabled ? null : () => widget.onChanged?.call(!widget.value), - controller: _controller, child: SpecBuilder( style: style.makeStyle(configuration).applyVariants(widget.variants), builder: (context) { @@ -75,16 +71,20 @@ class _ChipState extends State { return spec.container( child: spec.flex( - direction: Axis.horizontal, children: [ if (widget.iconLeft != null) spec.icon(widget.iconLeft), if (widget.label?.isNotEmpty == true) spec.label(widget.label!), if (widget.iconRight != null) spec.icon(widget.iconRight), ], + direction: Axis.horizontal, ), ); }, ), + enabled: !widget.disabled, + onPress: + widget.disabled ? null : () => widget.onChanged?.call(!widget.value), + controller: _controller, ); } } diff --git a/packages/remix/lib/src/components/dialog/dialog_widget.dart b/packages/remix/lib/src/components/dialog/dialog_widget.dart index ebdb649c0..fd8824bd2 100644 --- a/packages/remix/lib/src/components/dialog/dialog_widget.dart +++ b/packages/remix/lib/src/components/dialog/dialog_widget.dart @@ -42,7 +42,6 @@ class Dialog extends StatelessWidget { return spec.container( child: spec.mainFlex( - direction: Axis.vertical, children: [ if (titleBuilder != null) titleBuilder!(spec.title), if (descriptionBuilder != null) @@ -50,10 +49,11 @@ class Dialog extends StatelessWidget { content ?? const SizedBox.shrink(), if (actions != null) spec.actionsFlex( - direction: Axis.horizontal, children: actions!, + direction: Axis.horizontal, ), ], + direction: Axis.vertical, ), ); }, diff --git a/packages/remix/lib/src/components/icon_button/icon_button_widget.dart b/packages/remix/lib/src/components/icon_button/icon_button_widget.dart index 05fc28b39..14a4c1ee2 100644 --- a/packages/remix/lib/src/components/icon_button/icon_button_widget.dart +++ b/packages/remix/lib/src/components/icon_button/icon_button_widget.dart @@ -47,8 +47,6 @@ class IconButton extends StatelessWidget { SpecConfiguration(context, IconButtonSpecUtility.self); return Pressable( - enabled: !isDisabled, - onPress: disabled || loading ? null : onPressed, child: SpecBuilder( style: style.makeStyle(configuration).applyVariants(variants), builder: (context) { @@ -65,6 +63,8 @@ class IconButton extends StatelessWidget { ); }, ), + enabled: !isDisabled, + onPress: disabled || loading ? null : onPressed, ); } } diff --git a/packages/remix/lib/src/components/menu_item/menu_item_widget.dart b/packages/remix/lib/src/components/menu_item/menu_item_widget.dart index 7f83ed2e1..2a18b47a5 100644 --- a/packages/remix/lib/src/components/menu_item/menu_item_widget.dart +++ b/packages/remix/lib/src/components/menu_item/menu_item_widget.dart @@ -28,8 +28,6 @@ class MenuItem extends StatelessWidget { final configuration = SpecConfiguration(context, MenuItemSpecUtility.self); return Pressable( - enabled: !disabled, - onPress: disabled ? null : onPress, child: SpecBuilder( style: style.makeStyle(configuration).applyVariants([...variants]), builder: (context) { @@ -37,24 +35,26 @@ class MenuItem extends StatelessWidget { return spec.outerContainer( child: spec.contentLayout( - direction: Axis.horizontal, children: [ if (leadingWidgetBuilder != null) leadingWidgetBuilder!(spec.icon), spec.titleSubtitleLayout( - direction: Axis.vertical, children: [ spec.title(title), if (subtitle != null) spec.subtitle(subtitle!), ], + direction: Axis.vertical, ), if (trailingWidgetBuilder != null) trailingWidgetBuilder!(spec.icon), ], + direction: Axis.horizontal, ), ); }, ), + enabled: !disabled, + onPress: disabled ? null : onPress, ); } } diff --git a/packages/remix/lib/src/components/radio/radio_widget.dart b/packages/remix/lib/src/components/radio/radio_widget.dart index 3ee0083d0..07ea3e392 100644 --- a/packages/remix/lib/src/components/radio/radio_widget.dart +++ b/packages/remix/lib/src/components/radio/radio_widget.dart @@ -66,9 +66,6 @@ class _RadioState extends State> { final configuration = SpecConfiguration(context, RadioSpecUtility.self); return Pressable( - enabled: !widget.disabled, - onPress: widget.disabled ? null : _handleOnPress, - controller: _controller, child: SpecBuilder( style: style.makeStyle(configuration).applyVariants(widget.variants), builder: (context) { @@ -80,14 +77,17 @@ class _RadioState extends State> { final TextWidget = spec.text; return FlexWidget( - direction: Axis.horizontal, children: [ ContainerWidget(child: IndicatorWidget()), TextWidget(widget.label), ], + direction: Axis.horizontal, ); }, ), + enabled: !widget.disabled, + onPress: widget.disabled ? null : _handleOnPress, + controller: _controller, ); } } diff --git a/packages/remix/lib/src/components/segmented_control/button/segmented_control_button_widget.dart b/packages/remix/lib/src/components/segmented_control/button/segmented_control_button_widget.dart index 464a9f9e5..d9494d348 100644 --- a/packages/remix/lib/src/components/segmented_control/button/segmented_control_button_widget.dart +++ b/packages/remix/lib/src/components/segmented_control/button/segmented_control_button_widget.dart @@ -20,11 +20,11 @@ class SegmentButton extends StatelessWidget { return container( child: flex( - direction: Axis.horizontal, children: [ if (iconData != null) icon(iconData), if (text != null) label(text!), ], + direction: Axis.horizontal, ), ); }, diff --git a/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart b/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart index 7f271dc9a..1ea5edb1d 100644 --- a/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart +++ b/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart @@ -56,14 +56,12 @@ class _SegmentedControlState extends State { alignment: Alignment.centerLeft, children: [ spec.flex( - direction: Axis.vertical, children: [ for (int i = 0; i < widget.buttons.length; i++) Stack( alignment: Alignment.centerRight, children: [ Pressable( - onPress: () => widget.onIndexChanged(i), child: SpecBuilder( controller: i == widget.index ? controller : null, style: style.makeStyle(configuration), @@ -71,6 +69,7 @@ class _SegmentedControlState extends State { return widget.buttons[i]; }, ), + onPress: () => widget.onIndexChanged(i), ), if (i < lastIndex && spec.showDivider && @@ -80,6 +79,7 @@ class _SegmentedControlState extends State { ], ), ], + direction: Axis.vertical, ), ], ), diff --git a/packages/remix/lib/src/components/select/button/select_button_widget.dart b/packages/remix/lib/src/components/select/button/select_button_widget.dart index 98d63cd23..e2bc955e9 100644 --- a/packages/remix/lib/src/components/select/button/select_button_widget.dart +++ b/packages/remix/lib/src/components/select/button/select_button_widget.dart @@ -26,8 +26,8 @@ class XSelectButtonSpecWidget extends StatelessWidget { return container( child: flex( - direction: Axis.horizontal, children: [label(text), icon(trailingIcon)], + direction: Axis.horizontal, ), ); }, diff --git a/packages/remix/lib/src/components/select/item/select_menu_widget.dart b/packages/remix/lib/src/components/select/item/select_menu_widget.dart index db21d8872..24880dcd5 100644 --- a/packages/remix/lib/src/components/select/item/select_menu_widget.dart +++ b/packages/remix/lib/src/components/select/item/select_menu_widget.dart @@ -24,11 +24,11 @@ class SelectMenuItemWidget extends StatelessWidget { return container( child: flex( - direction: Axis.horizontal, children: [ if (iconData != null) icon(iconData), text(this.text), ], + direction: Axis.horizontal, ), ); }, diff --git a/packages/remix/lib/src/components/select/select_widget.dart b/packages/remix/lib/src/components/select/select_widget.dart index cf4305d8c..e8a3adfac 100644 --- a/packages/remix/lib/src/components/select/select_widget.dart +++ b/packages/remix/lib/src/components/select/select_widget.dart @@ -89,8 +89,8 @@ class SelectState extends State> overlayChildBuilder: (BuildContext context) { return Stack(children: [ GestureDetector( - onTap: () => hide(), child: Container(color: Colors.transparent), + onTap: () => hide(), ), CompositedTransformFollower( link: _link, @@ -119,13 +119,8 @@ class SelectState extends State> return Container( child: Flex( - direction: Axis.vertical, children: widget.items.map((item) { return Pressable( - onPress: () { - widget.onChanged(item.value); - hide(); - }, child: SpecBuilder( style: appliedStyle.animate( duration: _baseAnimation.duration, @@ -135,8 +130,13 @@ class SelectState extends State> return item.child; }, ), + onPress: () { + widget.onChanged(item.value); + hide(); + }, ); }).toList(), + direction: Axis.vertical, ), ); }, @@ -146,9 +146,9 @@ class SelectState extends State> }, child: RepaintBoundary( child: Pressable( + child: widget.button(button), enabled: !widget.disabled, onPress: onTap, - child: widget.button(button), ), ), ), diff --git a/packages/remix/lib/src/components/slider/slider_widget.dart b/packages/remix/lib/src/components/slider/slider_widget.dart index 89cfb2db5..e70070193 100644 --- a/packages/remix/lib/src/components/slider/slider_widget.dart +++ b/packages/remix/lib/src/components/slider/slider_widget.dart @@ -75,31 +75,7 @@ class _SliderState extends State with TickerProviderStateMixin { final configuration = SpecConfiguration(context, SliderSpecUtility.self); return Interactable( - enabled: !widget.disabled, - mouseCursor: widget.disabled - ? SystemMouseCursors.forbidden - : SystemMouseCursors.click, - controller: _controller, child: GestureDetector( - onPanStart: (details) { - _handleInteraction((c) { - c.pressed = true; - final value = _calculateValue(details.localPosition); - widget.onChangeStart?.call(value); - }); - }, - onPanUpdate: (details) { - _handleInteraction((c) { - c.pressed = true; - final value = _calculateValue(details.localPosition); - widget.onChanged?.call(value); - }); - }, - onPanEnd: (details) { - _handleInteraction((c) { - c.pressed = false; - }); - }, child: SpecBuilder( style: style.makeStyle(configuration).applyVariants(widget.variants), builder: (context) { @@ -155,7 +131,31 @@ class _SliderState extends State with TickerProviderStateMixin { ); }, ), + onPanStart: (details) { + _handleInteraction((c) { + c.pressed = true; + final value = _calculateValue(details.localPosition); + widget.onChangeStart?.call(value); + }); + }, + onPanUpdate: (details) { + _handleInteraction((c) { + c.pressed = true; + final value = _calculateValue(details.localPosition); + widget.onChanged?.call(value); + }); + }, + onPanEnd: (details) { + _handleInteraction((c) { + c.pressed = false; + }); + }, ), + enabled: !widget.disabled, + mouseCursor: widget.disabled + ? SystemMouseCursors.forbidden + : SystemMouseCursors.click, + controller: _controller, ); } } diff --git a/packages/remix/lib/src/components/switch/switch_widget.dart b/packages/remix/lib/src/components/switch/switch_widget.dart index 86de7ff22..b2e0f7a6e 100644 --- a/packages/remix/lib/src/components/switch/switch_widget.dart +++ b/packages/remix/lib/src/components/switch/switch_widget.dart @@ -59,9 +59,6 @@ class _SwitchState extends State { final configuration = SpecConfiguration(context, SwitchSpecUtility.self); return Pressable( - enabled: !widget.disabled, - onPress: widget.disabled ? null : _handleOnPress, - controller: _controller, child: SpecBuilder( style: style.makeStyle(configuration).applyVariants(widget.variants), builder: (context) { @@ -73,6 +70,9 @@ class _SwitchState extends State { return containerWidget(child: indicatorWidget()); }, ), + enabled: !widget.disabled, + onPress: widget.disabled ? null : _handleOnPress, + controller: _controller, ); } } diff --git a/packages/remix/lib/src/components/textfield/textfield_widget.dart b/packages/remix/lib/src/components/textfield/textfield_widget.dart index 86fced8ad..8d46dc575 100644 --- a/packages/remix/lib/src/components/textfield/textfield_widget.dart +++ b/packages/remix/lib/src/components/textfield/textfield_widget.dart @@ -520,11 +520,9 @@ class _TextFieldState extends State _effectiveController.value.text.isNotEmpty); return spec.containerLayout( - direction: Axis.vertical, children: [ spec.container( child: spec.contentLayout( - direction: Axis.horizontal, children: [ if (widget.prefixBuilder != null) widget.prefixBuilder!(spec.icon), @@ -621,25 +619,25 @@ class _TextFieldState extends State ), if (widget.suffix != null) widget.suffix!, ], + direction: Axis.horizontal, ), ), spec.helperText(widget.helperText ?? ''), ], + direction: Axis.vertical, ); }, ); return Interactable( - mouseCursor: SystemMouseCursors.text, - controller: _statesController, child: TextFieldTapRegion( child: IgnorePointer( ignoring: widget.ignorePointers ?? !widget.enabled, child: AnimatedBuilder( animation: _effectiveController, builder: (context, child) => _TextFieldContext( - isEmpty: _effectiveController.value.text.isEmpty, child: child!, + isEmpty: _effectiveController.value.text.isEmpty, ), child: _selectionGestureDetectorBuilder.buildGestureDetector( behavior: HitTestBehavior.translucent, @@ -648,6 +646,8 @@ class _TextFieldState extends State ), ), ), + mouseCursor: SystemMouseCursors.text, + controller: _statesController, ); } diff --git a/packages/remix/lib/src/components/toast/toast_layer.dart b/packages/remix/lib/src/components/toast/toast_layer.dart index ebe58804a..61dc8fa22 100644 --- a/packages/remix/lib/src/components/toast/toast_layer.dart +++ b/packages/remix/lib/src/components/toast/toast_layer.dart @@ -54,7 +54,7 @@ class ToastLayerState extends State implements ToastActions { Widget build(BuildContext context) { final toast = currentToast; final alignment = currentToast?.alignment ?? Alignment.bottomCenter; - + final toastWidget = KeyedSubtree( key: UniqueKey(), child: Align( @@ -66,6 +66,7 @@ class ToastLayerState extends State implements ToastActions { return Stack( children: [ AnimatedSwitcher( + child: toastWidget, duration: toast?.animationDuration ?? const Duration(milliseconds: 500), reverseDuration: toast?.reverseAnimationDuration ?? @@ -96,7 +97,6 @@ class ToastLayerState extends State implements ToastActions { child: FadeTransition(opacity: animation, child: child), ); }, - child: toastWidget, ), widget.child, ], diff --git a/packages/remix/lib/src/components/toast/toast_widget.dart b/packages/remix/lib/src/components/toast/toast_widget.dart index 243b0a6d5..a26c32266 100644 --- a/packages/remix/lib/src/components/toast/toast_widget.dart +++ b/packages/remix/lib/src/components/toast/toast_widget.dart @@ -31,18 +31,18 @@ class Toast extends StatelessWidget { return spec.container( child: spec.containerFlex( - direction: Axis.horizontal, children: [ if (leading != null) leading!, spec.textContentFlex( - direction: Axis.vertical, children: [ spec.title(title), if (description != null) spec.description(description!), ], + direction: Axis.vertical, ), if (trailing != null) trailing!, ], + direction: Axis.horizontal, ), ); }, diff --git a/packages/remix/lib/src/theme/remix_theme.dart b/packages/remix/lib/src/theme/remix_theme.dart index 3384b8941..107b45af6 100644 --- a/packages/remix/lib/src/theme/remix_theme.dart +++ b/packages/remix/lib/src/theme/remix_theme.dart @@ -311,13 +311,13 @@ class RemixTheme extends StatelessWidget { final tokens = theme.tokens; return MixTheme( + child: _RemixThemeInherited(child: child, data: theme), data: MixThemeData( colors: tokens.colors, spaces: tokens.spaces, textStyles: tokens.textStyles, radii: tokens.radii, ), - child: _RemixThemeInherited(data: theme, child: child), ); } } From 62b14c0fe644972068b420c762b099b90ff89321 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Thu, 14 Nov 2024 13:26:55 -0300 Subject: [PATCH 06/57] remove flex alias --- .../lib/src/specs/flexbox/flexbox_spec.dart | 20 +++---------- .../lib/src/specs/flexbox/flexbox_spec.g.dart | 30 ++++--------------- 2 files changed, 10 insertions(+), 40 deletions(-) diff --git a/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart b/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart index 2cf2dc94b..0d20adb6c 100644 --- a/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart +++ b/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart @@ -28,6 +28,7 @@ const _boxUtility = MixableUtility( (path: 'constraints.maxWidth', alias: 'maxWidth'), (path: 'constraints.minHeight', alias: 'minHeight'), (path: 'constraints.maxHeight', alias: 'maxHeight'), + (path: 'decoration', alias: 'decoration'), (path: 'decoration.color', alias: 'color'), (path: 'decoration.border', alias: 'border'), (path: 'decoration.border.directional', alias: 'borderDirectional'), @@ -43,6 +44,7 @@ const _boxUtility = MixableUtility( (path: 'decoration.boxShadows', alias: 'shadows'), (path: 'decoration.boxShadow', alias: 'shadow'), (path: 'decoration.elevation', alias: 'elevation'), + (path: 'shapeDecoration', alias: 'shapeDecoration'), (path: 'shape', alias: 'shape'), (path: 'foregroundDecoration', alias: 'foregroundDecoration'), (path: 'transform', alias: 'transform'), @@ -53,26 +55,12 @@ const _boxUtility = MixableUtility( ], ); -const _flexUtility = MixableUtility( - properties: [ - (path: 'direction', alias: 'direction'), - (path: 'mainAxisAlignment', alias: 'mainAxisAlignment'), - (path: 'crossAxisAlignment', alias: 'crossAxisAlignment'), - (path: 'mainAxisSize', alias: 'mainAxisSize'), - (path: 'verticalDirection', alias: 'verticalDirection'), - (path: 'textDirection', alias: 'textDirection'), - (path: 'textBaseline', alias: 'textBaseline'), - (path: 'gap', alias: 'gap'), - ], -); - @MixableSpec() final class FlexBoxSpec extends Spec with _$FlexBoxSpec, Diagnosticable { @MixableProperty(utilities: [_boxUtility]) final BoxSpec box; - @MixableProperty(utilities: [_flexUtility]) final FlexSpec flex; static const of = _$FlexBoxSpec.of; @@ -90,16 +78,16 @@ final class FlexBoxSpec extends Spec return (isAnimated) ? AnimatedFlexBoxSpecWidget( spec: this, - children: children, direction: direction, curve: animated!.curve, duration: animated!.duration, onEnd: animated!.onEnd, + children: children, ) : FlexBoxSpecWidget( spec: this, - children: children, direction: direction, + children: children, ); } diff --git a/packages/mix/lib/src/specs/flexbox/flexbox_spec.g.dart b/packages/mix/lib/src/specs/flexbox/flexbox_spec.g.dart index 060a48bcf..fcb879d8e 100644 --- a/packages/mix/lib/src/specs/flexbox/flexbox_spec.g.dart +++ b/packages/mix/lib/src/specs/flexbox/flexbox_spec.g.dart @@ -221,6 +221,9 @@ class FlexBoxSpecUtility /// Utility for defining [FlexBoxSpecAttribute.box.constraints.maxHeight] late final maxHeight = box.constraints.maxHeight; + /// Utility for defining [FlexBoxSpecAttribute.box.decoration] + late final decoration = box.decoration; + /// Utility for defining [FlexBoxSpecAttribute.box.decoration.color] late final color = box.decoration.color; @@ -257,6 +260,9 @@ class FlexBoxSpecUtility /// Utility for defining [FlexBoxSpecAttribute.box.decoration.elevation] late final elevation = box.decoration.elevation; + /// Utility for defining [FlexBoxSpecAttribute.box.shapeDecoration] + late final shapeDecoration = box.shapeDecoration; + /// Utility for defining [FlexBoxSpecAttribute.box.shape] late final shape = box.shape; @@ -281,30 +287,6 @@ class FlexBoxSpecUtility /// Utility for defining [FlexBoxSpecAttribute.flex] late final flex = FlexSpecUtility((v) => only(flex: v)); - /// Utility for defining [FlexBoxSpecAttribute.flex.direction] - late final direction = flex.direction; - - /// Utility for defining [FlexBoxSpecAttribute.flex.mainAxisAlignment] - late final mainAxisAlignment = flex.mainAxisAlignment; - - /// Utility for defining [FlexBoxSpecAttribute.flex.crossAxisAlignment] - late final crossAxisAlignment = flex.crossAxisAlignment; - - /// Utility for defining [FlexBoxSpecAttribute.flex.mainAxisSize] - late final mainAxisSize = flex.mainAxisSize; - - /// Utility for defining [FlexBoxSpecAttribute.flex.verticalDirection] - late final verticalDirection = flex.verticalDirection; - - /// Utility for defining [FlexBoxSpecAttribute.flex.textDirection] - late final textDirection = flex.textDirection; - - /// Utility for defining [FlexBoxSpecAttribute.flex.textBaseline] - late final textBaseline = flex.textBaseline; - - /// Utility for defining [FlexBoxSpecAttribute.flex.gap] - late final gap = flex.gap; - FlexBoxSpecUtility(super.builder, {super.mutable}); FlexBoxSpecUtility get chain => From 26a1dfe1a4955a979fc577041d341b5ad438c055 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Thu, 14 Nov 2024 13:56:23 -0300 Subject: [PATCH 07/57] implement flexbox in the remix --- .../lib/src/specs/flexbox/flexbox_spec.dart | 1 + .../lib/src/helpers/type_ref_repository.dart | 2 + .../lib/src/components/button/button.dart | 9 ++-- .../lib/src/components/button/button.g.dart | 51 ++++++------------- .../src/components/button/button_style.dart | 25 ++++----- .../src/components/button/button_theme.dart | 42 +++++++-------- .../src/components/button/button_widget.dart | 10 ++-- .../components/button/button_widget_test.dart | 2 +- 8 files changed, 59 insertions(+), 83 deletions(-) diff --git a/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart b/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart index 0d20adb6c..07cb78f3e 100644 --- a/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart +++ b/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart @@ -55,6 +55,7 @@ const _boxUtility = MixableUtility( ], ); +//TODO: Find a way to reuse as much code as possible from the FlexSpec and BoxSpec @MixableSpec() final class FlexBoxSpec extends Spec with _$FlexBoxSpec, Diagnosticable { diff --git a/packages/mix_generator/lib/src/helpers/type_ref_repository.dart b/packages/mix_generator/lib/src/helpers/type_ref_repository.dart index 54f033372..07dc4f8f3 100644 --- a/packages/mix_generator/lib/src/helpers/type_ref_repository.dart +++ b/packages/mix_generator/lib/src/helpers/type_ref_repository.dart @@ -1,4 +1,5 @@ import 'package:analyzer/dart/element/type.dart'; + import 'builder_utils.dart'; import 'helpers.dart'; @@ -44,6 +45,7 @@ class TypeRefRepository { 'TextSpec': 'TextSpecAttribute', 'ImageSpec': 'ImageSpecAttribute', 'IconSpec': 'IconSpecAttribute', + 'FlexBoxSpec': 'FlexBoxSpecAttribute', 'StackSpec': 'StackSpecAttribute', }; diff --git a/packages/remix/lib/src/components/button/button.dart b/packages/remix/lib/src/components/button/button.dart index 486d3e131..5f96bae3f 100644 --- a/packages/remix/lib/src/components/button/button.dart +++ b/packages/remix/lib/src/components/button/button.dart @@ -16,8 +16,7 @@ part 'button_widget.dart'; @MixableSpec() class ButtonSpec extends Spec with _$ButtonSpec, Diagnosticable { - final FlexSpec flex; - final BoxSpec container; + final FlexBoxSpec flexbox; final IconSpec icon; final TextSpec label; @@ -30,15 +29,13 @@ class ButtonSpec extends Spec with _$ButtonSpec, Diagnosticable { static const from = _$ButtonSpec.from; const ButtonSpec({ - BoxSpec? container, - FlexSpec? flex, + FlexBoxSpec? flexbox, IconSpec? icon, TextSpec? label, super.modifiers, SpinnerSpec? spinner, super.animated, - }) : flex = flex ?? const FlexSpec(), - container = container ?? const BoxSpec(), + }) : flexbox = flexbox ?? const FlexBoxSpec(), icon = icon ?? const IconSpec(), label = label ?? const TextSpec(), spinner = spinner ?? const SpinnerSpec(); diff --git a/packages/remix/lib/src/components/button/button.g.dart b/packages/remix/lib/src/components/button/button.g.dart index 27b9cd3e2..c6b475596 100644 --- a/packages/remix/lib/src/components/button/button.g.dart +++ b/packages/remix/lib/src/components/button/button.g.dart @@ -33,8 +33,7 @@ mixin _$ButtonSpec on Spec { /// replaced with the new values. @override ButtonSpec copyWith({ - BoxSpec? container, - FlexSpec? flex, + FlexBoxSpec? flexbox, IconSpec? icon, TextSpec? label, WidgetModifiersData? modifiers, @@ -42,8 +41,7 @@ mixin _$ButtonSpec on Spec { AnimatedData? animated, }) { return ButtonSpec( - container: container ?? _$this.container, - flex: flex ?? _$this.flex, + flexbox: flexbox ?? _$this.flexbox, icon: icon ?? _$this.icon, label: label ?? _$this.label, modifiers: modifiers ?? _$this.modifiers, @@ -63,8 +61,7 @@ mixin _$ButtonSpec on Spec { /// The interpolation is performed on each property of the [ButtonSpec] using the appropriate /// interpolation method: /// - /// - [BoxSpec.lerp] for [container]. - /// - [FlexSpec.lerp] for [flex]. + /// - [FlexBoxSpec.lerp] for [flexbox]. /// - [IconSpec.lerp] for [icon]. /// - [TextSpec.lerp] for [label]. @@ -79,8 +76,7 @@ mixin _$ButtonSpec on Spec { if (other == null) return _$this; return ButtonSpec( - container: _$this.container.lerp(other.container, t), - flex: _$this.flex.lerp(other.flex, t), + flexbox: _$this.flexbox.lerp(other.flexbox, t), icon: _$this.icon.lerp(other.icon, t), label: _$this.label.lerp(other.label, t), modifiers: other.modifiers, @@ -95,8 +91,7 @@ mixin _$ButtonSpec on Spec { /// compare two [ButtonSpec] instances for equality. @override List get props => [ - _$this.container, - _$this.flex, + _$this.flexbox, _$this.icon, _$this.label, _$this.modifiers, @@ -108,9 +103,7 @@ mixin _$ButtonSpec on Spec { void _debugFillProperties(DiagnosticPropertiesBuilder properties) { properties.add( - DiagnosticsProperty('container', _$this.container, defaultValue: null)); - properties - .add(DiagnosticsProperty('flex', _$this.flex, defaultValue: null)); + DiagnosticsProperty('flexbox', _$this.flexbox, defaultValue: null)); properties .add(DiagnosticsProperty('icon', _$this.icon, defaultValue: null)); properties @@ -133,15 +126,13 @@ mixin _$ButtonSpec on Spec { /// the [ButtonSpec] constructor. class ButtonSpecAttribute extends SpecAttribute with Diagnosticable { - final BoxSpecAttribute? container; - final FlexSpecAttribute? flex; + final FlexBoxSpecAttribute? flexbox; final IconSpecAttribute? icon; final TextSpecAttribute? label; final SpinnerSpecAttribute? spinner; const ButtonSpecAttribute({ - this.container, - this.flex, + this.flexbox, this.icon, this.label, super.modifiers, @@ -160,8 +151,7 @@ class ButtonSpecAttribute extends SpecAttribute @override ButtonSpec resolve(MixData mix) { return ButtonSpec( - container: container?.resolve(mix), - flex: flex?.resolve(mix), + flexbox: flexbox?.resolve(mix), icon: icon?.resolve(mix), label: label?.resolve(mix), modifiers: modifiers?.resolve(mix), @@ -183,8 +173,7 @@ class ButtonSpecAttribute extends SpecAttribute if (other == null) return this; return ButtonSpecAttribute( - container: container?.merge(other.container) ?? other.container, - flex: flex?.merge(other.flex) ?? other.flex, + flexbox: flexbox?.merge(other.flexbox) ?? other.flexbox, icon: icon?.merge(other.icon) ?? other.icon, label: label?.merge(other.label) ?? other.label, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, @@ -199,8 +188,7 @@ class ButtonSpecAttribute extends SpecAttribute /// compare two [ButtonSpecAttribute] instances for equality. @override List get props => [ - container, - flex, + flexbox, icon, label, modifiers, @@ -211,9 +199,7 @@ class ButtonSpecAttribute extends SpecAttribute @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); - properties - .add(DiagnosticsProperty('container', container, defaultValue: null)); - properties.add(DiagnosticsProperty('flex', flex, defaultValue: null)); + properties.add(DiagnosticsProperty('flexbox', flexbox, defaultValue: null)); properties.add(DiagnosticsProperty('icon', icon, defaultValue: null)); properties.add(DiagnosticsProperty('label', label, defaultValue: null)); properties @@ -230,11 +216,8 @@ class ButtonSpecAttribute extends SpecAttribute /// Use the methods of this class to configure specific properties of a [ButtonSpec]. class ButtonSpecUtility extends SpecUtility { - /// Utility for defining [ButtonSpecAttribute.container] - late final container = BoxSpecUtility((v) => only(container: v)); - - /// Utility for defining [ButtonSpecAttribute.flex] - late final flex = FlexSpecUtility((v) => only(flex: v)); + /// Utility for defining [ButtonSpecAttribute.flexbox] + late final flexbox = FlexBoxSpecUtility((v) => only(flexbox: v)); /// Utility for defining [ButtonSpecAttribute.icon] late final icon = IconSpecUtility((v) => only(icon: v)); @@ -262,8 +245,7 @@ class ButtonSpecUtility /// Returns a new [ButtonSpecAttribute] with the specified properties. @override T only({ - BoxSpecAttribute? container, - FlexSpecAttribute? flex, + FlexBoxSpecAttribute? flexbox, IconSpecAttribute? icon, TextSpecAttribute? label, WidgetModifiersDataDto? modifiers, @@ -271,8 +253,7 @@ class ButtonSpecUtility AnimatedDataDto? animated, }) { return builder(ButtonSpecAttribute( - container: container, - flex: flex, + flexbox: flexbox, icon: icon, label: label, modifiers: modifiers, diff --git a/packages/remix/lib/src/components/button/button_style.dart b/packages/remix/lib/src/components/button/button_style.dart index 9d8c69f97..68b2cfb6f 100644 --- a/packages/remix/lib/src/components/button/button_style.dart +++ b/packages/remix/lib/src/components/button/button_style.dart @@ -7,14 +7,6 @@ class ButtonStyle extends SpecStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final flexStyle = [ - $.flex.chain - ..mainAxisAlignment.center() - ..crossAxisAlignment.center() - ..mainAxisSize.min() - ..gap(8), - ]; - final iconStyle = [ $.icon.chain ..size(24) @@ -38,20 +30,23 @@ class ButtonStyle extends SpecStyle { ..color.white(), ]; - final containerStyle = [ - $.container.chain + final flexboxStyle = [ + $.flexbox.chain ..borderRadius(6) ..color.black() ..padding.vertical(8) - ..padding.horizontal(12), - spec.on.disabled($.container.color.grey.shade400()), + ..padding.horizontal(12) + ..flex.mainAxisAlignment.center() + ..flex.crossAxisAlignment.center() + ..flex.mainAxisSize.min() + ..flex.gap(8), + spec.on.disabled($.flexbox.color.grey.shade400()), ]; return Style.create([ - ...flexStyle, + ...flexboxStyle, ...iconStyle, ...labelStyle, - ...containerStyle, ...spinnerStyle, ]); } @@ -66,7 +61,7 @@ class ButtonDarkStyle extends ButtonStyle { return Style.create([ super.makeStyle(spec).call(), - $.container.color.white(), + $.flexbox.color.white(), $.label.style.color.black(), ]); } diff --git a/packages/remix/lib/src/components/button/button_theme.dart b/packages/remix/lib/src/components/button/button_theme.dart index a4f63570c..25ba09924 100644 --- a/packages/remix/lib/src/components/button/button_theme.dart +++ b/packages/remix/lib/src/components/button/button_theme.dart @@ -17,17 +17,17 @@ class FortalezaButtonStyle extends ButtonStyle { final baseStyle = super.makeStyle(spec); final baseOverrides = Style( baseStyle(), - $.container.chain + $.flexbox.chain ..padding.vertical.$space(2) - ..padding.horizontal.$space(3), - $.flex.gap.$space(2), + ..padding.horizontal.$space(3) + ..flex.gap.$space(2), $.label.style.$text(2), $.icon.size(14), $.spinner.size(14), ); final onDisabledForeground = $on.disabled( - $.container.color.$neutral(7), + $.flexbox.color.$neutral(7), $.label.style.color.$neutral(8), $.icon.color.$neutral(8), $.spinner.color.$neutral(7), @@ -36,25 +36,25 @@ class FortalezaButtonStyle extends ButtonStyle { final spinnerDisabled = $.spinner.color.$neutralAlpha(7); final solidVariant = Style( - $.container.color.$accent(), + $.flexbox.color.$accent(), $.label.style.color.white(), $.spinner.color.white(), $.icon.color.white(), - spec.on.hover($.container.color.$accent(10)), - spec.on.disabled($.container.color.$neutralAlpha(3), spinnerDisabled), + spec.on.hover($.flexbox.color.$accent(10)), + spec.on.disabled($.flexbox.color.$neutralAlpha(3), spinnerDisabled), ); final softVariant = Style( - $.container.color.$accentAlpha(3), + $.flexbox.color.$accentAlpha(3), $.label.style.color.$accentAlpha(11), $.spinner.color.$accentAlpha(11), $.icon.color.$accentAlpha(11), - spec.on.hover($.container.color.$accentAlpha(4)), - spec.on.disabled($.container.color.$neutralAlpha(3)), + spec.on.hover($.flexbox.color.$accentAlpha(4)), + spec.on.disabled($.flexbox.color.$neutralAlpha(3)), ); final outlineVariant = Style( - $.container.chain + $.flexbox.chain ..color.transparent() ..border.width(1) ..border.strokeAlign(0) @@ -62,9 +62,9 @@ class FortalezaButtonStyle extends ButtonStyle { $.spinner.color.$accentAlpha(11), $.icon.color.$accentAlpha(11), $.label.style.color.$accentAlpha(11), - spec.on.hover($.container.color.$accentAlpha(2)), + spec.on.hover($.flexbox.color.$accentAlpha(2)), spec.on.disabled( - $.container.chain + $.flexbox.chain ..border.color.$neutralAlpha(8) ..color.transparent(), ), @@ -72,22 +72,22 @@ class FortalezaButtonStyle extends ButtonStyle { final surfaceVariant = Style( outlineVariant(), - $.container.color.$accentAlpha(3), + $.flexbox.color.$accentAlpha(3), spec.on.hover( - $.container.color.$accentAlpha(4), - $.container.border.color.$accentAlpha(8), + $.flexbox.color.$accentAlpha(4), + $.flexbox.border.color.$accentAlpha(8), ), - spec.on.disabled($.container.color.$neutral(1)), + spec.on.disabled($.flexbox.color.$neutral(1)), ); final ghostVariant = Style( - $.container.border.style.none(), - $.container.color.transparent(), + $.flexbox.border.style.none(), + $.flexbox.color.transparent(), $.spinner.color.$accentAlpha(11), $.icon.color.$accentAlpha(11), $.label.style.color.$accentAlpha(11), - spec.on.hover($.container.color.$accentAlpha(3)), - spec.on.disabled($.container.color.transparent()), + spec.on.hover($.flexbox.color.$accentAlpha(3)), + spec.on.disabled($.flexbox.color.transparent()), ); return Style.create( diff --git a/packages/remix/lib/src/components/button/button_widget.dart b/packages/remix/lib/src/components/button/button_widget.dart index 5bf622a20..4d7ac5bb3 100644 --- a/packages/remix/lib/src/components/button/button_widget.dart +++ b/packages/remix/lib/src/components/button/button_widget.dart @@ -53,6 +53,8 @@ class Button extends StatelessWidget { final configuration = SpecConfiguration(context, ButtonSpecUtility.self); return Pressable( + enabled: !isDisabled, + onPress: disabled || loading ? null : onPressed, child: SpecBuilder( style: style.makeStyle(configuration).applyVariants([ ...variants, @@ -71,8 +73,6 @@ class Button extends StatelessWidget { ); }, ), - enabled: !isDisabled, - onPress: disabled || loading ? null : onPressed, ); } } @@ -113,7 +113,7 @@ class ButtonSpecWidget extends StatelessWidget { } Widget _buildChildren(ButtonSpec spec) { - final flexWidget = spec.flex( + final flexboxWidget = spec.flexbox( children: [ if (iconLeft != null) spec.icon(iconLeft), // If there is no icon always render the label @@ -123,13 +123,13 @@ class ButtonSpecWidget extends StatelessWidget { direction: Axis.horizontal, ); - return loading ? _buildLoadingOverlay(spec, flexWidget) : flexWidget; + return loading ? _buildLoadingOverlay(spec, flexboxWidget) : flexboxWidget; } @override Widget build(BuildContext context) { final spec = this.spec ?? const ButtonSpec(); - return spec.container(child: _buildChildren(spec)); + return _buildChildren(spec); } } diff --git a/packages/remix/test/components/button/button_widget_test.dart b/packages/remix/test/components/button/button_widget_test.dart index 155ae50fe..af7e082f6 100644 --- a/packages/remix/test/components/button/button_widget_test.dart +++ b/packages/remix/test/components/button/button_widget_test.dart @@ -170,7 +170,7 @@ class FakeButtonStyle extends ButtonStyle { final baseStyle = super.makeStyle(spec); return Style.create([ baseStyle(), - $.container.color(color), + $.flexbox.color(color), ]); } } From 11eb9e00af8cbd18295d6786937bc886795f9973 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Thu, 14 Nov 2024 13:58:13 -0300 Subject: [PATCH 08/57] lint --- .../mix/lib/src/widgets/pressable_widget.dart | 44 +++++++++---------- .../accordion/accordion_widget.dart | 4 +- .../components/checkbox/checkbox_widget.dart | 6 +-- .../lib/src/components/chip/chip_widget.dart | 8 ++-- .../icon_button/icon_button_widget.dart | 4 +- .../menu_item/menu_item_widget.dart | 4 +- .../src/components/radio/radio_widget.dart | 6 +-- .../segmented_control_widget.dart | 2 +- .../src/components/select/select_widget.dart | 10 ++--- .../src/components/switch/switch_widget.dart | 6 +-- 10 files changed, 47 insertions(+), 47 deletions(-) diff --git a/packages/mix/lib/src/widgets/pressable_widget.dart b/packages/mix/lib/src/widgets/pressable_widget.dart index 89d47be7b..ff13307b8 100644 --- a/packages/mix/lib/src/widgets/pressable_widget.dart +++ b/packages/mix/lib/src/widgets/pressable_widget.dart @@ -55,7 +55,6 @@ class PressableBox extends StatelessWidget { @override Widget build(BuildContext context) { return Pressable( - child: Box(style: style, child: child), enabled: enabled, onPress: onPress, hitTestBehavior: hitTestBehavior, @@ -64,6 +63,7 @@ class PressableBox extends StatelessWidget { autofocus: autofocus, focusNode: focusNode, unpressDelay: unpressDelay, + child: Box(style: style, child: child), ); } } @@ -71,7 +71,6 @@ class PressableBox extends StatelessWidget { class Pressable extends StatefulWidget { const Pressable({ super.key, - required this.child, this.enabled = true, this.enableFeedback = false, this.onPress, @@ -89,6 +88,7 @@ class Pressable extends StatefulWidget { this.unpressDelay = kDefaultAnimationDuration, this.controller, this.actions, + required this.child, }); final Widget child; @@ -197,13 +197,14 @@ class PressableWidgetState extends State { @override Widget build(BuildContext context) { Widget current = GestureMixStateWidget( + enableFeedback: widget.enableFeedback, + controller: _controller, + onTap: widget.enabled ? widget.onPress?.call : null, + onLongPress: widget.enabled ? widget.onLongPress?.call : null, + excludeFromSemantics: widget.excludeFromSemantics, + hitTestBehavior: widget.hitTestBehavior, + unpressDelay: widget.unpressDelay, child: InteractiveMixStateWidget( - child: MouseRegionMixStateWidget( - child: MixWidgetStateBuilder( - controller: _controller, - builder: (_) => widget.child, - ), - ), enabled: widget.enabled, onFocusChange: widget.onFocusChange, autofocus: widget.autofocus, @@ -214,22 +215,21 @@ class PressableWidgetState extends State { mouseCursor: mouseCursor, controller: _controller, actions: actions, + child: MouseRegionMixStateWidget( + child: MixWidgetStateBuilder( + controller: _controller, + builder: (_) => widget.child, + ), + ), ), - enableFeedback: widget.enableFeedback, - controller: _controller, - onTap: widget.enabled ? widget.onPress?.call : null, - onLongPress: widget.enabled ? widget.onLongPress?.call : null, - excludeFromSemantics: widget.excludeFromSemantics, - hitTestBehavior: widget.hitTestBehavior, - unpressDelay: widget.unpressDelay, ); if (!widget.excludeFromSemantics) { current = Semantics( - child: current, button: true, label: widget.semanticButtonLabel, onTap: widget.onPress, + child: current, ); } @@ -308,12 +308,6 @@ class _InteractableState extends State { @override Widget build(BuildContext context) { return InteractiveMixStateWidget( - child: MouseRegionMixStateWidget( - child: MixWidgetStateBuilder( - controller: _controller, - builder: (context) => widget.child, - ), - ), enabled: widget.enabled, onFocusChange: widget.onFocusChange, autofocus: widget.autofocus, @@ -327,6 +321,12 @@ class _InteractableState extends State { shortcuts: widget.shortcuts, controller: _controller, actions: widget.actions, + child: MouseRegionMixStateWidget( + child: MixWidgetStateBuilder( + controller: _controller, + builder: (context) => widget.child, + ), + ), ); } } diff --git a/packages/remix/lib/src/components/accordion/accordion_widget.dart b/packages/remix/lib/src/components/accordion/accordion_widget.dart index e20391bcb..75b55890e 100644 --- a/packages/remix/lib/src/components/accordion/accordion_widget.dart +++ b/packages/remix/lib/src/components/accordion/accordion_widget.dart @@ -68,6 +68,8 @@ class _AccordionState extends State with TickerProviderStateMixin { child: spec.flex( children: [ Pressable( + onPress: _handleTap, + controller: _controller, child: SpecBuilder( style: variantStyle, builder: (context) { @@ -76,8 +78,6 @@ class _AccordionState extends State with TickerProviderStateMixin { return widget.header(spec.header); }, ), - onPress: _handleTap, - controller: _controller, ), content, ], diff --git a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart index e80a5f7e2..afecc38bf 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart @@ -67,6 +67,9 @@ class _CheckboxState extends State { final configuration = SpecConfiguration(context, CheckboxSpecUtility.self); return Pressable( + enabled: !widget.disabled, + onPress: widget.disabled ? null : _handleOnPress, + controller: _controller, child: SpecBuilder( style: style .makeStyle(configuration) @@ -94,9 +97,6 @@ class _CheckboxState extends State { ); }, ), - enabled: !widget.disabled, - onPress: widget.disabled ? null : _handleOnPress, - controller: _controller, ); } } diff --git a/packages/remix/lib/src/components/chip/chip_widget.dart b/packages/remix/lib/src/components/chip/chip_widget.dart index 9c4966056..e32b25d02 100644 --- a/packages/remix/lib/src/components/chip/chip_widget.dart +++ b/packages/remix/lib/src/components/chip/chip_widget.dart @@ -64,6 +64,10 @@ class _ChipState extends State { final configuration = SpecConfiguration(context, ChipSpecUtility.self); return Pressable( + enabled: !widget.disabled, + onPress: + widget.disabled ? null : () => widget.onChanged?.call(!widget.value), + controller: _controller, child: SpecBuilder( style: style.makeStyle(configuration).applyVariants(widget.variants), builder: (context) { @@ -81,10 +85,6 @@ class _ChipState extends State { ); }, ), - enabled: !widget.disabled, - onPress: - widget.disabled ? null : () => widget.onChanged?.call(!widget.value), - controller: _controller, ); } } diff --git a/packages/remix/lib/src/components/icon_button/icon_button_widget.dart b/packages/remix/lib/src/components/icon_button/icon_button_widget.dart index 14a4c1ee2..05fc28b39 100644 --- a/packages/remix/lib/src/components/icon_button/icon_button_widget.dart +++ b/packages/remix/lib/src/components/icon_button/icon_button_widget.dart @@ -47,6 +47,8 @@ class IconButton extends StatelessWidget { SpecConfiguration(context, IconButtonSpecUtility.self); return Pressable( + enabled: !isDisabled, + onPress: disabled || loading ? null : onPressed, child: SpecBuilder( style: style.makeStyle(configuration).applyVariants(variants), builder: (context) { @@ -63,8 +65,6 @@ class IconButton extends StatelessWidget { ); }, ), - enabled: !isDisabled, - onPress: disabled || loading ? null : onPressed, ); } } diff --git a/packages/remix/lib/src/components/menu_item/menu_item_widget.dart b/packages/remix/lib/src/components/menu_item/menu_item_widget.dart index 2a18b47a5..515d86beb 100644 --- a/packages/remix/lib/src/components/menu_item/menu_item_widget.dart +++ b/packages/remix/lib/src/components/menu_item/menu_item_widget.dart @@ -28,6 +28,8 @@ class MenuItem extends StatelessWidget { final configuration = SpecConfiguration(context, MenuItemSpecUtility.self); return Pressable( + enabled: !disabled, + onPress: disabled ? null : onPress, child: SpecBuilder( style: style.makeStyle(configuration).applyVariants([...variants]), builder: (context) { @@ -53,8 +55,6 @@ class MenuItem extends StatelessWidget { ); }, ), - enabled: !disabled, - onPress: disabled ? null : onPress, ); } } diff --git a/packages/remix/lib/src/components/radio/radio_widget.dart b/packages/remix/lib/src/components/radio/radio_widget.dart index 07ea3e392..a07fbe4ae 100644 --- a/packages/remix/lib/src/components/radio/radio_widget.dart +++ b/packages/remix/lib/src/components/radio/radio_widget.dart @@ -66,6 +66,9 @@ class _RadioState extends State> { final configuration = SpecConfiguration(context, RadioSpecUtility.self); return Pressable( + enabled: !widget.disabled, + onPress: widget.disabled ? null : _handleOnPress, + controller: _controller, child: SpecBuilder( style: style.makeStyle(configuration).applyVariants(widget.variants), builder: (context) { @@ -85,9 +88,6 @@ class _RadioState extends State> { ); }, ), - enabled: !widget.disabled, - onPress: widget.disabled ? null : _handleOnPress, - controller: _controller, ); } } diff --git a/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart b/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart index 1ea5edb1d..657ff1083 100644 --- a/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart +++ b/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart @@ -62,6 +62,7 @@ class _SegmentedControlState extends State { alignment: Alignment.centerRight, children: [ Pressable( + onPress: () => widget.onIndexChanged(i), child: SpecBuilder( controller: i == widget.index ? controller : null, style: style.makeStyle(configuration), @@ -69,7 +70,6 @@ class _SegmentedControlState extends State { return widget.buttons[i]; }, ), - onPress: () => widget.onIndexChanged(i), ), if (i < lastIndex && spec.showDivider && diff --git a/packages/remix/lib/src/components/select/select_widget.dart b/packages/remix/lib/src/components/select/select_widget.dart index e8a3adfac..3be4528fb 100644 --- a/packages/remix/lib/src/components/select/select_widget.dart +++ b/packages/remix/lib/src/components/select/select_widget.dart @@ -121,6 +121,10 @@ class SelectState extends State> child: Flex( children: widget.items.map((item) { return Pressable( + onPress: () { + widget.onChanged(item.value); + hide(); + }, child: SpecBuilder( style: appliedStyle.animate( duration: _baseAnimation.duration, @@ -130,10 +134,6 @@ class SelectState extends State> return item.child; }, ), - onPress: () { - widget.onChanged(item.value); - hide(); - }, ); }).toList(), direction: Axis.vertical, @@ -146,9 +146,9 @@ class SelectState extends State> }, child: RepaintBoundary( child: Pressable( - child: widget.button(button), enabled: !widget.disabled, onPress: onTap, + child: widget.button(button), ), ), ), diff --git a/packages/remix/lib/src/components/switch/switch_widget.dart b/packages/remix/lib/src/components/switch/switch_widget.dart index b2e0f7a6e..86de7ff22 100644 --- a/packages/remix/lib/src/components/switch/switch_widget.dart +++ b/packages/remix/lib/src/components/switch/switch_widget.dart @@ -59,6 +59,9 @@ class _SwitchState extends State { final configuration = SpecConfiguration(context, SwitchSpecUtility.self); return Pressable( + enabled: !widget.disabled, + onPress: widget.disabled ? null : _handleOnPress, + controller: _controller, child: SpecBuilder( style: style.makeStyle(configuration).applyVariants(widget.variants), builder: (context) { @@ -70,9 +73,6 @@ class _SwitchState extends State { return containerWidget(child: indicatorWidget()); }, ), - enabled: !widget.disabled, - onPress: widget.disabled ? null : _handleOnPress, - controller: _controller, ); } } From fc40ee66d83ac4991e72a5de027ea7b2a82de602 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Thu, 14 Nov 2024 14:02:52 -0300 Subject: [PATCH 09/57] lint: child and children as last --- lints_with_dcm.yaml | 4 +- .../src/core/factory/style_widgets_ext.dart | 2 +- packages/mix/lib/src/core/styled_widget.dart | 6 +-- .../internal/gesture_mix_state.dart | 2 +- .../internal/render_widget_modifier.dart | 8 ++-- .../scroll_view_widget_modifier.dart | 2 +- .../modifiers/visibility_widget_modifier.dart | 2 +- packages/mix/lib/src/specs/box/box_spec.dart | 4 +- .../mix/lib/src/specs/box/box_widget.dart | 4 +- .../mix/lib/src/specs/flex/flex_spec.dart | 4 +- .../mix/lib/src/specs/flex/flex_widget.dart | 6 +-- .../lib/src/specs/flexbox/flexbox_widget.dart | 8 ++-- .../mix/lib/src/specs/icon/icon_widget.dart | 2 +- .../mix/lib/src/specs/image/image_widget.dart | 2 +- .../mix/lib/src/specs/stack/stack_spec.dart | 2 +- .../mix/lib/src/specs/stack/stack_widget.dart | 4 +- .../mix/lib/src/specs/text/text_widget.dart | 2 +- ...ining_tokens_or_variants_within_style.dart | 4 +- packages/remix/lib/src/app/remix_app.dart | 2 +- .../accordion/accordion_widget.dart | 2 +- .../header/accordion_header_spec_widget.dart | 2 +- .../src/components/button/button_widget.dart | 2 +- .../components/callout/callout_widget.dart | 2 +- .../components/checkbox/checkbox_widget.dart | 2 +- .../lib/src/components/chip/chip_widget.dart | 2 +- .../src/components/dialog/dialog_widget.dart | 4 +- .../menu_item/menu_item_widget.dart | 4 +- .../src/components/radio/radio_widget.dart | 2 +- .../segmented_control_button_widget.dart | 2 +- .../segmented_control_widget.dart | 2 +- .../select/button/select_button_widget.dart | 2 +- .../select/item/select_menu_widget.dart | 2 +- .../src/components/select/select_widget.dart | 4 +- .../src/components/slider/slider_widget.dart | 48 +++++++++---------- .../textfield/textfield_widget.dart | 10 ++-- .../lib/src/components/toast/toast_layer.dart | 2 +- .../src/components/toast/toast_widget.dart | 4 +- packages/remix/lib/src/theme/remix_theme.dart | 2 +- 38 files changed, 86 insertions(+), 84 deletions(-) diff --git a/lints_with_dcm.yaml b/lints_with_dcm.yaml index adcd7083b..cf27c31cc 100644 --- a/lints_with_dcm.yaml +++ b/lints_with_dcm.yaml @@ -25,7 +25,9 @@ dart_code_metrics: prefer-prefixed-global-constants: false avoid-returning-widgets: false arguments-ordering: - child-last: true + last: + - child + - children avoid-nested-conditional-expressions: acceptable-level: 3 member-ordering: diff --git a/packages/mix/lib/src/core/factory/style_widgets_ext.dart b/packages/mix/lib/src/core/factory/style_widgets_ext.dart index 939be5adb..d4478b7f3 100644 --- a/packages/mix/lib/src/core/factory/style_widgets_ext.dart +++ b/packages/mix/lib/src/core/factory/style_widgets_ext.dart @@ -29,7 +29,7 @@ extension StyleExt on Style { Key? key, Style? style, }) { - return container(child: child, inherit: inherit, key: key, style: style); + return container(inherit: inherit, key: key, style: style, child: child); } HBox hbox({ diff --git a/packages/mix/lib/src/core/styled_widget.dart b/packages/mix/lib/src/core/styled_widget.dart index 2a41f2e25..a3626566e 100644 --- a/packages/mix/lib/src/core/styled_widget.dart +++ b/packages/mix/lib/src/core/styled_widget.dart @@ -105,17 +105,17 @@ class SpecBuilder extends StatelessWidget { return mix.isAnimated ? RenderAnimatedModifiers( modifiers: modifiers, - child: child, duration: mix.animation!.duration, mix: mix, orderOfModifiers: orderOfModifiers, curve: mix.animation!.curve, + child: child, ) : RenderModifiers( - child: child, modifiers: modifiers, mix: mix, orderOfModifiers: orderOfModifiers, + child: child, ); } @@ -143,7 +143,7 @@ class SpecBuilder extends StatelessWidget { _hasWidgetStateVariant && MixWidgetState.of(context) == null; if (needsWidgetState || controller != null) { - current = Interactable(child: current, controller: controller); + current = Interactable(controller: controller, child: current); } // Otherwise, directly build the mixed child widget diff --git a/packages/mix/lib/src/core/widget_state/internal/gesture_mix_state.dart b/packages/mix/lib/src/core/widget_state/internal/gesture_mix_state.dart index 018eccc50..21f1673e9 100644 --- a/packages/mix/lib/src/core/widget_state/internal/gesture_mix_state.dart +++ b/packages/mix/lib/src/core/widget_state/internal/gesture_mix_state.dart @@ -189,7 +189,6 @@ class _GestureMixStateWidgetState extends State { @override Widget build(BuildContext context) { return GestureDetector( - child: widget.child, onTapUp: widget.onTap != null ? _onTapUp : null, onTap: widget.onTap != null ? _onTap : null, onTapCancel: widget.onTap != null ? _onTapCancel : null, @@ -204,6 +203,7 @@ class _GestureMixStateWidgetState extends State { onPanCancel: widget.onPanCancel != null ? _onPanCancel : null, behavior: widget.hitTestBehavior, excludeFromSemantics: widget.excludeFromSemantics, + child: widget.child, ); } } diff --git a/packages/mix/lib/src/modifiers/internal/render_widget_modifier.dart b/packages/mix/lib/src/modifiers/internal/render_widget_modifier.dart index 8808e656a..a18024c13 100644 --- a/packages/mix/lib/src/modifiers/internal/render_widget_modifier.dart +++ b/packages/mix/lib/src/modifiers/internal/render_widget_modifier.dart @@ -105,8 +105,8 @@ class RenderModifiers extends StatelessWidget { @override Widget build(BuildContext context) { return _RenderModifiers( - child: child, modifiers: combineModifiers(mix, modifiers, orderOfModifiers).reversed, + child: child, ); } } @@ -160,10 +160,10 @@ class RenderAnimatedModifiers extends StatelessWidget { orderOfModifiers, defaultOrder: MixTheme.maybeOf(context)?.defaultOrderOfModifiers, ).reversed.toList(), - child: child, duration: duration, curve: curve, onEnd: onEnd, + child: child, ); } } @@ -275,15 +275,15 @@ class RenderSpecModifiers extends StatelessWidget { return spec.isAnimated ? RenderAnimatedModifiers( modifiers: modifiers, - child: child, duration: spec.animated!.duration, orderOfModifiers: orderOfModifiers, curve: spec.animated!.curve, + child: child, ) : RenderModifiers( - child: child, modifiers: modifiers, orderOfModifiers: orderOfModifiers, + child: child, ); } } diff --git a/packages/mix/lib/src/modifiers/scroll_view_widget_modifier.dart b/packages/mix/lib/src/modifiers/scroll_view_widget_modifier.dart index 31192fe53..624f642b9 100644 --- a/packages/mix/lib/src/modifiers/scroll_view_widget_modifier.dart +++ b/packages/mix/lib/src/modifiers/scroll_view_widget_modifier.dart @@ -43,8 +43,8 @@ final class ScrollViewModifierSpec reverse: reverse ?? false, padding: padding, physics: physics, - child: child, clipBehavior: clipBehavior ?? Clip.hardEdge, + child: child, ); } } diff --git a/packages/mix/lib/src/modifiers/visibility_widget_modifier.dart b/packages/mix/lib/src/modifiers/visibility_widget_modifier.dart index 6baa69419..b195d113f 100644 --- a/packages/mix/lib/src/modifiers/visibility_widget_modifier.dart +++ b/packages/mix/lib/src/modifiers/visibility_widget_modifier.dart @@ -26,7 +26,7 @@ final class VisibilityModifierSpec @override Widget build(Widget child) { - return Visibility(child: child, visible: visible); + return Visibility(visible: visible, child: child); } } diff --git a/packages/mix/lib/src/specs/box/box_spec.dart b/packages/mix/lib/src/specs/box/box_spec.dart index d842cd1ad..63529c0ad 100644 --- a/packages/mix/lib/src/specs/box/box_spec.dart +++ b/packages/mix/lib/src/specs/box/box_spec.dart @@ -123,16 +123,16 @@ final class BoxSpec extends Spec with _$BoxSpec, Diagnosticable { return isAnimated ? AnimatedBoxSpecWidget( spec: this, - child: child, duration: animated!.duration, curve: animated!.curve, onEnd: animated?.onEnd, orderOfModifiers: orderOfModifiers, + child: child, ) : BoxSpecWidget( spec: this, - child: child, orderOfModifiers: orderOfModifiers, + child: child, ); } diff --git a/packages/mix/lib/src/specs/box/box_widget.dart b/packages/mix/lib/src/specs/box/box_widget.dart index 7d99f43d1..d5e8ab6f9 100644 --- a/packages/mix/lib/src/specs/box/box_widget.dart +++ b/packages/mix/lib/src/specs/box/box_widget.dart @@ -75,6 +75,7 @@ class BoxSpecWidget extends StatelessWidget { Widget build(BuildContext context) { return RenderSpecModifiers( orderOfModifiers: orderOfModifiers, + spec: spec ?? const BoxSpec(), child: Container( alignment: spec?.alignment, padding: spec?.padding, @@ -86,10 +87,9 @@ class BoxSpecWidget extends StatelessWidget { margin: spec?.margin, transform: spec?.transform, transformAlignment: spec?.transformAlignment, - child: child, clipBehavior: spec?.clipBehavior ?? Clip.none, + child: child, ), - spec: spec ?? const BoxSpec(), ); } } diff --git a/packages/mix/lib/src/specs/flex/flex_spec.dart b/packages/mix/lib/src/specs/flex/flex_spec.dart index cea690187..27831ed84 100644 --- a/packages/mix/lib/src/specs/flex/flex_spec.dart +++ b/packages/mix/lib/src/specs/flex/flex_spec.dart @@ -67,15 +67,15 @@ final class FlexSpec extends Spec with _$FlexSpec, Diagnosticable { return isAnimated ? AnimatedFlexSpecWidget( spec: this, - children: children, direction: direction, curve: animated!.curve, duration: animated!.duration, + children: children, ) : FlexSpecWidget( spec: this, - children: children, direction: direction, + children: children, ); } diff --git a/packages/mix/lib/src/specs/flex/flex_widget.dart b/packages/mix/lib/src/specs/flex/flex_widget.dart index e9d3cbbf6..b30a925de 100644 --- a/packages/mix/lib/src/specs/flex/flex_widget.dart +++ b/packages/mix/lib/src/specs/flex/flex_widget.dart @@ -42,7 +42,7 @@ class StyledFlex extends StyledWidget { return withMix(context, (context) { final spec = FlexSpec.of(context); - return spec(children: children, direction: direction); + return spec(direction: direction, children: children); }); } } @@ -99,8 +99,8 @@ class FlexSpecWidget extends StatelessWidget { ? flexWidget : RenderSpecModifiers( orderOfModifiers: orderOfModifiers, - child: flexWidget, spec: spec!, + child: flexWidget, ); } } @@ -145,9 +145,9 @@ class AnimatedFlexSpecWidgetState Widget build(BuildContext context) { return FlexSpecWidget( spec: _specTween?.evaluate(animation), - children: widget.children, direction: widget.direction, orderOfModifiers: widget.orderOfModifiers, + children: widget.children, ); } } diff --git a/packages/mix/lib/src/specs/flexbox/flexbox_widget.dart b/packages/mix/lib/src/specs/flexbox/flexbox_widget.dart index e8e0341f7..22b6fb3e9 100644 --- a/packages/mix/lib/src/specs/flexbox/flexbox_widget.dart +++ b/packages/mix/lib/src/specs/flexbox/flexbox_widget.dart @@ -61,7 +61,7 @@ class FlexBox extends StyledWidget { flex: flexSpec, ); - return newSpec(children: children, direction: direction); + return newSpec(direction: direction, children: children); }); } } @@ -89,11 +89,11 @@ class FlexBoxSpecWidget extends StatelessWidget { // This code must be like this to keep the existing animation API working. return RenderSpecModifiers( orderOfModifiers: orderOfModifiers, + spec: spec, child: spec.box( - child: spec.flex(children: children, direction: direction), orderOfModifiers: orderOfModifiers, + child: spec.flex(direction: direction, children: children), ), - spec: spec, ); } } @@ -139,9 +139,9 @@ class AnimatedFlexBoxSpecWidgetState Widget build(BuildContext context) { return FlexBoxSpecWidget( spec: _specTween?.evaluate(animation), - children: widget.children, direction: widget.direction, orderOfModifiers: widget.orderOfModifiers, + children: widget.children, ); } } diff --git a/packages/mix/lib/src/specs/icon/icon_widget.dart b/packages/mix/lib/src/specs/icon/icon_widget.dart index cb62796c6..dbd8f3193 100644 --- a/packages/mix/lib/src/specs/icon/icon_widget.dart +++ b/packages/mix/lib/src/specs/icon/icon_widget.dart @@ -76,6 +76,7 @@ class IconSpecWidget extends StatelessWidget { Widget build(BuildContext context) { return RenderSpecModifiers( orderOfModifiers: orderOfModifiers, + spec: spec ?? const IconSpec(), child: Icon( icon, size: spec?.size, @@ -88,7 +89,6 @@ class IconSpecWidget extends StatelessWidget { semanticLabel: semanticLabel, textDirection: textDirection, ), - spec: spec ?? const IconSpec(), ); } } diff --git a/packages/mix/lib/src/specs/image/image_widget.dart b/packages/mix/lib/src/specs/image/image_widget.dart index 4cab8893d..6f25d0543 100644 --- a/packages/mix/lib/src/specs/image/image_widget.dart +++ b/packages/mix/lib/src/specs/image/image_widget.dart @@ -106,6 +106,7 @@ class ImageSpecWidget extends StatelessWidget { Widget build(BuildContext context) { return RenderSpecModifiers( orderOfModifiers: orderOfModifiers, + spec: spec ?? const ImageSpec(), child: Image( image: image, frameBuilder: frameBuilder, @@ -127,7 +128,6 @@ class ImageSpecWidget extends StatelessWidget { isAntiAlias: isAntiAlias, filterQuality: spec?.filterQuality ?? FilterQuality.low, ), - spec: spec ?? const ImageSpec(), ); } } diff --git a/packages/mix/lib/src/specs/stack/stack_spec.dart b/packages/mix/lib/src/specs/stack/stack_spec.dart index f633d45f5..d849ea831 100644 --- a/packages/mix/lib/src/specs/stack/stack_spec.dart +++ b/packages/mix/lib/src/specs/stack/stack_spec.dart @@ -42,9 +42,9 @@ final class StackSpec extends Spec with _$StackSpec, Diagnosticable { return isAnimated ? AnimatedStackSpecWidget( spec: this, - children: children, curve: animated!.curve, duration: animated!.duration, + children: children, ) : StackSpecWidget(spec: this, children: children); } diff --git a/packages/mix/lib/src/specs/stack/stack_widget.dart b/packages/mix/lib/src/specs/stack/stack_widget.dart index 75b2cc5eb..187c82173 100644 --- a/packages/mix/lib/src/specs/stack/stack_widget.dart +++ b/packages/mix/lib/src/specs/stack/stack_widget.dart @@ -57,6 +57,7 @@ class StackSpecWidget extends StatelessWidget { // The Stack widget is used here, applying the resolved styles from StackSpec. return RenderSpecModifiers( orderOfModifiers: orderOfModifiers, + spec: spec ?? const StackSpec(), child: Stack( alignment: spec?.alignment ?? _defaultStack.alignment, textDirection: spec?.textDirection, @@ -64,7 +65,6 @@ class StackSpecWidget extends StatelessWidget { clipBehavior: spec?.clipBehavior ?? _defaultStack.clipBehavior, children: children ?? const [], ), - spec: spec ?? const StackSpec(), ); } } @@ -109,8 +109,8 @@ class AnimatedStackSpecWidgetState return StackSpecWidget( spec: spec, - children: widget.children, orderOfModifiers: widget.orderOfModifiers, + children: widget.children, ); } } diff --git a/packages/mix/lib/src/specs/text/text_widget.dart b/packages/mix/lib/src/specs/text/text_widget.dart index 55ec69f3d..75de9aeb2 100644 --- a/packages/mix/lib/src/specs/text/text_widget.dart +++ b/packages/mix/lib/src/specs/text/text_widget.dart @@ -93,6 +93,7 @@ class TextSpecWidget extends StatelessWidget { // The Text widget is used here, applying the resolved styles and properties from TextSpec. return RenderSpecModifiers( orderOfModifiers: const [], + spec: spec ?? const TextSpec(), child: Text( spec?.directive?.apply(text) ?? text, style: spec?.style, @@ -110,7 +111,6 @@ class TextSpecWidget extends StatelessWidget { textWidthBasis: spec?.textWidthBasis, textHeightBehavior: spec?.textHeightBehavior, ), - spec: spec ?? const TextSpec(), ); } } diff --git a/packages/mix_lint/lib/src/lints/avoid_defining_tokens_or_variants_within_style.dart b/packages/mix_lint/lib/src/lints/avoid_defining_tokens_or_variants_within_style.dart index a7e0bc730..af6939e9f 100644 --- a/packages/mix_lint/lib/src/lints/avoid_defining_tokens_or_variants_within_style.dart +++ b/packages/mix_lint/lib/src/lints/avoid_defining_tokens_or_variants_within_style.dart @@ -23,16 +23,16 @@ class AvoidDefiningTokensOrVariantsWithinStyle extends DartLintRule { ) { context.checkTypeHierarchyCompliance( parent: styleChecker, - child: variantChecker, reporter: reporter, code: _code, + child: variantChecker, ); context.checkTypeHierarchyCompliance( parent: styleChecker, - child: mixTokenChecker, reporter: reporter, code: _code, + child: mixTokenChecker, ); } } diff --git a/packages/remix/lib/src/app/remix_app.dart b/packages/remix/lib/src/app/remix_app.dart index 81fa1af80..0f52184da 100644 --- a/packages/remix/lib/src/app/remix_app.dart +++ b/packages/remix/lib/src/app/remix_app.dart @@ -122,6 +122,7 @@ class _RemixAppState extends State { Widget _remixBuilder(BuildContext context, Widget? child) { return RemixTheme( theme: widget.theme, + darkTheme: widget.darkTheme, child: widget.builder != null ? Builder( builder: (BuildContext context) { @@ -129,7 +130,6 @@ class _RemixAppState extends State { }, ) : (child ?? const SizedBox.shrink()), - darkTheme: widget.darkTheme, ); } diff --git a/packages/remix/lib/src/components/accordion/accordion_widget.dart b/packages/remix/lib/src/components/accordion/accordion_widget.dart index 75b55890e..fb3acaf39 100644 --- a/packages/remix/lib/src/components/accordion/accordion_widget.dart +++ b/packages/remix/lib/src/components/accordion/accordion_widget.dart @@ -66,6 +66,7 @@ class _AccordionState extends State with TickerProviderStateMixin { return spec.container( child: spec.flex( + direction: Axis.vertical, children: [ Pressable( onPress: _handleTap, @@ -81,7 +82,6 @@ class _AccordionState extends State with TickerProviderStateMixin { ), content, ], - direction: Axis.vertical, ), ); }, diff --git a/packages/remix/lib/src/components/accordion/header/accordion_header_spec_widget.dart b/packages/remix/lib/src/components/accordion/header/accordion_header_spec_widget.dart index bb70adb49..db02b5ae9 100644 --- a/packages/remix/lib/src/components/accordion/header/accordion_header_spec_widget.dart +++ b/packages/remix/lib/src/components/accordion/header/accordion_header_spec_widget.dart @@ -24,13 +24,13 @@ class AccordionHeaderSpecWidget extends StatelessWidget { return ContainerWidget( child: FlexWidget( + direction: Axis.horizontal, children: [ if (leadingIcon != null) LeadingIconWidget(leadingIcon), TitleWidget(title), const Spacer(), TrailingIconWidget(trailingIcon), ], - direction: Axis.horizontal, ), ); } diff --git a/packages/remix/lib/src/components/button/button_widget.dart b/packages/remix/lib/src/components/button/button_widget.dart index 4d7ac5bb3..fad00358b 100644 --- a/packages/remix/lib/src/components/button/button_widget.dart +++ b/packages/remix/lib/src/components/button/button_widget.dart @@ -114,13 +114,13 @@ class ButtonSpecWidget extends StatelessWidget { Widget _buildChildren(ButtonSpec spec) { final flexboxWidget = spec.flexbox( + direction: Axis.horizontal, children: [ if (iconLeft != null) spec.icon(iconLeft), // If there is no icon always render the label if (label.isNotEmpty || !_hasIcon) spec.label(label), if (iconRight != null) spec.icon(iconRight), ], - direction: Axis.horizontal, ); return loading ? _buildLoadingOverlay(spec, flexboxWidget) : flexboxWidget; diff --git a/packages/remix/lib/src/components/callout/callout_widget.dart b/packages/remix/lib/src/components/callout/callout_widget.dart index d4e864556..1ab33b6cb 100644 --- a/packages/remix/lib/src/components/callout/callout_widget.dart +++ b/packages/remix/lib/src/components/callout/callout_widget.dart @@ -31,8 +31,8 @@ class Callout extends StatelessWidget { return spec.container( child: spec.flex( - children: [if (icon != null) spec.icon(icon!), spec.text(text)], direction: Axis.horizontal, + children: [if (icon != null) spec.icon(icon!), spec.text(text)], ), ); }, diff --git a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart index afecc38bf..ebe41b1c0 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart @@ -83,6 +83,7 @@ class _CheckboxState extends State { final IconWidget = spec.indicator; return ContainerLayout( + direction: Axis.horizontal, children: [ ContainerWidget( child: IconWidget( @@ -93,7 +94,6 @@ class _CheckboxState extends State { ), if (widget.label != null) spec.label(widget.label!), ], - direction: Axis.horizontal, ); }, ), diff --git a/packages/remix/lib/src/components/chip/chip_widget.dart b/packages/remix/lib/src/components/chip/chip_widget.dart index e32b25d02..0c2af005a 100644 --- a/packages/remix/lib/src/components/chip/chip_widget.dart +++ b/packages/remix/lib/src/components/chip/chip_widget.dart @@ -75,12 +75,12 @@ class _ChipState extends State { return spec.container( child: spec.flex( + direction: Axis.horizontal, children: [ if (widget.iconLeft != null) spec.icon(widget.iconLeft), if (widget.label?.isNotEmpty == true) spec.label(widget.label!), if (widget.iconRight != null) spec.icon(widget.iconRight), ], - direction: Axis.horizontal, ), ); }, diff --git a/packages/remix/lib/src/components/dialog/dialog_widget.dart b/packages/remix/lib/src/components/dialog/dialog_widget.dart index fd8824bd2..ebdb649c0 100644 --- a/packages/remix/lib/src/components/dialog/dialog_widget.dart +++ b/packages/remix/lib/src/components/dialog/dialog_widget.dart @@ -42,6 +42,7 @@ class Dialog extends StatelessWidget { return spec.container( child: spec.mainFlex( + direction: Axis.vertical, children: [ if (titleBuilder != null) titleBuilder!(spec.title), if (descriptionBuilder != null) @@ -49,11 +50,10 @@ class Dialog extends StatelessWidget { content ?? const SizedBox.shrink(), if (actions != null) spec.actionsFlex( - children: actions!, direction: Axis.horizontal, + children: actions!, ), ], - direction: Axis.vertical, ), ); }, diff --git a/packages/remix/lib/src/components/menu_item/menu_item_widget.dart b/packages/remix/lib/src/components/menu_item/menu_item_widget.dart index 515d86beb..7f83ed2e1 100644 --- a/packages/remix/lib/src/components/menu_item/menu_item_widget.dart +++ b/packages/remix/lib/src/components/menu_item/menu_item_widget.dart @@ -37,20 +37,20 @@ class MenuItem extends StatelessWidget { return spec.outerContainer( child: spec.contentLayout( + direction: Axis.horizontal, children: [ if (leadingWidgetBuilder != null) leadingWidgetBuilder!(spec.icon), spec.titleSubtitleLayout( + direction: Axis.vertical, children: [ spec.title(title), if (subtitle != null) spec.subtitle(subtitle!), ], - direction: Axis.vertical, ), if (trailingWidgetBuilder != null) trailingWidgetBuilder!(spec.icon), ], - direction: Axis.horizontal, ), ); }, diff --git a/packages/remix/lib/src/components/radio/radio_widget.dart b/packages/remix/lib/src/components/radio/radio_widget.dart index a07fbe4ae..3ee0083d0 100644 --- a/packages/remix/lib/src/components/radio/radio_widget.dart +++ b/packages/remix/lib/src/components/radio/radio_widget.dart @@ -80,11 +80,11 @@ class _RadioState extends State> { final TextWidget = spec.text; return FlexWidget( + direction: Axis.horizontal, children: [ ContainerWidget(child: IndicatorWidget()), TextWidget(widget.label), ], - direction: Axis.horizontal, ); }, ), diff --git a/packages/remix/lib/src/components/segmented_control/button/segmented_control_button_widget.dart b/packages/remix/lib/src/components/segmented_control/button/segmented_control_button_widget.dart index d9494d348..464a9f9e5 100644 --- a/packages/remix/lib/src/components/segmented_control/button/segmented_control_button_widget.dart +++ b/packages/remix/lib/src/components/segmented_control/button/segmented_control_button_widget.dart @@ -20,11 +20,11 @@ class SegmentButton extends StatelessWidget { return container( child: flex( + direction: Axis.horizontal, children: [ if (iconData != null) icon(iconData), if (text != null) label(text!), ], - direction: Axis.horizontal, ), ); }, diff --git a/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart b/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart index 657ff1083..7f271dc9a 100644 --- a/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart +++ b/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart @@ -56,6 +56,7 @@ class _SegmentedControlState extends State { alignment: Alignment.centerLeft, children: [ spec.flex( + direction: Axis.vertical, children: [ for (int i = 0; i < widget.buttons.length; i++) Stack( @@ -79,7 +80,6 @@ class _SegmentedControlState extends State { ], ), ], - direction: Axis.vertical, ), ], ), diff --git a/packages/remix/lib/src/components/select/button/select_button_widget.dart b/packages/remix/lib/src/components/select/button/select_button_widget.dart index e2bc955e9..98d63cd23 100644 --- a/packages/remix/lib/src/components/select/button/select_button_widget.dart +++ b/packages/remix/lib/src/components/select/button/select_button_widget.dart @@ -26,8 +26,8 @@ class XSelectButtonSpecWidget extends StatelessWidget { return container( child: flex( - children: [label(text), icon(trailingIcon)], direction: Axis.horizontal, + children: [label(text), icon(trailingIcon)], ), ); }, diff --git a/packages/remix/lib/src/components/select/item/select_menu_widget.dart b/packages/remix/lib/src/components/select/item/select_menu_widget.dart index 24880dcd5..db21d8872 100644 --- a/packages/remix/lib/src/components/select/item/select_menu_widget.dart +++ b/packages/remix/lib/src/components/select/item/select_menu_widget.dart @@ -24,11 +24,11 @@ class SelectMenuItemWidget extends StatelessWidget { return container( child: flex( + direction: Axis.horizontal, children: [ if (iconData != null) icon(iconData), text(this.text), ], - direction: Axis.horizontal, ), ); }, diff --git a/packages/remix/lib/src/components/select/select_widget.dart b/packages/remix/lib/src/components/select/select_widget.dart index 3be4528fb..cf4305d8c 100644 --- a/packages/remix/lib/src/components/select/select_widget.dart +++ b/packages/remix/lib/src/components/select/select_widget.dart @@ -89,8 +89,8 @@ class SelectState extends State> overlayChildBuilder: (BuildContext context) { return Stack(children: [ GestureDetector( - child: Container(color: Colors.transparent), onTap: () => hide(), + child: Container(color: Colors.transparent), ), CompositedTransformFollower( link: _link, @@ -119,6 +119,7 @@ class SelectState extends State> return Container( child: Flex( + direction: Axis.vertical, children: widget.items.map((item) { return Pressable( onPress: () { @@ -136,7 +137,6 @@ class SelectState extends State> ), ); }).toList(), - direction: Axis.vertical, ), ); }, diff --git a/packages/remix/lib/src/components/slider/slider_widget.dart b/packages/remix/lib/src/components/slider/slider_widget.dart index e70070193..89cfb2db5 100644 --- a/packages/remix/lib/src/components/slider/slider_widget.dart +++ b/packages/remix/lib/src/components/slider/slider_widget.dart @@ -75,7 +75,31 @@ class _SliderState extends State with TickerProviderStateMixin { final configuration = SpecConfiguration(context, SliderSpecUtility.self); return Interactable( + enabled: !widget.disabled, + mouseCursor: widget.disabled + ? SystemMouseCursors.forbidden + : SystemMouseCursors.click, + controller: _controller, child: GestureDetector( + onPanStart: (details) { + _handleInteraction((c) { + c.pressed = true; + final value = _calculateValue(details.localPosition); + widget.onChangeStart?.call(value); + }); + }, + onPanUpdate: (details) { + _handleInteraction((c) { + c.pressed = true; + final value = _calculateValue(details.localPosition); + widget.onChanged?.call(value); + }); + }, + onPanEnd: (details) { + _handleInteraction((c) { + c.pressed = false; + }); + }, child: SpecBuilder( style: style.makeStyle(configuration).applyVariants(widget.variants), builder: (context) { @@ -131,31 +155,7 @@ class _SliderState extends State with TickerProviderStateMixin { ); }, ), - onPanStart: (details) { - _handleInteraction((c) { - c.pressed = true; - final value = _calculateValue(details.localPosition); - widget.onChangeStart?.call(value); - }); - }, - onPanUpdate: (details) { - _handleInteraction((c) { - c.pressed = true; - final value = _calculateValue(details.localPosition); - widget.onChanged?.call(value); - }); - }, - onPanEnd: (details) { - _handleInteraction((c) { - c.pressed = false; - }); - }, ), - enabled: !widget.disabled, - mouseCursor: widget.disabled - ? SystemMouseCursors.forbidden - : SystemMouseCursors.click, - controller: _controller, ); } } diff --git a/packages/remix/lib/src/components/textfield/textfield_widget.dart b/packages/remix/lib/src/components/textfield/textfield_widget.dart index 8d46dc575..86fced8ad 100644 --- a/packages/remix/lib/src/components/textfield/textfield_widget.dart +++ b/packages/remix/lib/src/components/textfield/textfield_widget.dart @@ -520,9 +520,11 @@ class _TextFieldState extends State _effectiveController.value.text.isNotEmpty); return spec.containerLayout( + direction: Axis.vertical, children: [ spec.container( child: spec.contentLayout( + direction: Axis.horizontal, children: [ if (widget.prefixBuilder != null) widget.prefixBuilder!(spec.icon), @@ -619,25 +621,25 @@ class _TextFieldState extends State ), if (widget.suffix != null) widget.suffix!, ], - direction: Axis.horizontal, ), ), spec.helperText(widget.helperText ?? ''), ], - direction: Axis.vertical, ); }, ); return Interactable( + mouseCursor: SystemMouseCursors.text, + controller: _statesController, child: TextFieldTapRegion( child: IgnorePointer( ignoring: widget.ignorePointers ?? !widget.enabled, child: AnimatedBuilder( animation: _effectiveController, builder: (context, child) => _TextFieldContext( - child: child!, isEmpty: _effectiveController.value.text.isEmpty, + child: child!, ), child: _selectionGestureDetectorBuilder.buildGestureDetector( behavior: HitTestBehavior.translucent, @@ -646,8 +648,6 @@ class _TextFieldState extends State ), ), ), - mouseCursor: SystemMouseCursors.text, - controller: _statesController, ); } diff --git a/packages/remix/lib/src/components/toast/toast_layer.dart b/packages/remix/lib/src/components/toast/toast_layer.dart index 61dc8fa22..f2066592d 100644 --- a/packages/remix/lib/src/components/toast/toast_layer.dart +++ b/packages/remix/lib/src/components/toast/toast_layer.dart @@ -66,7 +66,6 @@ class ToastLayerState extends State implements ToastActions { return Stack( children: [ AnimatedSwitcher( - child: toastWidget, duration: toast?.animationDuration ?? const Duration(milliseconds: 500), reverseDuration: toast?.reverseAnimationDuration ?? @@ -97,6 +96,7 @@ class ToastLayerState extends State implements ToastActions { child: FadeTransition(opacity: animation, child: child), ); }, + child: toastWidget, ), widget.child, ], diff --git a/packages/remix/lib/src/components/toast/toast_widget.dart b/packages/remix/lib/src/components/toast/toast_widget.dart index a26c32266..243b0a6d5 100644 --- a/packages/remix/lib/src/components/toast/toast_widget.dart +++ b/packages/remix/lib/src/components/toast/toast_widget.dart @@ -31,18 +31,18 @@ class Toast extends StatelessWidget { return spec.container( child: spec.containerFlex( + direction: Axis.horizontal, children: [ if (leading != null) leading!, spec.textContentFlex( + direction: Axis.vertical, children: [ spec.title(title), if (description != null) spec.description(description!), ], - direction: Axis.vertical, ), if (trailing != null) trailing!, ], - direction: Axis.horizontal, ), ); }, diff --git a/packages/remix/lib/src/theme/remix_theme.dart b/packages/remix/lib/src/theme/remix_theme.dart index 107b45af6..3384b8941 100644 --- a/packages/remix/lib/src/theme/remix_theme.dart +++ b/packages/remix/lib/src/theme/remix_theme.dart @@ -311,13 +311,13 @@ class RemixTheme extends StatelessWidget { final tokens = theme.tokens; return MixTheme( - child: _RemixThemeInherited(child: child, data: theme), data: MixThemeData( colors: tokens.colors, spaces: tokens.spaces, textStyles: tokens.textStyles, radii: tokens.radii, ), + child: _RemixThemeInherited(data: theme, child: child), ); } } From 90d2a11f634a6cbb4e229734973e660064d97aa3 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Thu, 14 Nov 2024 14:04:36 -0300 Subject: [PATCH 10/57] lint: add key and spec as first --- lints_with_dcm.yaml | 3 +++ packages/mix/lib/src/specs/box/box_widget.dart | 2 +- packages/mix/lib/src/specs/flex/flex_widget.dart | 2 +- packages/mix/lib/src/specs/flexbox/flexbox_widget.dart | 2 +- packages/mix/lib/src/specs/icon/icon_widget.dart | 2 +- packages/mix/lib/src/specs/image/image_widget.dart | 2 +- packages/mix/lib/src/specs/stack/stack_widget.dart | 2 +- packages/mix/lib/src/specs/text/text_widget.dart | 2 +- packages/remix/lib/src/components/button/button.dart | 2 +- packages/remix/lib/src/components/button/button_widget.dart | 2 +- 10 files changed, 12 insertions(+), 9 deletions(-) diff --git a/lints_with_dcm.yaml b/lints_with_dcm.yaml index cf27c31cc..05262ac5b 100644 --- a/lints_with_dcm.yaml +++ b/lints_with_dcm.yaml @@ -25,6 +25,9 @@ dart_code_metrics: prefer-prefixed-global-constants: false avoid-returning-widgets: false arguments-ordering: + first: + - key + - spec last: - child - children diff --git a/packages/mix/lib/src/specs/box/box_widget.dart b/packages/mix/lib/src/specs/box/box_widget.dart index d5e8ab6f9..37b7b893b 100644 --- a/packages/mix/lib/src/specs/box/box_widget.dart +++ b/packages/mix/lib/src/specs/box/box_widget.dart @@ -74,8 +74,8 @@ class BoxSpecWidget extends StatelessWidget { @override Widget build(BuildContext context) { return RenderSpecModifiers( - orderOfModifiers: orderOfModifiers, spec: spec ?? const BoxSpec(), + orderOfModifiers: orderOfModifiers, child: Container( alignment: spec?.alignment, padding: spec?.padding, diff --git a/packages/mix/lib/src/specs/flex/flex_widget.dart b/packages/mix/lib/src/specs/flex/flex_widget.dart index b30a925de..ca9d5817e 100644 --- a/packages/mix/lib/src/specs/flex/flex_widget.dart +++ b/packages/mix/lib/src/specs/flex/flex_widget.dart @@ -98,8 +98,8 @@ class FlexSpecWidget extends StatelessWidget { return spec == null ? flexWidget : RenderSpecModifiers( - orderOfModifiers: orderOfModifiers, spec: spec!, + orderOfModifiers: orderOfModifiers, child: flexWidget, ); } diff --git a/packages/mix/lib/src/specs/flexbox/flexbox_widget.dart b/packages/mix/lib/src/specs/flexbox/flexbox_widget.dart index 22b6fb3e9..db109b4bb 100644 --- a/packages/mix/lib/src/specs/flexbox/flexbox_widget.dart +++ b/packages/mix/lib/src/specs/flexbox/flexbox_widget.dart @@ -88,8 +88,8 @@ class FlexBoxSpecWidget extends StatelessWidget { // it should be implemented following the same pattern as the others SpecWidgets. // This code must be like this to keep the existing animation API working. return RenderSpecModifiers( - orderOfModifiers: orderOfModifiers, spec: spec, + orderOfModifiers: orderOfModifiers, child: spec.box( orderOfModifiers: orderOfModifiers, child: spec.flex(direction: direction, children: children), diff --git a/packages/mix/lib/src/specs/icon/icon_widget.dart b/packages/mix/lib/src/specs/icon/icon_widget.dart index dbd8f3193..195a29f11 100644 --- a/packages/mix/lib/src/specs/icon/icon_widget.dart +++ b/packages/mix/lib/src/specs/icon/icon_widget.dart @@ -75,8 +75,8 @@ class IconSpecWidget extends StatelessWidget { @override Widget build(BuildContext context) { return RenderSpecModifiers( - orderOfModifiers: orderOfModifiers, spec: spec ?? const IconSpec(), + orderOfModifiers: orderOfModifiers, child: Icon( icon, size: spec?.size, diff --git a/packages/mix/lib/src/specs/image/image_widget.dart b/packages/mix/lib/src/specs/image/image_widget.dart index 6f25d0543..cca7620d6 100644 --- a/packages/mix/lib/src/specs/image/image_widget.dart +++ b/packages/mix/lib/src/specs/image/image_widget.dart @@ -105,8 +105,8 @@ class ImageSpecWidget extends StatelessWidget { @override Widget build(BuildContext context) { return RenderSpecModifiers( - orderOfModifiers: orderOfModifiers, spec: spec ?? const ImageSpec(), + orderOfModifiers: orderOfModifiers, child: Image( image: image, frameBuilder: frameBuilder, diff --git a/packages/mix/lib/src/specs/stack/stack_widget.dart b/packages/mix/lib/src/specs/stack/stack_widget.dart index 187c82173..31853eb16 100644 --- a/packages/mix/lib/src/specs/stack/stack_widget.dart +++ b/packages/mix/lib/src/specs/stack/stack_widget.dart @@ -56,8 +56,8 @@ class StackSpecWidget extends StatelessWidget { Widget build(BuildContext context) { // The Stack widget is used here, applying the resolved styles from StackSpec. return RenderSpecModifiers( - orderOfModifiers: orderOfModifiers, spec: spec ?? const StackSpec(), + orderOfModifiers: orderOfModifiers, child: Stack( alignment: spec?.alignment ?? _defaultStack.alignment, textDirection: spec?.textDirection, diff --git a/packages/mix/lib/src/specs/text/text_widget.dart b/packages/mix/lib/src/specs/text/text_widget.dart index 75de9aeb2..97db1a0be 100644 --- a/packages/mix/lib/src/specs/text/text_widget.dart +++ b/packages/mix/lib/src/specs/text/text_widget.dart @@ -92,8 +92,8 @@ class TextSpecWidget extends StatelessWidget { Widget build(BuildContext context) { // The Text widget is used here, applying the resolved styles and properties from TextSpec. return RenderSpecModifiers( - orderOfModifiers: const [], spec: spec ?? const TextSpec(), + orderOfModifiers: const [], child: Text( spec?.directive?.apply(text) ?? text, style: spec?.style, diff --git a/packages/remix/lib/src/components/button/button.dart b/packages/remix/lib/src/components/button/button.dart index 5f96bae3f..1b4e633c2 100644 --- a/packages/remix/lib/src/components/button/button.dart +++ b/packages/remix/lib/src/components/button/button.dart @@ -52,6 +52,7 @@ class ButtonSpec extends Spec with _$ButtonSpec, Diagnosticable { }) { return ButtonSpecWidget( key: key, + spec: this, label: label, disabled: disabled, loading: loading, @@ -59,7 +60,6 @@ class ButtonSpec extends Spec with _$ButtonSpec, Diagnosticable { iconRight: iconRight, spinnerBuilder: spinnerBuilder, onPressed: onPressed, - spec: this, ); } diff --git a/packages/remix/lib/src/components/button/button_widget.dart b/packages/remix/lib/src/components/button/button_widget.dart index fad00358b..c322587e5 100644 --- a/packages/remix/lib/src/components/button/button_widget.dart +++ b/packages/remix/lib/src/components/button/button_widget.dart @@ -62,6 +62,7 @@ class Button extends StatelessWidget { ]), builder: (context) { return ButtonSpecWidget( + spec: ButtonSpec.of(context), label: label, disabled: disabled, loading: loading, @@ -69,7 +70,6 @@ class Button extends StatelessWidget { iconRight: iconRight, spinnerBuilder: spinnerBuilder, onPressed: onPressed, - spec: ButtonSpec.of(context), ); }, ), From 753f8a8fc89611fa6f46a660d16d30cd3efe69a4 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Thu, 14 Nov 2024 14:04:59 -0300 Subject: [PATCH 11/57] add key as first --- .../lib/src/core/factory/style_widgets_ext.dart | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/mix/lib/src/core/factory/style_widgets_ext.dart b/packages/mix/lib/src/core/factory/style_widgets_ext.dart index d4478b7f3..d060e00d1 100644 --- a/packages/mix/lib/src/core/factory/style_widgets_ext.dart +++ b/packages/mix/lib/src/core/factory/style_widgets_ext.dart @@ -16,8 +16,8 @@ extension StyleExt on Style { Style? style, }) { return Box( - style: merge(style), key: key, + style: merge(style), inherit: inherit, child: child, ); @@ -29,7 +29,7 @@ extension StyleExt on Style { Key? key, Style? style, }) { - return container(inherit: inherit, key: key, style: style, child: child); + return container(key: key, inherit: inherit, style: style, child: child); } HBox hbox({ @@ -39,8 +39,8 @@ extension StyleExt on Style { Style? style, }) { return HBox( - style: merge(style), key: key, + style: merge(style), inherit: inherit, children: children, ); @@ -53,8 +53,8 @@ extension StyleExt on Style { Style? style, }) { return StyledRow( - style: merge(style), key: key, + style: merge(style), inherit: inherit, children: children, ); @@ -69,9 +69,9 @@ extension StyleExt on Style { }) { return StyledText( text, + key: key, semanticsLabel: semanticsLabel, style: merge(style), - key: key, inherit: inherit, ); } @@ -83,8 +83,8 @@ extension StyleExt on Style { Style? style, }) { return VBox( - style: merge(style), key: key, + style: merge(style), inherit: inherit, children: children, ); @@ -97,8 +97,8 @@ extension StyleExt on Style { Style? style, }) { return StyledColumn( - style: merge(style), key: key, + style: merge(style), inherit: inherit, children: children, ); @@ -110,6 +110,6 @@ extension StyleExt on Style { Key? key, Style? style, }) { - return StyledIcon(icon, style: merge(style), key: key, inherit: inherit); + return StyledIcon(icon, key: key, style: merge(style), inherit: inherit); } } From 2de2a799dc74a887848b1abd92efab970cf16434 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Thu, 14 Nov 2024 14:57:25 -0300 Subject: [PATCH 12/57] fix: lint issues --- .../attributes/border/border_radius_dto.dart | 3 --- .../attributes/border/shape_border_dto.dart | 6 ----- packages/mix/lib/src/core/attribute.dart | 4 +--- packages/mix/lib/src/core/dto.dart | 5 +--- packages/mix/lib/src/core/modifier.dart | 4 ---- packages/mix/lib/src/core/styled_widget.dart | 3 --- .../mix/lib/src/specs/icon/icon_widget.dart | 24 +++++++------------ packages/mix/lib/src/theme/mix/mix_theme.dart | 3 ++- .../mix/lib/src/variants/context_variant.dart | 3 --- 9 files changed, 13 insertions(+), 42 deletions(-) diff --git a/packages/mix/lib/src/attributes/border/border_radius_dto.dart b/packages/mix/lib/src/attributes/border/border_radius_dto.dart index 137c55435..424a576db 100644 --- a/packages/mix/lib/src/attributes/border/border_radius_dto.dart +++ b/packages/mix/lib/src/attributes/border/border_radius_dto.dart @@ -56,9 +56,6 @@ sealed class BorderRadiusGeometryDto properties.addUsingDefault('bottomStart', bottomStart); properties.addUsingDefault('bottomEnd', bottomEnd); } - - @override - T resolve(MixData mix); } @MixableDto(generateUtility: false) diff --git a/packages/mix/lib/src/attributes/border/shape_border_dto.dart b/packages/mix/lib/src/attributes/border/shape_border_dto.dart index 31e69e7b3..0f3cbac0f 100644 --- a/packages/mix/lib/src/attributes/border/shape_border_dto.dart +++ b/packages/mix/lib/src/attributes/border/shape_border_dto.dart @@ -38,9 +38,6 @@ sealed class ShapeBorderDto extends Dto { @override ShapeBorderDto merge(covariant ShapeBorderDto? other); - - @override - T resolve(MixData mix); } @immutable @@ -86,9 +83,6 @@ abstract class OutlinedBorderDto @override OutlinedBorderDto merge(covariant OutlinedBorderDto? other); - - @override - T resolve(MixData mix); } @MixableDto() diff --git a/packages/mix/lib/src/core/attribute.dart b/packages/mix/lib/src/core/attribute.dart index 5f7af9e69..8680ea442 100644 --- a/packages/mix/lib/src/core/attribute.dart +++ b/packages/mix/lib/src/core/attribute.dart @@ -3,14 +3,12 @@ import 'package:flutter/widgets.dart'; import '../internal/compare_mixin.dart'; import 'dto.dart'; -abstract class Attribute with MergeableMixin, EqualityMixin { +abstract class Attribute with MergeableMixin, EqualityMixin { const Attribute(); // Used as the key to determine how // attributes get merged Object get mergeKey => runtimeType; - @override - Attribute merge(covariant Attribute? other); } /// Provides the ability to merge this object with another of the same type. diff --git a/packages/mix/lib/src/core/dto.dart b/packages/mix/lib/src/core/dto.dart index 2245a60fc..1ff8621cb 100644 --- a/packages/mix/lib/src/core/dto.dart +++ b/packages/mix/lib/src/core/dto.dart @@ -6,15 +6,12 @@ import 'factory/mix_data.dart'; import 'utility.dart'; @immutable -abstract class Dto with EqualityMixin, MergeableMixin { +abstract class Dto with EqualityMixin, MergeableMixin { const Dto(); Value get defaultValue; Value resolve(MixData mix); - // /// Merges this object with [other], returning a new object of type [T]. - @override - Dto merge(covariant Dto? other); } abstract class DtoUtility, Value> diff --git a/packages/mix/lib/src/core/modifier.dart b/packages/mix/lib/src/core/modifier.dart index de2e1a40b..c4e1180e0 100644 --- a/packages/mix/lib/src/core/modifier.dart +++ b/packages/mix/lib/src/core/modifier.dart @@ -2,7 +2,6 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/widgets.dart'; import 'attribute.dart'; -import 'factory/mix_data.dart'; import 'spec.dart'; import 'utility.dart'; @@ -34,9 +33,6 @@ abstract class WidgetModifierSpecAttribute< Value extends WidgetModifierSpec> extends SpecAttribute with Diagnosticable { const WidgetModifierSpecAttribute(); - - @override - Value resolve(MixData mix); } abstract class WidgetModifierUtility< diff --git a/packages/mix/lib/src/core/styled_widget.dart b/packages/mix/lib/src/core/styled_widget.dart index a3626566e..29f156ca5 100644 --- a/packages/mix/lib/src/core/styled_widget.dart +++ b/packages/mix/lib/src/core/styled_widget.dart @@ -58,9 +58,6 @@ abstract class StyledWidget extends StatelessWidget { builder: builder, ); } - - @override - Widget build(BuildContext context); } /// A styled widget that builds its child using a [MixData] object. diff --git a/packages/mix/lib/src/specs/icon/icon_widget.dart b/packages/mix/lib/src/specs/icon/icon_widget.dart index 195a29f11..60d0e4d2d 100644 --- a/packages/mix/lib/src/specs/icon/icon_widget.dart +++ b/packages/mix/lib/src/specs/icon/icon_widget.dart @@ -15,8 +15,7 @@ class StyledIcon extends StyledWidget { @Deprecated('Use orderOfModifiers parameter instead') List modifierOrder = const [], List orderOfModifiers = const [], - }) : assert(modifierOrder == const [] || - orderOfModifiers == const []), + }) : assert(modifierOrder.length == 0 || orderOfModifiers.length == 0), super( orderOfModifiers: orderOfModifiers == const [] ? modifierOrder : orderOfModifiers, @@ -61,10 +60,9 @@ class IconSpecWidget extends StatelessWidget { @Deprecated('Use orderOfModifiers parameter instead') List modifierOrder = const [], List orderOfModifiers = const [], - }) : assert(modifierOrder == const [] || - orderOfModifiers == const []), + }) : assert(modifierOrder.length == 0 || orderOfModifiers.length == 0), orderOfModifiers = - orderOfModifiers == const [] ? modifierOrder : orderOfModifiers; + orderOfModifiers.length == 0 ? modifierOrder : orderOfModifiers; final IconData? icon; final IconSpec? spec; @@ -105,12 +103,10 @@ class AnimatedStyledIcon extends StyledWidget { @Deprecated('Use orderOfModifiers parameter instead') List modifierOrder = const [], List orderOfModifiers = const [], - }) : assert(modifierOrder == const [] || - orderOfModifiers == const []), + }) : assert(modifierOrder.length == 0 || orderOfModifiers.length == 0), super( - orderOfModifiers: orderOfModifiers == const [] - ? modifierOrder - : orderOfModifiers, + orderOfModifiers: + orderOfModifiers.length == 0 ? modifierOrder : orderOfModifiers, ); final AnimatedIconData icon; @@ -148,11 +144,9 @@ class AnimatedIconSpecWidget extends ImplicitlyAnimatedWidget { @Deprecated('Use orderOfModifiers parameter instead') List modifierOrder = const [], List orderOfModifiers = const [], - }) : assert(modifierOrder == const [] || - orderOfModifiers == const []), - orderOfModifiers = orderOfModifiers == const [] - ? modifierOrder - : orderOfModifiers; + }) : assert(modifierOrder.length == 0 || orderOfModifiers.length == 0), + orderOfModifiers = + orderOfModifiers.length == 0 ? modifierOrder : orderOfModifiers; final IconData? icon; final IconSpec spec; diff --git a/packages/mix/lib/src/theme/mix/mix_theme.dart b/packages/mix/lib/src/theme/mix/mix_theme.dart index db019d343..d67b4a97c 100644 --- a/packages/mix/lib/src/theme/mix/mix_theme.dart +++ b/packages/mix/lib/src/theme/mix/mix_theme.dart @@ -1,3 +1,4 @@ +import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import '../../internal/iterable_ext.dart'; @@ -152,7 +153,7 @@ class MixThemeData { other.breakpoints == breakpoints && other.radii == radii && other.spaces == spaces && - other.defaultOrderOfModifiers == defaultOrderOfModifiers; + listEquals(other.defaultOrderOfModifiers, defaultOrderOfModifiers); } @override diff --git a/packages/mix/lib/src/variants/context_variant.dart b/packages/mix/lib/src/variants/context_variant.dart index 22d037eeb..3619553d5 100644 --- a/packages/mix/lib/src/variants/context_variant.dart +++ b/packages/mix/lib/src/variants/context_variant.dart @@ -39,9 +39,6 @@ abstract class ContextVariant extends IVariant { return VariantAttribute(this, Style.create(params)); } - @override - bool when(BuildContext context); - @override VariantPriority get priority => VariantPriority.normal; From b87ab9009003115930d434fd02626ff0a84782fc Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Thu, 14 Nov 2024 15:26:30 -0300 Subject: [PATCH 13/57] remove orderOfModifiers --- .../mix/lib/src/specs/icon/icon_widget.dart | 26 ++++++------------- 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/packages/mix/lib/src/specs/icon/icon_widget.dart b/packages/mix/lib/src/specs/icon/icon_widget.dart index 60d0e4d2d..b2bed6229 100644 --- a/packages/mix/lib/src/specs/icon/icon_widget.dart +++ b/packages/mix/lib/src/specs/icon/icon_widget.dart @@ -14,12 +14,8 @@ class StyledIcon extends StyledWidget { this.textDirection, @Deprecated('Use orderOfModifiers parameter instead') List modifierOrder = const [], - List orderOfModifiers = const [], - }) : assert(modifierOrder.length == 0 || orderOfModifiers.length == 0), - super( - orderOfModifiers: - orderOfModifiers == const [] ? modifierOrder : orderOfModifiers, - ); + super.orderOfModifiers = const [], + }); final IconData? icon; final String? semanticLabel; @@ -59,10 +55,8 @@ class IconSpecWidget extends StatelessWidget { this.textDirection, @Deprecated('Use orderOfModifiers parameter instead') List modifierOrder = const [], - List orderOfModifiers = const [], - }) : assert(modifierOrder.length == 0 || orderOfModifiers.length == 0), - orderOfModifiers = - orderOfModifiers.length == 0 ? modifierOrder : orderOfModifiers; + this.orderOfModifiers = const [], + }); final IconData? icon; final IconSpec? spec; @@ -103,10 +97,8 @@ class AnimatedStyledIcon extends StyledWidget { @Deprecated('Use orderOfModifiers parameter instead') List modifierOrder = const [], List orderOfModifiers = const [], - }) : assert(modifierOrder.length == 0 || orderOfModifiers.length == 0), - super( - orderOfModifiers: - orderOfModifiers.length == 0 ? modifierOrder : orderOfModifiers, + }) : super( + orderOfModifiers: false ? modifierOrder : orderOfModifiers, ); final AnimatedIconData icon; @@ -143,10 +135,8 @@ class AnimatedIconSpecWidget extends ImplicitlyAnimatedWidget { super.onEnd, @Deprecated('Use orderOfModifiers parameter instead') List modifierOrder = const [], - List orderOfModifiers = const [], - }) : assert(modifierOrder.length == 0 || orderOfModifiers.length == 0), - orderOfModifiers = - orderOfModifiers.length == 0 ? modifierOrder : orderOfModifiers; + this.orderOfModifiers = const [], + }); final IconData? icon; final IconSpec spec; From 976d4ad3a5eb668e0033941195b96f2974d6ac5c Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Thu, 14 Nov 2024 15:31:19 -0300 Subject: [PATCH 14/57] fix warnings --- packages/mix/lib/src/specs/icon/icon_widget.dart | 6 ++---- .../mix/test/src/specs/flexbox/flexbox_widget_test.dart | 2 -- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/mix/lib/src/specs/icon/icon_widget.dart b/packages/mix/lib/src/specs/icon/icon_widget.dart index b2bed6229..c9c7b42ed 100644 --- a/packages/mix/lib/src/specs/icon/icon_widget.dart +++ b/packages/mix/lib/src/specs/icon/icon_widget.dart @@ -96,10 +96,8 @@ class AnimatedStyledIcon extends StyledWidget { this.textDirection, @Deprecated('Use orderOfModifiers parameter instead') List modifierOrder = const [], - List orderOfModifiers = const [], - }) : super( - orderOfModifiers: false ? modifierOrder : orderOfModifiers, - ); + super.orderOfModifiers = const [], + }); final AnimatedIconData icon; final String? semanticLabel; diff --git a/packages/mix/test/src/specs/flexbox/flexbox_widget_test.dart b/packages/mix/test/src/specs/flexbox/flexbox_widget_test.dart index dd629ab5f..6cc555902 100644 --- a/packages/mix/test/src/specs/flexbox/flexbox_widget_test.dart +++ b/packages/mix/test/src/specs/flexbox/flexbox_widget_test.dart @@ -102,7 +102,6 @@ void main() { ), ).animate( onEnd: () { - print('onEnd'); countOnEnd++; }, ), @@ -142,7 +141,6 @@ void main() { ), ).animate( onEnd: () { - print('onEnd'); countOnEnd++; }, ), From eee9b7f3d640ae84348c67d3a027860182a2f954 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Thu, 14 Nov 2024 16:17:25 -0300 Subject: [PATCH 15/57] fix lint --- lints_with_dcm.yaml | 1 + packages/mix/lib/src/theme/tokens/text_style_token.dart | 1 + 2 files changed, 2 insertions(+) diff --git a/lints_with_dcm.yaml b/lints_with_dcm.yaml index 05262ac5b..8b12ede68 100644 --- a/lints_with_dcm.yaml +++ b/lints_with_dcm.yaml @@ -24,6 +24,7 @@ dart_code_metrics: avoid-unsafe-collection-methods: false prefer-prefixed-global-constants: false avoid-returning-widgets: false + avoid-unnecessary-overrides: false arguments-ordering: first: - key diff --git a/packages/mix/lib/src/theme/tokens/text_style_token.dart b/packages/mix/lib/src/theme/tokens/text_style_token.dart index 743fa045e..61ab9aacd 100644 --- a/packages/mix/lib/src/theme/tokens/text_style_token.dart +++ b/packages/mix/lib/src/theme/tokens/text_style_token.dart @@ -1,3 +1,4 @@ +//ignore_for_file: avoid-suspicious-super-overrides import 'package:flutter/widgets.dart'; import '../../internal/mix_error.dart'; From 0c9023402b1a0863feeb2e2cb7211fa7688aee79 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Wed, 23 Oct 2024 14:40:53 -0300 Subject: [PATCH 16/57] small fixes --- .../remix/demo/lib/components/radio_use_case.dart | 11 +++++++++++ packages/remix/lib/remix.dart | 2 +- .../lib/src/components/checkbox/checkbox_widget.dart | 1 + 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/remix/demo/lib/components/radio_use_case.dart b/packages/remix/demo/lib/components/radio_use_case.dart index cb8972112..a6d2445e1 100644 --- a/packages/remix/demo/lib/components/radio_use_case.dart +++ b/packages/remix/demo/lib/components/radio_use_case.dart @@ -15,6 +15,17 @@ enum Theme { name: 'Radio Component', type: Radio, ) +class _ThemeState extends ValueNotifier { + _ThemeState(super.value); + + void update(Theme value) { + this.value = value; + notifyListeners(); + } +} + +_ThemeState _state = _ThemeState(Theme.dark); + Widget buildRadioUseCase(BuildContext context) { return Scaffold( body: Center( diff --git a/packages/remix/lib/remix.dart b/packages/remix/lib/remix.dart index d7626d2a3..9ea8d5356 100644 --- a/packages/remix/lib/remix.dart +++ b/packages/remix/lib/remix.dart @@ -42,8 +42,8 @@ export 'src/components/select/select.dart'; export 'src/components/slider/slider.dart'; export 'src/components/spinner/spinner.dart'; export 'src/components/switch/switch.dart'; -export 'src/components/toast/toast.dart'; export 'src/components/textfield/textfield.dart'; +export 'src/components/toast/toast.dart'; /// HELPERS export 'src/helpers/color_palette.dart'; diff --git a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart index ebe41b1c0..f92372dc9 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart @@ -100,3 +100,4 @@ class _CheckboxState extends State { ); } } + // if (widget.label != null) spec.label(widget.label!), From 0484e41c00f35ffc521f889e6dee08e7f422b694 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Wed, 23 Oct 2024 14:43:40 -0300 Subject: [PATCH 17/57] lint --- packages/remix/lib/src/components/checkbox/checkbox_widget.dart | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart index f92372dc9..ebe41b1c0 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart @@ -100,4 +100,3 @@ class _CheckboxState extends State { ); } } - // if (widget.label != null) spec.label(widget.label!), From 77ca8d62a6d46d87c91b32448ceda9a56d79c170 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Wed, 23 Oct 2024 15:05:21 -0300 Subject: [PATCH 18/57] Update radio_use_case.dart --- .../remix/demo/lib/components/radio_use_case.dart | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/remix/demo/lib/components/radio_use_case.dart b/packages/remix/demo/lib/components/radio_use_case.dart index a6d2445e1..cb8972112 100644 --- a/packages/remix/demo/lib/components/radio_use_case.dart +++ b/packages/remix/demo/lib/components/radio_use_case.dart @@ -15,17 +15,6 @@ enum Theme { name: 'Radio Component', type: Radio, ) -class _ThemeState extends ValueNotifier { - _ThemeState(super.value); - - void update(Theme value) { - this.value = value; - notifyListeners(); - } -} - -_ThemeState _state = _ThemeState(Theme.dark); - Widget buildRadioUseCase(BuildContext context) { return Scaffold( body: Center( From 9da3188d3c65942425a14f5d2de9c95611aa1b08 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Fri, 25 Oct 2024 15:52:01 -0300 Subject: [PATCH 19/57] checkbox --- .../lib/src/components/checkbox/checkbox.dart | 18 +-- .../src/components/checkbox/checkbox.g.dart | 108 +++++++++--------- .../components/checkbox/checkbox_style.dart | 29 +++-- .../components/checkbox/checkbox_theme.dart | 55 +++++---- .../components/checkbox/checkbox_widget.dart | 21 +++- website/pages/docs/remix/checkbox.md | 57 +++++++++ 6 files changed, 186 insertions(+), 102 deletions(-) create mode 100644 website/pages/docs/remix/checkbox.md diff --git a/packages/remix/lib/src/components/checkbox/checkbox.dart b/packages/remix/lib/src/components/checkbox/checkbox.dart index 4c45b5c41..bc3f6d950 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox.dart @@ -14,9 +14,9 @@ part 'checkbox_widget.dart'; @MixableSpec() base class CheckboxSpec extends Spec with _$CheckboxSpec, Diagnosticable { - final BoxSpec container; - final FlexSpec containerLayout; - final IconSpec indicator; + final FlexSpec layout; + final BoxSpec indicatorContainer; + final IconSpec indicatorIcon; final TextSpec label; /// {@macro checkbox_spec_of} @@ -25,15 +25,15 @@ base class CheckboxSpec extends Spec static const from = _$CheckboxSpec.from; const CheckboxSpec({ - BoxSpec? container, - IconSpec? indicator, - FlexSpec? containerLayout, + BoxSpec? indicatorContainer, + IconSpec? indicatorIcon, + FlexSpec? layout, TextSpec? label, super.modifiers, super.animated, - }) : container = container ?? const BoxSpec(), - indicator = indicator ?? const IconSpec(), - containerLayout = containerLayout ?? const FlexSpec(), + }) : indicatorContainer = indicatorContainer ?? const BoxSpec(), + indicatorIcon = indicatorIcon ?? const IconSpec(), + layout = layout ?? const FlexSpec(), label = label ?? const TextSpec(); @override diff --git a/packages/remix/lib/src/components/checkbox/checkbox.g.dart b/packages/remix/lib/src/components/checkbox/checkbox.g.dart index 925e5f2ad..2e3b72c80 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox.g.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox.g.dart @@ -33,17 +33,17 @@ mixin _$CheckboxSpec on Spec { /// replaced with the new values. @override CheckboxSpec copyWith({ - BoxSpec? container, - IconSpec? indicator, - FlexSpec? containerLayout, + BoxSpec? indicatorContainer, + IconSpec? indicatorIcon, + FlexSpec? layout, TextSpec? label, WidgetModifiersData? modifiers, AnimatedData? animated, }) { return CheckboxSpec( - container: container ?? _$this.container, - indicator: indicator ?? _$this.indicator, - containerLayout: containerLayout ?? _$this.containerLayout, + indicatorContainer: indicatorContainer ?? _$this.indicatorContainer, + indicatorIcon: indicatorIcon ?? _$this.indicatorIcon, + layout: layout ?? _$this.layout, label: label ?? _$this.label, modifiers: modifiers ?? _$this.modifiers, animated: animated ?? _$this.animated, @@ -61,9 +61,9 @@ mixin _$CheckboxSpec on Spec { /// The interpolation is performed on each property of the [CheckboxSpec] using the appropriate /// interpolation method: /// - /// - [BoxSpec.lerp] for [container]. - /// - [IconSpec.lerp] for [indicator]. - /// - [FlexSpec.lerp] for [containerLayout]. + /// - [BoxSpec.lerp] for [indicatorContainer]. + /// - [IconSpec.lerp] for [indicatorIcon]. + /// - [FlexSpec.lerp] for [layout]. /// - [TextSpec.lerp] for [label]. /// For [modifiers] and [animated], the interpolation is performed using a step function. @@ -77,9 +77,10 @@ mixin _$CheckboxSpec on Spec { if (other == null) return _$this; return CheckboxSpec( - container: _$this.container.lerp(other.container, t), - indicator: _$this.indicator.lerp(other.indicator, t), - containerLayout: _$this.containerLayout.lerp(other.containerLayout, t), + indicatorContainer: + _$this.indicatorContainer.lerp(other.indicatorContainer, t), + indicatorIcon: _$this.indicatorIcon.lerp(other.indicatorIcon, t), + layout: _$this.layout.lerp(other.layout, t), label: _$this.label.lerp(other.label, t), modifiers: other.modifiers, animated: t < 0.5 ? _$this.animated : other.animated, @@ -92,9 +93,9 @@ mixin _$CheckboxSpec on Spec { /// compare two [CheckboxSpec] instances for equality. @override List get props => [ - _$this.container, - _$this.indicator, - _$this.containerLayout, + _$this.indicatorContainer, + _$this.indicatorIcon, + _$this.layout, _$this.label, _$this.modifiers, _$this.animated, @@ -103,13 +104,13 @@ mixin _$CheckboxSpec on Spec { CheckboxSpec get _$this => this as CheckboxSpec; void _debugFillProperties(DiagnosticPropertiesBuilder properties) { - properties.add( - DiagnosticsProperty('container', _$this.container, defaultValue: null)); - properties.add( - DiagnosticsProperty('indicator', _$this.indicator, defaultValue: null)); properties.add(DiagnosticsProperty( - 'containerLayout', _$this.containerLayout, + 'indicatorContainer', _$this.indicatorContainer, defaultValue: null)); + properties.add(DiagnosticsProperty('indicatorIcon', _$this.indicatorIcon, + defaultValue: null)); + properties + .add(DiagnosticsProperty('layout', _$this.layout, defaultValue: null)); properties .add(DiagnosticsProperty('label', _$this.label, defaultValue: null)); properties.add( @@ -128,15 +129,15 @@ mixin _$CheckboxSpec on Spec { /// the [CheckboxSpec] constructor. base class CheckboxSpecAttribute extends SpecAttribute with Diagnosticable { - final BoxSpecAttribute? container; - final IconSpecAttribute? indicator; - final FlexSpecAttribute? containerLayout; + final BoxSpecAttribute? indicatorContainer; + final IconSpecAttribute? indicatorIcon; + final FlexSpecAttribute? layout; final TextSpecAttribute? label; const CheckboxSpecAttribute({ - this.container, - this.indicator, - this.containerLayout, + this.indicatorContainer, + this.indicatorIcon, + this.layout, this.label, super.modifiers, super.animated, @@ -153,9 +154,9 @@ base class CheckboxSpecAttribute extends SpecAttribute @override CheckboxSpec resolve(MixData mix) { return CheckboxSpec( - container: container?.resolve(mix), - indicator: indicator?.resolve(mix), - containerLayout: containerLayout?.resolve(mix), + indicatorContainer: indicatorContainer?.resolve(mix), + indicatorIcon: indicatorIcon?.resolve(mix), + layout: layout?.resolve(mix), label: label?.resolve(mix), modifiers: modifiers?.resolve(mix), animated: animated?.resolve(mix) ?? mix.animation, @@ -175,10 +176,11 @@ base class CheckboxSpecAttribute extends SpecAttribute if (other == null) return this; return CheckboxSpecAttribute( - container: container?.merge(other.container) ?? other.container, - indicator: indicator?.merge(other.indicator) ?? other.indicator, - containerLayout: containerLayout?.merge(other.containerLayout) ?? - other.containerLayout, + indicatorContainer: indicatorContainer?.merge(other.indicatorContainer) ?? + other.indicatorContainer, + indicatorIcon: + indicatorIcon?.merge(other.indicatorIcon) ?? other.indicatorIcon, + layout: layout?.merge(other.layout) ?? other.layout, label: label?.merge(other.label) ?? other.label, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, animated: animated?.merge(other.animated) ?? other.animated, @@ -191,9 +193,9 @@ base class CheckboxSpecAttribute extends SpecAttribute /// compare two [CheckboxSpecAttribute] instances for equality. @override List get props => [ - container, - indicator, - containerLayout, + indicatorContainer, + indicatorIcon, + layout, label, modifiers, animated, @@ -202,12 +204,11 @@ base class CheckboxSpecAttribute extends SpecAttribute @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); - properties - .add(DiagnosticsProperty('container', container, defaultValue: null)); - properties - .add(DiagnosticsProperty('indicator', indicator, defaultValue: null)); - properties.add(DiagnosticsProperty('containerLayout', containerLayout, + properties.add(DiagnosticsProperty('indicatorContainer', indicatorContainer, + defaultValue: null)); + properties.add(DiagnosticsProperty('indicatorIcon', indicatorIcon, defaultValue: null)); + properties.add(DiagnosticsProperty('layout', layout, defaultValue: null)); properties.add(DiagnosticsProperty('label', label, defaultValue: null)); properties .add(DiagnosticsProperty('modifiers', modifiers, defaultValue: null)); @@ -222,14 +223,15 @@ base class CheckboxSpecAttribute extends SpecAttribute /// Use the methods of this class to configure specific properties of a [CheckboxSpec]. class CheckboxSpecUtility extends SpecUtility { - /// Utility for defining [CheckboxSpecAttribute.container] - late final container = BoxSpecUtility((v) => only(container: v)); + /// Utility for defining [CheckboxSpecAttribute.indicatorContainer] + late final indicatorContainer = + BoxSpecUtility((v) => only(indicatorContainer: v)); - /// Utility for defining [CheckboxSpecAttribute.indicator] - late final indicator = IconSpecUtility((v) => only(indicator: v)); + /// Utility for defining [CheckboxSpecAttribute.indicatorIcon] + late final indicatorIcon = IconSpecUtility((v) => only(indicatorIcon: v)); - /// Utility for defining [CheckboxSpecAttribute.containerLayout] - late final containerLayout = FlexSpecUtility((v) => only(containerLayout: v)); + /// Utility for defining [CheckboxSpecAttribute.layout] + late final layout = FlexSpecUtility((v) => only(layout: v)); /// Utility for defining [CheckboxSpecAttribute.label] late final label = TextSpecUtility((v) => only(label: v)); @@ -251,17 +253,17 @@ class CheckboxSpecUtility /// Returns a new [CheckboxSpecAttribute] with the specified properties. @override T only({ - BoxSpecAttribute? container, - IconSpecAttribute? indicator, - FlexSpecAttribute? containerLayout, + BoxSpecAttribute? indicatorContainer, + IconSpecAttribute? indicatorIcon, + FlexSpecAttribute? layout, TextSpecAttribute? label, WidgetModifiersDataDto? modifiers, AnimatedDataDto? animated, }) { return builder(CheckboxSpecAttribute( - container: container, - indicator: indicator, - containerLayout: containerLayout, + indicatorContainer: indicatorContainer, + indicatorIcon: indicatorIcon, + layout: layout, label: label, modifiers: modifiers, animated: animated, diff --git a/packages/remix/lib/src/components/checkbox/checkbox_style.dart b/packages/remix/lib/src/components/checkbox/checkbox_style.dart index f2060bb69..f4ce858ee 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox_style.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox_style.dart @@ -8,18 +8,21 @@ class CheckboxStyle extends SpecStyle { final $ = spec.utilities; final containerStyle = [ - $.container.chain + $.indicatorContainer.chain ..borderRadius(4) ..border.all.color.black(), - spec.on.selected($.container.color.black()), + spec.on.selected($.indicatorContainer.color.black()), ]; final indicatorStyle = [ - $.indicator.chain + $.indicatorIcon.chain ..size(16) ..color.white() ..wrap.opacity(0), - spec.on.selected($.indicator.wrap.opacity(1), $.indicator.color.white()), + spec.on.selected( + $.indicatorIcon.wrap.opacity(1), + $.indicatorIcon.color.white(), + ), ]; final labelStyle = $.label.chain @@ -28,23 +31,23 @@ class CheckboxStyle extends SpecStyle { ..style.fontWeight.w500() ..textHeightBehavior.heightToFirstAscent.off(); - final containerLayoutStyle = $.containerLayout.chain + final layoutStyle = $.layout.chain ..crossAxisAlignment.center() ..mainAxisAlignment.start() ..mainAxisSize.min() ..gap(8); final disabledStyle = spec.on.disabled( - $.container.border.all.color.grey(), + $.indicatorContainer.border.all.color.grey(), $.label.style.color.grey(), - spec.on.selected($.container.color.grey()), + spec.on.selected($.indicatorContainer.color.grey()), ); return Style.create([ ...containerStyle, ...indicatorStyle, labelStyle, - containerLayoutStyle, + layoutStyle, disabledStyle, ]); } @@ -59,10 +62,12 @@ class CheckboxDarkStyle extends CheckboxStyle { return Style.create([ super.makeStyle(spec).call(), - $.container.border.all.color.white(), - $.indicator.color.black(), - spec.on.selected($.container.color.white()), - spec.on.selected($.indicator.color.black()), + $.indicatorContainer.border.all.color.white(), + $.indicatorIcon.color.black(), + spec.on.selected( + $.indicatorContainer.color.white(), + $.indicatorIcon.color.black(), + ), ]); } } diff --git a/packages/remix/lib/src/components/checkbox/checkbox_theme.dart b/packages/remix/lib/src/components/checkbox/checkbox_theme.dart index 336eeee4a..8a2962de3 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox_theme.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox_theme.dart @@ -13,37 +13,41 @@ class FortalezaCheckboxStyle extends CheckboxStyle { final baseStyle = super.makeStyle(spec); final baseOverrides = Style( - $.container.chain + $.indicatorContainer.chain ..border.all.width(0) ..border.all.style.none(), - $.indicator.chain + $.indicatorContainer.chain ..wrap.opacity(0) ..wrap.scale(0.5), $.label.style.color.$neutral(12), - spec.on.selected($.indicator.wrap.opacity(1), $.indicator.wrap.scale(1)), + spec.on.selected( + $.indicatorContainer.wrap.opacity(1), + $.indicatorContainer.wrap.scale(1), + ), ); final surfaceVariant = Style( - $.container.chain + $.indicatorContainer.chain ..border.strokeAlign(BorderSide.strokeAlignInside) ..border.color.$neutral(9) ..border.style.solid(), - $.indicator.color.$white(), - spec.on.hover($.container.color.$neutral(3)), + $.indicatorIcon.color.$white(), + spec.on.hover($.indicatorContainer.color.$neutral(3)), spec.on.selected( - $.container.chain + $.indicatorContainer.chain ..color.transparent() ..border.width(0) ..border.style.none() ..color.$accent(9), ), - (spec.on.hover & spec.on.selected)($.container.color.$accent(11)), + (spec.on.hover & + spec.on.selected)($.indicatorContainer.color.$accent(11)), spec.on.disabled( - $.container.color.$neutral(3), - $.container.border.all.color.$neutral(9), + $.indicatorContainer.color.$neutral(3), + $.indicatorContainer.border.all.color.$neutral(9), spec.on.selected( - $.indicator.color.$neutral(8), - $.container.chain + $.indicatorIcon.color.$neutral(8), + $.indicatorContainer.chain ..color.$neutral(3) ..border.width(1) ..border.all.color.$neutral(8) @@ -53,27 +57,28 @@ class FortalezaCheckboxStyle extends CheckboxStyle { ); final softVariant = Style( - $.container.border.style.none(), - $.container.color.$accentAlpha(6), - $.indicator.color.$accentAlpha(11), - spec.on.hover($.container.color.$accentAlpha(5)), - (spec.on.hover & spec.on.selected)($.container.color.$accentAlpha(5)), + $.indicatorContainer.border.style.none(), + $.indicatorContainer.color.$accentAlpha(6), + $.indicatorIcon.color.$accentAlpha(11), + spec.on.hover($.indicatorContainer.color.$accentAlpha(5)), + (spec.on.hover & + spec.on.selected)($.indicatorContainer.color.$accentAlpha(5)), spec.on.selected( - $.container.color.$accentAlpha(6), - $.indicator.color.$accentAlpha(11), + $.indicatorContainer.color.$accentAlpha(6), + $.indicatorIcon.color.$accentAlpha(11), ), spec.on.disabled( - $.container.color.$neutral(4), - spec.on.selected($.container.color.$neutral(3)), - spec.on.selected($.container.border.style.none()), + $.indicatorContainer.color.$neutral(4), + spec.on.selected($.indicatorContainer.color.$neutral(3)), + spec.on.selected($.indicatorContainer.border.style.none()), ), ); final disabledVariant = Style( - $.container.chain + $.indicatorContainer.chain ..color.$neutral(3) ..border.color.$neutral(5), - $.indicator.color.$neutral(7), + $.indicatorIcon.color.$neutral(7), $.label.style.color.$neutral(9), ); @@ -82,7 +87,7 @@ class FortalezaCheckboxStyle extends CheckboxStyle { baseStyle(), baseOverrides(), spec.on.disabled(disabledVariant()), - $.container.border.style.none(), + $.indicatorContainer.border.style.none(), surfaceVariant(), soft(softVariant()), ], diff --git a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart index ebe41b1c0..c256d2511 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart @@ -13,13 +13,28 @@ class Checkbox extends StatefulWidget { this.label, }); + /// Whether the checkbox is disabled. final bool disabled; + + /// Whether the checkbox is checked. final bool value; + + /// The icon to display when the checkbox is checked. final IconData iconChecked; + + /// The icon to display when the checkbox is unchecked. final IconData? iconUnchecked; + + /// The callback function that is called when the checkbox is tapped. final ValueChanged? onChanged; + + /// The style of the checkbox. final CheckboxStyle? style; + + /// The variants of the checkbox. final List variants; + + /// An optional label for the checkbox. final String? label; @override @@ -78,9 +93,9 @@ class _CheckboxState extends State { builder: (context) { final spec = CheckboxSpec.of(context); - final ContainerWidget = spec.container; - final ContainerLayout = spec.containerLayout; - final IconWidget = spec.indicator; + final ContainerWidget = spec.indicatorContainer; + final ContainerLayout = spec.layout; + final IconWidget = spec.indicatorIcon; return ContainerLayout( direction: Axis.horizontal, diff --git a/website/pages/docs/remix/checkbox.md b/website/pages/docs/remix/checkbox.md new file mode 100644 index 000000000..f442185c4 --- /dev/null +++ b/website/pages/docs/remix/checkbox.md @@ -0,0 +1,57 @@ +# Checkbox + +The `Checkbox` component is a widget that allows users to toggle an option on and off. + +## Usage + +{{A playground example}} + +```dart +//... +bool _value = false; +@override +Widget build(BuildContext context) { + + return Checkbox( + value: _value, + onChanged: (value) { + setState(() { + _value = value; + }); + }, + label: 'Remember me', + ); +} +``` + +## Properties + +| Property | Type | Description | +| -------- | -------- | -------- | +| `value` | `bool` | Whether the checkbox is checked. | +| `onChanged` | `ValueChanged?` | The callback function that is called when the checkbox is tapped. | +| `label` | `String?` | The label of the checkbox. | +| `disabled` | `bool` | Whether the checkbox is disabled. | +| `iconChecked` | `IconData` | The icon to display when the checkbox is checked. | +| `iconUnchecked` | `IconData?` | The icon to display when the checkbox is unchecked. | +| `style` | `CheckboxStyle?` | The style of the checkbox. | +| `variants` | `List` | The variants of the checkbox. | + +## Customization +As all remix's components, the `Checkbox` component can be customized using the `style` and `variants` properties. + +{{A customization example}} + +The attributes that can be customized are the following: + +### layout +This property controls the layout of the checkbox. It corresponds to the `FlexSpec` class, allowing you to utilize all the style properties available in `Flex` to customize the checkbox's layout. + +### indicatorContainer +This property controls the container that wraps the indicator of the checkbox. It corresponds to the `BoxSpec` class, allowing you to utilize all the style properties available in `Box` to customize the checkbox's indicator container. + +### indicatorIcon +This property controls the icon of the checkbox. It corresponds to the `IconSpec` class, allowing you to utilize all the style properties available in `StyledIcon` to customize the checkbox's indicator icon. + +### label +This property controls the label of the checkbox. It corresponds to the `TextSpec` class, allowing you to utilize all the style properties available in `StyledText` to customize the checkbox's label. From ee9ac51d53df7e8f7003f99a0a207d70a2eed2cc Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Fri, 25 Oct 2024 16:29:38 -0300 Subject: [PATCH 20/57] avatar --- .../src/components/avatar/avatar_widget.dart | 24 ++++++++++++++++++- .../components/checkbox/checkbox_widget.dart | 1 + packages/remix/lib/src/helpers/docs.dart | 19 +++++++++++++++ 3 files changed, 43 insertions(+), 1 deletion(-) create mode 100644 packages/remix/lib/src/helpers/docs.dart diff --git a/packages/remix/lib/src/components/avatar/avatar_widget.dart b/packages/remix/lib/src/components/avatar/avatar_widget.dart index fcdebb0a2..f67a248d2 100644 --- a/packages/remix/lib/src/components/avatar/avatar_widget.dart +++ b/packages/remix/lib/src/components/avatar/avatar_widget.dart @@ -9,9 +9,31 @@ class Avatar extends StatelessWidget { this.style, }); - final WidgetSpecBuilder fallbackBuilder; + /// The image to display in the avatar. final ImageProvider? image; + + /// A builder for the fallback widget. + /// + /// This builder creates a widget to display when the image + /// fails to load or isn't provided. While commonly used for initials, + /// it can render any widget, offering versatile fallback options. + /// + /// {@macro remix.widget_spec_builder.text_spec} + /// + /// ```dart + /// Avatar( + /// fallbackBuilder: (spec) => spec( + /// 'LF', + /// ), + /// ); + /// ``` + final WidgetSpecBuilder fallbackBuilder; + + /// The variants of the avatar. final List variants; + + /// The style of the avatar. + /// {@macro use_style_from_context} final AvatarStyle? style; @override diff --git a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart index c256d2511..c9d55954e 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart @@ -29,6 +29,7 @@ class Checkbox extends StatefulWidget { final ValueChanged? onChanged; /// The style of the checkbox. + /// {@macro use_style_from_context} final CheckboxStyle? style; /// The variants of the checkbox. diff --git a/packages/remix/lib/src/helpers/docs.dart b/packages/remix/lib/src/helpers/docs.dart new file mode 100644 index 000000000..80c02977a --- /dev/null +++ b/packages/remix/lib/src/helpers/docs.dart @@ -0,0 +1,19 @@ +// ignore_for_file: unused_element + +library docs; + +/// {@template remix.widget_spec_builder.text_spec} +/// The builder offers a [TextSpec] which can be used to style the +/// text consistently with component's style. +/// {@endtemplate} +/// {@template remix.widget_spec_builder.text_spec.code} +/// ```dart +/// +/// ``` +/// {@endtemplate} +const _widgetSpecBuilder = ''; + +/// {@template use_style_from_context} +/// If not provided, the style will be get from the context. +/// {@endtemplate} +const _useStyleFromContext = ''; From c0cd4f38f38c7b8bbf4f0820797a597843a583ed Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Fri, 25 Oct 2024 17:11:10 -0300 Subject: [PATCH 21/57] button --- .../src/components/avatar/avatar_widget.dart | 5 +- .../src/components/badge/badge_widget.dart | 5 ++ .../src/components/button/button_widget.dart | 51 ++++++++++--------- .../components/checkbox/checkbox_widget.dart | 2 +- packages/remix/lib/src/helpers/docs.dart | 13 ++++- .../checkbox/checkbox_widget_test.dart | 2 +- 6 files changed, 48 insertions(+), 30 deletions(-) diff --git a/packages/remix/lib/src/components/avatar/avatar_widget.dart b/packages/remix/lib/src/components/avatar/avatar_widget.dart index f67a248d2..ed090b5e9 100644 --- a/packages/remix/lib/src/components/avatar/avatar_widget.dart +++ b/packages/remix/lib/src/components/avatar/avatar_widget.dart @@ -29,11 +29,10 @@ class Avatar extends StatelessWidget { /// ``` final WidgetSpecBuilder fallbackBuilder; - /// The variants of the avatar. + /// {@macro remix.component.variants} final List variants; - /// The style of the avatar. - /// {@macro use_style_from_context} + /// {@macro remix.component.style} final AvatarStyle? style; @override diff --git a/packages/remix/lib/src/components/badge/badge_widget.dart b/packages/remix/lib/src/components/badge/badge_widget.dart index d34723cea..a89c4e2d1 100644 --- a/packages/remix/lib/src/components/badge/badge_widget.dart +++ b/packages/remix/lib/src/components/badge/badge_widget.dart @@ -8,8 +8,13 @@ class Badge extends StatelessWidget { this.variants = const [], }); + /// The label to display in the badge. final String label; + + /// {@macro remix.component.style} final BadgeStyle? style; + + /// {@macro remix.component.variants} final List variants; @override diff --git a/packages/remix/lib/src/components/button/button_widget.dart b/packages/remix/lib/src/components/button/button_widget.dart index c322587e5..5d1307410 100644 --- a/packages/remix/lib/src/components/button/button_widget.dart +++ b/packages/remix/lib/src/components/button/button_widget.dart @@ -1,19 +1,5 @@ part of 'button.dart'; -/// A customizable button component with various styling options. -/// -/// The [Button] allows you to create buttons with different variants, sizes, -/// and icons. You can also disable the button or show a loading state. -/// -/// Example usage: -/// -/// ```dart -/// RxButton( -/// label: 'Click me', -/// onPressed: () {}, -/// iconLeft: Icons.add, -/// ) -/// ``` class Button extends StatelessWidget { const Button({ super.key, @@ -23,26 +9,48 @@ class Button extends StatelessWidget { this.iconLeft, this.iconRight, this.spinnerBuilder, - this.variant, this.variants = const [], required this.onPressed, this.style, }); + /// The text content displayed in the center of the button. final String label; + + /// Whether the button is disabled or enabled. final bool disabled; + + /// Whether the button is loading or not. final bool loading; + + /// The icon displayed in the left side of the button. final IconData? iconLeft; + + /// The icon displayed in the right side of the button. final IconData? iconRight; + + /// Called when the button is tapped or otherwise activated final VoidCallback? onPressed; + + /// A builder for the spinner widget. + /// + /// This builder creates a widget to display when the button is loading. + /// + /// {@macro remix.widget_spec_builder.text_spec} + /// + /// ```dart + /// Button( + /// label: 'Click me', + /// onPressed: () {}, + /// spinnerBuilder: (spec) => spec(), + /// ); + /// ``` final WidgetSpecBuilder? spinnerBuilder; - final Variant? variant; + /// {@macro remix.component.variants} final List variants; - /// Additional custom styling for the button. - /// - /// This allows you to override or extend the default button styling. + /// {@macro remix.component.style} final ButtonStyle? style; @override @@ -56,10 +64,7 @@ class Button extends StatelessWidget { enabled: !isDisabled, onPress: disabled || loading ? null : onPressed, child: SpecBuilder( - style: style.makeStyle(configuration).applyVariants([ - ...variants, - if (variant != null) variant!, - ]), + style: style.makeStyle(configuration).applyVariants(variants), builder: (context) { return ButtonSpecWidget( spec: ButtonSpec.of(context), diff --git a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart index c9d55954e..49eae89cc 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart @@ -32,7 +32,7 @@ class Checkbox extends StatefulWidget { /// {@macro use_style_from_context} final CheckboxStyle? style; - /// The variants of the checkbox. + /// {@macro remix.component.variants} final List variants; /// An optional label for the checkbox. diff --git a/packages/remix/lib/src/helpers/docs.dart b/packages/remix/lib/src/helpers/docs.dart index 80c02977a..9fe21a6d7 100644 --- a/packages/remix/lib/src/helpers/docs.dart +++ b/packages/remix/lib/src/helpers/docs.dart @@ -13,7 +13,16 @@ library docs; /// {@endtemplate} const _widgetSpecBuilder = ''; -/// {@template use_style_from_context} -/// If not provided, the style will be get from the context. +/// {@template remix.component.variants} +/// The variants to apply to the component's style. +/// +/// All specified variants will be applied to the component if they are defined +/// in the corresponding Style. This allows for flexible customization of the +/// component's appearance based on predefined style variations. +/// {@endtemplate} +/// +/// {@template remix.component.style} +/// This property allows you to customize the appearance of the component. +/// If provided, it overrides or extends the style from the context. /// {@endtemplate} const _useStyleFromContext = ''; diff --git a/packages/remix/test/components/checkbox/checkbox_widget_test.dart b/packages/remix/test/components/checkbox/checkbox_widget_test.dart index abe07f564..eeb6f6db0 100644 --- a/packages/remix/test/components/checkbox/checkbox_widget_test.dart +++ b/packages/remix/test/components/checkbox/checkbox_widget_test.dart @@ -111,7 +111,7 @@ class FakeCheckboxStyle extends r.CheckboxStyle { final baseStyle = super.makeStyle(spec); return Style.create([ baseStyle(), - $.container.color(color), + $.indicatorContainer.color(color), ]); } } From beeb53963aeb362b116a1f631f89f148619637a7 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Fri, 25 Oct 2024 17:27:12 -0300 Subject: [PATCH 22/57] callout and button adjustments --- .../demo/lib/components/button_use_case.dart | 64 +++++++++++-------- .../lib/components/icon_button_use_case.dart | 42 +++++++----- .../ephemeral/FlutterInputs.xcfilelist | 1 - .../components/callout/callout_widget.dart | 9 ++- 4 files changed, 71 insertions(+), 45 deletions(-) diff --git a/packages/remix/demo/lib/components/button_use_case.dart b/packages/remix/demo/lib/components/button_use_case.dart index d935669c0..9b3a1d7dc 100644 --- a/packages/remix/demo/lib/components/button_use_case.dart +++ b/packages/remix/demo/lib/components/button_use_case.dart @@ -16,32 +16,44 @@ Widget buildButtonUseCase(BuildContext context) { key: _key, child: Scaffold( body: Center( - child: Button( - variants: [ - context.knobs.variant(FortalezaButtonStyle.variants), - ], - label: context.knobs.string( - label: 'Title', - initialValue: 'Button', - ), - onPressed: () {}, - disabled: context.knobs.boolean( - label: 'Disabled', - initialValue: false, - ), - loading: context.knobs.boolean( - label: 'loading', - initialValue: false, - ), - iconLeft: context.knobs.iconData( - label: 'Icon left', - initialValue: null, - ), - iconRight: context.knobs.iconData( - label: 'Icon right', - initialValue: null, - ), - ), + child: Builder(builder: (context) { + return Button( + variants: [ + context.knobs.variant(FortalezaButtonStyle.variants), + ], + label: context.knobs.string( + label: 'Title', + initialValue: 'Button', + ), + onPressed: () { + showToast( + context: context, + entry: ToastEntry( + showDuration: const Duration(milliseconds: 800), + builder: (context, actions) => const Toast( + title: 'Button pressed', + ), + ), + ); + }, + disabled: context.knobs.boolean( + label: 'Disabled', + initialValue: false, + ), + loading: context.knobs.boolean( + label: 'loading', + initialValue: false, + ), + iconLeft: context.knobs.iconData( + label: 'Icon left', + initialValue: null, + ), + iconRight: context.knobs.iconData( + label: 'Icon right', + initialValue: null, + ), + ); + }), ), ), ); diff --git a/packages/remix/demo/lib/components/icon_button_use_case.dart b/packages/remix/demo/lib/components/icon_button_use_case.dart index 479c7fb8d..a47573669 100644 --- a/packages/remix/demo/lib/components/icon_button_use_case.dart +++ b/packages/remix/demo/lib/components/icon_button_use_case.dart @@ -4,6 +4,7 @@ import 'package:flutter/widgets.dart'; import 'package:remix/remix.dart'; import 'package:widgetbook/widgetbook.dart'; import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook; + import '../helpers/knob_builder.dart'; final _key = GlobalKey(); @@ -17,21 +18,32 @@ Widget buildButtonUseCase(BuildContext context) { key: _key, child: Scaffold( body: Center( - child: IconButton( - m.Icons.add, - variants: [ - context.knobs.variant(FortalezaIconButtonStyle.variants), - ], - onPressed: () {}, - disabled: context.knobs.boolean( - label: 'Disabled', - initialValue: false, - ), - loading: context.knobs.boolean( - label: 'loading', - initialValue: false, - ), - ), + child: Builder(builder: (context) { + return IconButton( + m.Icons.add, + variants: [ + context.knobs.variant(FortalezaIconButtonStyle.variants), + ], + onPressed: () { + showToast( + context: context, + entry: ToastEntry( + showDuration: const Duration(milliseconds: 800), + builder: (context, actions) => + const Toast(title: 'Button pressed'), + ), + ); + }, + disabled: context.knobs.boolean( + label: 'Disabled', + initialValue: false, + ), + loading: context.knobs.boolean( + label: 'loading', + initialValue: false, + ), + ); + }), ), ), ); diff --git a/packages/remix/demo/macos/Flutter/ephemeral/FlutterInputs.xcfilelist b/packages/remix/demo/macos/Flutter/ephemeral/FlutterInputs.xcfilelist index 848d3cead..da4e17eeb 100644 --- a/packages/remix/demo/macos/Flutter/ephemeral/FlutterInputs.xcfilelist +++ b/packages/remix/demo/macos/Flutter/ephemeral/FlutterInputs.xcfilelist @@ -953,7 +953,6 @@ /Users/lucasoliveira/Developer/Mix/mix/packages/remix/lib/src/components/checkbox/checkbox_style.dart /Users/lucasoliveira/Developer/Mix/mix/packages/remix/lib/src/components/checkbox/checkbox_theme.dart /Users/lucasoliveira/Developer/Mix/mix/packages/remix/lib/src/components/checkbox/checkbox_widget.dart -/Users/lucasoliveira/Developer/Mix/mix/packages/remix/lib/src/components/checkbox_group/checkbox_group.dart /Users/lucasoliveira/Developer/Mix/mix/packages/remix/lib/src/components/chip/chip.dart /Users/lucasoliveira/Developer/Mix/mix/packages/remix/lib/src/components/chip/chip.g.dart /Users/lucasoliveira/Developer/Mix/mix/packages/remix/lib/src/components/chip/chip_style.dart diff --git a/packages/remix/lib/src/components/callout/callout_widget.dart b/packages/remix/lib/src/components/callout/callout_widget.dart index 1ab33b6cb..1a2406a73 100644 --- a/packages/remix/lib/src/components/callout/callout_widget.dart +++ b/packages/remix/lib/src/components/callout/callout_widget.dart @@ -9,13 +9,16 @@ class Callout extends StatelessWidget { this.style, }); + /// The text content displayed in the callout. final String text; + + /// The icon displayed in the callout. final IconData? icon; + + /// {@macro remix.component.variants} final List variants; - /// Additional custom styling for the callout. - /// - /// This allows you to override or extend the default callout styling. + /// {@macro remix.component.style} final CalloutStyle? style; @override From 1cd9d191e2483cd146ff66459bd84c6b6d141f66 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Fri, 25 Oct 2024 17:37:35 -0300 Subject: [PATCH 23/57] card --- .../remix/lib/src/components/card/card.dart | 4 ---- .../lib/src/components/card/card_widget.dart | 20 ++++--------------- packages/remix/lib/src/helpers/docs.dart | 5 +++-- 3 files changed, 7 insertions(+), 22 deletions(-) diff --git a/packages/remix/lib/src/components/card/card.dart b/packages/remix/lib/src/components/card/card.dart index b2641801a..f8a65e575 100644 --- a/packages/remix/lib/src/components/card/card.dart +++ b/packages/remix/lib/src/components/card/card.dart @@ -24,10 +24,6 @@ base class CardSpec extends Spec with _$CardSpec, Diagnosticable { const CardSpec({BoxSpec? container, super.modifiers, super.animated}) : container = container ?? const BoxSpec(); - Widget call({Key? key, required Widget child}) { - return CardSpecWidget(key: key, spec: this, child: child); - } - @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); diff --git a/packages/remix/lib/src/components/card/card_widget.dart b/packages/remix/lib/src/components/card/card_widget.dart index cab52786a..ca5d22a71 100644 --- a/packages/remix/lib/src/components/card/card_widget.dart +++ b/packages/remix/lib/src/components/card/card_widget.dart @@ -11,10 +11,10 @@ class Card extends StatelessWidget { /// The list of child widgets to be displayed inside the card. final Widget child; - /// Additional custom styling for the card. - /// - /// This allows you to override or extend the default card styling. + /// {@macro remix.component.style} final CardStyle? style; + + /// {@macro remix.component.variants} final List variants; @override @@ -28,20 +28,8 @@ class Card extends StatelessWidget { builder: (context) { final spec = CardSpec.of(context); - return CardSpecWidget(spec: spec, child: child); + return spec.container(child: child); }, ); } } - -class CardSpecWidget extends StatelessWidget { - const CardSpecWidget({super.key, required this.spec, required this.child}); - - final CardSpec? spec; - final Widget child; - - @override - Widget build(BuildContext context) { - return spec!.container(child: child); - } -} diff --git a/packages/remix/lib/src/helpers/docs.dart b/packages/remix/lib/src/helpers/docs.dart index 9fe21a6d7..2f8a093b2 100644 --- a/packages/remix/lib/src/helpers/docs.dart +++ b/packages/remix/lib/src/helpers/docs.dart @@ -22,7 +22,8 @@ const _widgetSpecBuilder = ''; /// {@endtemplate} /// /// {@template remix.component.style} -/// This property allows you to customize the appearance of the component. -/// If provided, it overrides or extends the style from the context. +/// Customizes the component's appearance, overriding the style from theme. +/// Use this to create unique variations or apply specific styling that +/// differs from the global theme. /// {@endtemplate} const _useStyleFromContext = ''; From f7141f2816e3b2a080e8adad5012f70fc04edfb2 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Fri, 25 Oct 2024 17:40:20 -0300 Subject: [PATCH 24/57] chip --- .../components/checkbox/checkbox_widget.dart | 5 ++- .../remix/lib/src/components/chip/chip.dart | 6 ++-- .../remix/lib/src/components/chip/chip.g.dart | 32 +++++++++---------- .../lib/src/components/chip/chip_style.dart | 6 ++-- .../lib/src/components/chip/chip_theme.dart | 4 +-- .../lib/src/components/chip/chip_widget.dart | 2 +- 6 files changed, 27 insertions(+), 28 deletions(-) diff --git a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart index 49eae89cc..b2a8f00f8 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart @@ -28,14 +28,13 @@ class Checkbox extends StatefulWidget { /// The callback function that is called when the checkbox is tapped. final ValueChanged? onChanged; - /// The style of the checkbox. - /// {@macro use_style_from_context} + /// {@macro remix.component.style} final CheckboxStyle? style; /// {@macro remix.component.variants} final List variants; - /// An optional label for the checkbox. + /// An optional label that will be displayed next to the checkbox. final String? label; @override diff --git a/packages/remix/lib/src/components/chip/chip.dart b/packages/remix/lib/src/components/chip/chip.dart index 067d46365..3a837a6d9 100644 --- a/packages/remix/lib/src/components/chip/chip.dart +++ b/packages/remix/lib/src/components/chip/chip.dart @@ -14,7 +14,7 @@ part 'chip_widget.dart'; @MixableSpec() class ChipSpec extends Spec with _$ChipSpec, Diagnosticable { - final FlexSpec flex; + final FlexSpec layout; final BoxSpec container; final IconSpec icon; final TextSpec label; @@ -26,12 +26,12 @@ class ChipSpec extends Spec with _$ChipSpec, Diagnosticable { const ChipSpec({ BoxSpec? container, - FlexSpec? flex, + FlexSpec? layout, IconSpec? icon, TextSpec? label, super.modifiers, super.animated, - }) : flex = flex ?? const FlexSpec(), + }) : layout = layout ?? const FlexSpec(), container = container ?? const BoxSpec(), icon = icon ?? const IconSpec(), label = label ?? const TextSpec(); diff --git a/packages/remix/lib/src/components/chip/chip.g.dart b/packages/remix/lib/src/components/chip/chip.g.dart index 0cce7d02c..796052837 100644 --- a/packages/remix/lib/src/components/chip/chip.g.dart +++ b/packages/remix/lib/src/components/chip/chip.g.dart @@ -34,7 +34,7 @@ mixin _$ChipSpec on Spec { @override ChipSpec copyWith({ BoxSpec? container, - FlexSpec? flex, + FlexSpec? layout, IconSpec? icon, TextSpec? label, WidgetModifiersData? modifiers, @@ -42,7 +42,7 @@ mixin _$ChipSpec on Spec { }) { return ChipSpec( container: container ?? _$this.container, - flex: flex ?? _$this.flex, + layout: layout ?? _$this.layout, icon: icon ?? _$this.icon, label: label ?? _$this.label, modifiers: modifiers ?? _$this.modifiers, @@ -62,7 +62,7 @@ mixin _$ChipSpec on Spec { /// interpolation method: /// /// - [BoxSpec.lerp] for [container]. - /// - [FlexSpec.lerp] for [flex]. + /// - [FlexSpec.lerp] for [layout]. /// - [IconSpec.lerp] for [icon]. /// - [TextSpec.lerp] for [label]. @@ -78,7 +78,7 @@ mixin _$ChipSpec on Spec { return ChipSpec( container: _$this.container.lerp(other.container, t), - flex: _$this.flex.lerp(other.flex, t), + layout: _$this.layout.lerp(other.layout, t), icon: _$this.icon.lerp(other.icon, t), label: _$this.label.lerp(other.label, t), modifiers: other.modifiers, @@ -93,7 +93,7 @@ mixin _$ChipSpec on Spec { @override List get props => [ _$this.container, - _$this.flex, + _$this.layout, _$this.icon, _$this.label, _$this.modifiers, @@ -106,7 +106,7 @@ mixin _$ChipSpec on Spec { properties.add( DiagnosticsProperty('container', _$this.container, defaultValue: null)); properties - .add(DiagnosticsProperty('flex', _$this.flex, defaultValue: null)); + .add(DiagnosticsProperty('layout', _$this.layout, defaultValue: null)); properties .add(DiagnosticsProperty('icon', _$this.icon, defaultValue: null)); properties @@ -127,13 +127,13 @@ mixin _$ChipSpec on Spec { /// the [ChipSpec] constructor. class ChipSpecAttribute extends SpecAttribute with Diagnosticable { final BoxSpecAttribute? container; - final FlexSpecAttribute? flex; + final FlexSpecAttribute? layout; final IconSpecAttribute? icon; final TextSpecAttribute? label; const ChipSpecAttribute({ this.container, - this.flex, + this.layout, this.icon, this.label, super.modifiers, @@ -152,7 +152,7 @@ class ChipSpecAttribute extends SpecAttribute with Diagnosticable { ChipSpec resolve(MixData mix) { return ChipSpec( container: container?.resolve(mix), - flex: flex?.resolve(mix), + layout: layout?.resolve(mix), icon: icon?.resolve(mix), label: label?.resolve(mix), modifiers: modifiers?.resolve(mix), @@ -174,7 +174,7 @@ class ChipSpecAttribute extends SpecAttribute with Diagnosticable { return ChipSpecAttribute( container: container?.merge(other.container) ?? other.container, - flex: flex?.merge(other.flex) ?? other.flex, + layout: layout?.merge(other.layout) ?? other.layout, icon: icon?.merge(other.icon) ?? other.icon, label: label?.merge(other.label) ?? other.label, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, @@ -189,7 +189,7 @@ class ChipSpecAttribute extends SpecAttribute with Diagnosticable { @override List get props => [ container, - flex, + layout, icon, label, modifiers, @@ -201,7 +201,7 @@ class ChipSpecAttribute extends SpecAttribute with Diagnosticable { super.debugFillProperties(properties); properties .add(DiagnosticsProperty('container', container, defaultValue: null)); - properties.add(DiagnosticsProperty('flex', flex, defaultValue: null)); + properties.add(DiagnosticsProperty('layout', layout, defaultValue: null)); properties.add(DiagnosticsProperty('icon', icon, defaultValue: null)); properties.add(DiagnosticsProperty('label', label, defaultValue: null)); properties @@ -220,8 +220,8 @@ class ChipSpecUtility /// Utility for defining [ChipSpecAttribute.container] late final container = BoxSpecUtility((v) => only(container: v)); - /// Utility for defining [ChipSpecAttribute.flex] - late final flex = FlexSpecUtility((v) => only(flex: v)); + /// Utility for defining [ChipSpecAttribute.layout] + late final layout = FlexSpecUtility((v) => only(layout: v)); /// Utility for defining [ChipSpecAttribute.icon] late final icon = IconSpecUtility((v) => only(icon: v)); @@ -247,7 +247,7 @@ class ChipSpecUtility @override T only({ BoxSpecAttribute? container, - FlexSpecAttribute? flex, + FlexSpecAttribute? layout, IconSpecAttribute? icon, TextSpecAttribute? label, WidgetModifiersDataDto? modifiers, @@ -255,7 +255,7 @@ class ChipSpecUtility }) { return builder(ChipSpecAttribute( container: container, - flex: flex, + layout: layout, icon: icon, label: label, modifiers: modifiers, diff --git a/packages/remix/lib/src/components/chip/chip_style.dart b/packages/remix/lib/src/components/chip/chip_style.dart index 3a9eaf35c..a800d28c1 100644 --- a/packages/remix/lib/src/components/chip/chip_style.dart +++ b/packages/remix/lib/src/components/chip/chip_style.dart @@ -7,8 +7,8 @@ class ChipStyle extends SpecStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final flexStyle = [ - $.flex.chain + final layoutStyle = [ + $.layout.chain ..mainAxisAlignment.center() ..crossAxisAlignment.center() ..mainAxisSize.min() @@ -49,7 +49,7 @@ class ChipStyle extends SpecStyle { ); return Style.create([ - ...flexStyle, + ...layoutStyle, ...iconStyle, ...labelStyle, ...containerStyle, diff --git a/packages/remix/lib/src/components/chip/chip_theme.dart b/packages/remix/lib/src/components/chip/chip_theme.dart index 0b7b80fee..4c55c6f94 100644 --- a/packages/remix/lib/src/components/chip/chip_theme.dart +++ b/packages/remix/lib/src/components/chip/chip_theme.dart @@ -11,7 +11,7 @@ class FortalezaChipStyle extends ChipStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final flexStyle = [$.flex.gap.$space(2)]; + final layoutStyle = [$.layout.gap.$space(2)]; final iconStyle = [$.icon.color.$accent()]; @@ -60,7 +60,7 @@ class FortalezaChipStyle extends ChipStyle { return Style.create([ super.makeStyle(spec).call(), - ...flexStyle, + ...layoutStyle, ...iconStyle, ...labelStyle, ...containerStyle, diff --git a/packages/remix/lib/src/components/chip/chip_widget.dart b/packages/remix/lib/src/components/chip/chip_widget.dart index 0c2af005a..ff94be27e 100644 --- a/packages/remix/lib/src/components/chip/chip_widget.dart +++ b/packages/remix/lib/src/components/chip/chip_widget.dart @@ -74,7 +74,7 @@ class _ChipState extends State { final spec = ChipSpec.of(context); return spec.container( - child: spec.flex( + child: spec.layout( direction: Axis.horizontal, children: [ if (widget.iconLeft != null) spec.icon(widget.iconLeft), From 8a441c6c61c049d900837fb519ffde00b9f09a59 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Mon, 4 Nov 2024 11:58:10 -0300 Subject: [PATCH 25/57] dialog --- .../todo_list/macos/Runner/AppDelegate.swift | 2 +- .../src/components/button/button_style.dart | 2 +- .../src/components/button/button_widget.dart | 2 +- .../lib/src/components/dialog/dialog.dart | 12 ++-- .../lib/src/components/dialog/dialog.g.dart | 71 ++++++++++--------- .../src/components/dialog/dialog_style.dart | 8 +-- .../src/components/dialog/dialog_widget.dart | 40 ++++++++++- 7 files changed, 88 insertions(+), 49 deletions(-) diff --git a/examples/todo_list/macos/Runner/AppDelegate.swift b/examples/todo_list/macos/Runner/AppDelegate.swift index d53ef6437..8e02df288 100644 --- a/examples/todo_list/macos/Runner/AppDelegate.swift +++ b/examples/todo_list/macos/Runner/AppDelegate.swift @@ -1,7 +1,7 @@ import Cocoa import FlutterMacOS -@NSApplicationMain +@main class AppDelegate: FlutterAppDelegate { override func applicationShouldTerminateAfterLastWindowClosed(_ sender: NSApplication) -> Bool { return true diff --git a/packages/remix/lib/src/components/button/button_style.dart b/packages/remix/lib/src/components/button/button_style.dart index 68b2cfb6f..dd6023a21 100644 --- a/packages/remix/lib/src/components/button/button_style.dart +++ b/packages/remix/lib/src/components/button/button_style.dart @@ -33,7 +33,7 @@ class ButtonStyle extends SpecStyle { final flexboxStyle = [ $.flexbox.chain ..borderRadius(6) - ..color.black() + ..color.red() ..padding.vertical(8) ..padding.horizontal(12) ..flex.mainAxisAlignment.center() diff --git a/packages/remix/lib/src/components/button/button_widget.dart b/packages/remix/lib/src/components/button/button_widget.dart index 5d1307410..54c701e0d 100644 --- a/packages/remix/lib/src/components/button/button_widget.dart +++ b/packages/remix/lib/src/components/button/button_widget.dart @@ -32,7 +32,7 @@ class Button extends StatelessWidget { /// Called when the button is tapped or otherwise activated final VoidCallback? onPressed; - /// A builder for the spinner widget. + /// A builder that returns a [Widget] for the button's spinner. /// /// This builder creates a widget to display when the button is loading. /// diff --git a/packages/remix/lib/src/components/dialog/dialog.dart b/packages/remix/lib/src/components/dialog/dialog.dart index 47a80ec92..3b0d2d684 100644 --- a/packages/remix/lib/src/components/dialog/dialog.dart +++ b/packages/remix/lib/src/components/dialog/dialog.dart @@ -86,8 +86,8 @@ class DialogSpec extends Spec with _$DialogSpec, Diagnosticable { final BoxSpec container; final TextSpec title; final TextSpec description; - final FlexSpec mainFlex; - final FlexSpec actionsFlex; + final FlexSpec containerLayout; + final FlexSpec actionsLayout; /// {@macro dialog_spec_of} static const of = _$DialogSpec.of; @@ -98,15 +98,15 @@ class DialogSpec extends Spec with _$DialogSpec, Diagnosticable { BoxSpec? container, TextSpec? title, TextSpec? description, - FlexSpec? mainFlex, - FlexSpec? actionsFlex, + FlexSpec? containerLayout, + FlexSpec? actionsLayout, super.modifiers, super.animated, }) : container = container ?? const BoxSpec(), title = title ?? const TextSpec(), description = description ?? const TextSpec(), - mainFlex = mainFlex ?? const FlexSpec(), - actionsFlex = actionsFlex ?? const FlexSpec(); + containerLayout = containerLayout ?? const FlexSpec(), + actionsLayout = actionsLayout ?? const FlexSpec(); @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { diff --git a/packages/remix/lib/src/components/dialog/dialog.g.dart b/packages/remix/lib/src/components/dialog/dialog.g.dart index 9e9eea992..23532ee59 100644 --- a/packages/remix/lib/src/components/dialog/dialog.g.dart +++ b/packages/remix/lib/src/components/dialog/dialog.g.dart @@ -36,8 +36,8 @@ mixin _$DialogSpec on Spec { BoxSpec? container, TextSpec? title, TextSpec? description, - FlexSpec? mainFlex, - FlexSpec? actionsFlex, + FlexSpec? containerLayout, + FlexSpec? actionsLayout, WidgetModifiersData? modifiers, AnimatedData? animated, }) { @@ -45,8 +45,8 @@ mixin _$DialogSpec on Spec { container: container ?? _$this.container, title: title ?? _$this.title, description: description ?? _$this.description, - mainFlex: mainFlex ?? _$this.mainFlex, - actionsFlex: actionsFlex ?? _$this.actionsFlex, + containerLayout: containerLayout ?? _$this.containerLayout, + actionsLayout: actionsLayout ?? _$this.actionsLayout, modifiers: modifiers ?? _$this.modifiers, animated: animated ?? _$this.animated, ); @@ -65,7 +65,7 @@ mixin _$DialogSpec on Spec { /// /// - [BoxSpec.lerp] for [container]. /// - [TextSpec.lerp] for [title] and [description]. - /// - [FlexSpec.lerp] for [mainFlex] and [actionsFlex]. + /// - [FlexSpec.lerp] for [containerLayout] and [actionsLayout]. /// For [modifiers] and [animated], the interpolation is performed using a step function. /// If [t] is less than 0.5, the value from the current [DialogSpec] is used. Otherwise, the value @@ -81,8 +81,8 @@ mixin _$DialogSpec on Spec { container: _$this.container.lerp(other.container, t), title: _$this.title.lerp(other.title, t), description: _$this.description.lerp(other.description, t), - mainFlex: _$this.mainFlex.lerp(other.mainFlex, t), - actionsFlex: _$this.actionsFlex.lerp(other.actionsFlex, t), + containerLayout: _$this.containerLayout.lerp(other.containerLayout, t), + actionsLayout: _$this.actionsLayout.lerp(other.actionsLayout, t), modifiers: other.modifiers, animated: t < 0.5 ? _$this.animated : other.animated, ); @@ -97,8 +97,8 @@ mixin _$DialogSpec on Spec { _$this.container, _$this.title, _$this.description, - _$this.mainFlex, - _$this.actionsFlex, + _$this.containerLayout, + _$this.actionsLayout, _$this.modifiers, _$this.animated, ]; @@ -112,9 +112,10 @@ mixin _$DialogSpec on Spec { .add(DiagnosticsProperty('title', _$this.title, defaultValue: null)); properties.add(DiagnosticsProperty('description', _$this.description, defaultValue: null)); - properties.add( - DiagnosticsProperty('mainFlex', _$this.mainFlex, defaultValue: null)); - properties.add(DiagnosticsProperty('actionsFlex', _$this.actionsFlex, + properties.add(DiagnosticsProperty( + 'containerLayout', _$this.containerLayout, + defaultValue: null)); + properties.add(DiagnosticsProperty('actionsLayout', _$this.actionsLayout, defaultValue: null)); properties.add( DiagnosticsProperty('modifiers', _$this.modifiers, defaultValue: null)); @@ -135,15 +136,15 @@ class DialogSpecAttribute extends SpecAttribute final BoxSpecAttribute? container; final TextSpecAttribute? title; final TextSpecAttribute? description; - final FlexSpecAttribute? mainFlex; - final FlexSpecAttribute? actionsFlex; + final FlexSpecAttribute? containerLayout; + final FlexSpecAttribute? actionsLayout; const DialogSpecAttribute({ this.container, this.title, this.description, - this.mainFlex, - this.actionsFlex, + this.containerLayout, + this.actionsLayout, super.modifiers, super.animated, }); @@ -162,8 +163,8 @@ class DialogSpecAttribute extends SpecAttribute container: container?.resolve(mix), title: title?.resolve(mix), description: description?.resolve(mix), - mainFlex: mainFlex?.resolve(mix), - actionsFlex: actionsFlex?.resolve(mix), + containerLayout: containerLayout?.resolve(mix), + actionsLayout: actionsLayout?.resolve(mix), modifiers: modifiers?.resolve(mix), animated: animated?.resolve(mix) ?? mix.animation, ); @@ -185,8 +186,10 @@ class DialogSpecAttribute extends SpecAttribute container: container?.merge(other.container) ?? other.container, title: title?.merge(other.title) ?? other.title, description: description?.merge(other.description) ?? other.description, - mainFlex: mainFlex?.merge(other.mainFlex) ?? other.mainFlex, - actionsFlex: actionsFlex?.merge(other.actionsFlex) ?? other.actionsFlex, + containerLayout: containerLayout?.merge(other.containerLayout) ?? + other.containerLayout, + actionsLayout: + actionsLayout?.merge(other.actionsLayout) ?? other.actionsLayout, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, animated: animated?.merge(other.animated) ?? other.animated, ); @@ -201,8 +204,8 @@ class DialogSpecAttribute extends SpecAttribute container, title, description, - mainFlex, - actionsFlex, + containerLayout, + actionsLayout, modifiers, animated, ]; @@ -215,10 +218,10 @@ class DialogSpecAttribute extends SpecAttribute properties.add(DiagnosticsProperty('title', title, defaultValue: null)); properties.add( DiagnosticsProperty('description', description, defaultValue: null)); - properties - .add(DiagnosticsProperty('mainFlex', mainFlex, defaultValue: null)); - properties.add( - DiagnosticsProperty('actionsFlex', actionsFlex, defaultValue: null)); + properties.add(DiagnosticsProperty('containerLayout', containerLayout, + defaultValue: null)); + properties.add(DiagnosticsProperty('actionsLayout', actionsLayout, + defaultValue: null)); properties .add(DiagnosticsProperty('modifiers', modifiers, defaultValue: null)); properties @@ -241,11 +244,11 @@ class DialogSpecUtility /// Utility for defining [DialogSpecAttribute.description] late final description = TextSpecUtility((v) => only(description: v)); - /// Utility for defining [DialogSpecAttribute.mainFlex] - late final mainFlex = FlexSpecUtility((v) => only(mainFlex: v)); + /// Utility for defining [DialogSpecAttribute.containerLayout] + late final containerLayout = FlexSpecUtility((v) => only(containerLayout: v)); - /// Utility for defining [DialogSpecAttribute.actionsFlex] - late final actionsFlex = FlexSpecUtility((v) => only(actionsFlex: v)); + /// Utility for defining [DialogSpecAttribute.actionsLayout] + late final actionsLayout = FlexSpecUtility((v) => only(actionsLayout: v)); /// Utility for defining [DialogSpecAttribute.modifiers] late final wrap = SpecModifierUtility((v) => only(modifiers: v)); @@ -267,8 +270,8 @@ class DialogSpecUtility BoxSpecAttribute? container, TextSpecAttribute? title, TextSpecAttribute? description, - FlexSpecAttribute? mainFlex, - FlexSpecAttribute? actionsFlex, + FlexSpecAttribute? containerLayout, + FlexSpecAttribute? actionsLayout, WidgetModifiersDataDto? modifiers, AnimatedDataDto? animated, }) { @@ -276,8 +279,8 @@ class DialogSpecUtility container: container, title: title, description: description, - mainFlex: mainFlex, - actionsFlex: actionsFlex, + containerLayout: containerLayout, + actionsLayout: actionsLayout, modifiers: modifiers, animated: animated, )); diff --git a/packages/remix/lib/src/components/dialog/dialog_style.dart b/packages/remix/lib/src/components/dialog/dialog_style.dart index 4d93b6543..d559174eb 100644 --- a/packages/remix/lib/src/components/dialog/dialog_style.dart +++ b/packages/remix/lib/src/components/dialog/dialog_style.dart @@ -14,13 +14,13 @@ class DialogStyle extends SpecStyle { ..constraints.minWidth(300) ..constraints.maxWidth(500); - final mainFlex = $.mainFlex.chain + final containerLayout = $.containerLayout.chain ..mainAxisSize.min() ..gap(4) ..crossAxisAlignment.start() ..direction.vertical(); - final actionsFlex = $.actionsFlex.chain + final actionsLayout = $.actionsLayout.chain ..mainAxisSize.max() ..mainAxisAlignment.end() ..gap(12) @@ -40,10 +40,10 @@ class DialogStyle extends SpecStyle { [ $with.align(alignment: Alignment.center), containerStyle, - mainFlex, + containerLayout, titleStyle, descriptionStyle, - actionsFlex, + actionsLayout, ], ); } diff --git a/packages/remix/lib/src/components/dialog/dialog_widget.dart b/packages/remix/lib/src/components/dialog/dialog_widget.dart index ebdb649c0..c4bf87196 100644 --- a/packages/remix/lib/src/components/dialog/dialog_widget.dart +++ b/packages/remix/lib/src/components/dialog/dialog_widget.dart @@ -22,11 +22,47 @@ class Dialog extends StatelessWidget { this.variants = const [], }); + /// A builder that returns a [Widget] for the dialog's title. + /// + /// This builder is used to create a custom title widget for the dialog. + /// If null, the default title will be used. final WidgetSpecBuilder? titleBuilder; + + /// A builder that returns a [Widget] for the dialog's description. + /// final WidgetSpecBuilder? descriptionBuilder; + + /// The content widget to be displayed in the dialog. + /// + /// This widget is placed below the title and description, and above the actions. + /// If null, no additional content will be displayed. + /// Use this to add custom widgets or more complex content to your dialog. + /// + /// Example: + /// ```dart + /// Dialog( + /// title: 'Confirmation', + /// description: 'Are you sure you want to proceed?', + /// content: Image.asset('assets/warning_icon.png'), + /// actions: [ + /// Button(onPressed: () {}, child: Text('Cancel')), + /// Button(onPressed: () {}, child: Text('Confirm')), + /// ], + /// ) + /// ``` final Widget? content; + + /// A list of widgets to display as actions in the dialog. + /// + /// Typically, these are buttons that allow the user to confirm, cancel, + /// or take other actions related to the dialog's content. + /// If null, no actions will be displayed. final List? actions; + + /// {@macro remix.component.style} final DialogStyle? style; + + /// {@macro remix.component.variants} final List variants; @override @@ -41,7 +77,7 @@ class Dialog extends StatelessWidget { final spec = DialogSpec.of(context); return spec.container( - child: spec.mainFlex( + child: spec.containerLayout( direction: Axis.vertical, children: [ if (titleBuilder != null) titleBuilder!(spec.title), @@ -49,7 +85,7 @@ class Dialog extends StatelessWidget { descriptionBuilder!(spec.description), content ?? const SizedBox.shrink(), if (actions != null) - spec.actionsFlex( + spec.actionsLayout( direction: Axis.horizontal, children: actions!, ), From b84f68966a5bf2f9e1371dfaf749fc7b5a95921b Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Mon, 4 Nov 2024 12:00:20 -0300 Subject: [PATCH 26/57] divider --- .../remix/lib/src/components/divider/divider_widget.dart | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/remix/lib/src/components/divider/divider_widget.dart b/packages/remix/lib/src/components/divider/divider_widget.dart index 5c15b82c2..1e744b5b4 100644 --- a/packages/remix/lib/src/components/divider/divider_widget.dart +++ b/packages/remix/lib/src/components/divider/divider_widget.dart @@ -8,8 +8,13 @@ class Divider extends StatelessWidget { this.axis = Axis.horizontal, }); + /// {@macro remix.component.style} final DividerStyle? style; + + /// The axis along which the divider will be displayed. final Axis axis; + + /// {@macro remix.component.variants} final List variants; @override From f3b7fd434b0139aa4d86219006b47628fb06b049 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Mon, 4 Nov 2024 12:19:42 -0300 Subject: [PATCH 27/57] IconButton --- .../src/components/button/button_widget.dart | 17 ++++++-- .../lib/src/components/chip/chip_widget.dart | 19 +++++++++ .../icon_button/icon_button_widget.dart | 41 +++++++++++-------- packages/remix/lib/src/helpers/docs.dart | 4 ++ 4 files changed, 61 insertions(+), 20 deletions(-) diff --git a/packages/remix/lib/src/components/button/button_widget.dart b/packages/remix/lib/src/components/button/button_widget.dart index 54c701e0d..dd71910de 100644 --- a/packages/remix/lib/src/components/button/button_widget.dart +++ b/packages/remix/lib/src/components/button/button_widget.dart @@ -17,10 +17,17 @@ class Button extends StatelessWidget { /// The text content displayed in the center of the button. final String label; - /// Whether the button is disabled or enabled. + /// {@template remix.component.disabled} + /// When disabled, the component will not respond to user interaction and will + /// appear visually distinct to indicate its disabled state. + /// {@endtemplate} final bool disabled; - /// Whether the button is loading or not. + /// {@template remix.component.loading} + /// When loading, the component will display a spinner and disable user + /// interaction. The component's content will be hidden but maintain its + /// space to prevent layout shifts. + /// {@endtemplate} final bool loading; /// The icon displayed in the left side of the button. @@ -29,7 +36,11 @@ class Button extends StatelessWidget { /// The icon displayed in the right side of the button. final IconData? iconRight; - /// Called when the button is tapped or otherwise activated + /// {@template remix.component.onPressed} + /// Called when the component is tapped. + /// If null or if [disabled] is true, the component will be disabled and won't + /// respond to touch. + /// {@endtemplate} final VoidCallback? onPressed; /// A builder that returns a [Widget] for the button's spinner. diff --git a/packages/remix/lib/src/components/chip/chip_widget.dart b/packages/remix/lib/src/components/chip/chip_widget.dart index ff94be27e..46b52343d 100644 --- a/packages/remix/lib/src/components/chip/chip_widget.dart +++ b/packages/remix/lib/src/components/chip/chip_widget.dart @@ -13,13 +13,32 @@ class Chip extends StatefulWidget { this.style, }); + /// Whether the chip is selected or not. final bool value; + + /// The text content displayed in the center of the component. final String? label; + + /// The icon displayed in the left side of the component. final IconData? iconLeft; + + /// The icon displayed in the right side of the component. final IconData? iconRight; + + /// {@template remix.component.onChanged} + /// Called when the component is tapped. + /// If null or if [disabled] is true, the component will be disabled and won't + /// respond to touch. + /// {@endtemplate} final void Function(bool)? onChanged; + + /// {@macro remix.component.disabled} final bool disabled; + + /// {@macro remix.component.variants} final List variants; + + /// {@macro remix.component.style} final ChipStyle? style; @override diff --git a/packages/remix/lib/src/components/icon_button/icon_button_widget.dart b/packages/remix/lib/src/components/icon_button/icon_button_widget.dart index 05fc28b39..51f425804 100644 --- a/packages/remix/lib/src/components/icon_button/icon_button_widget.dart +++ b/packages/remix/lib/src/components/icon_button/icon_button_widget.dart @@ -1,19 +1,5 @@ part of 'icon_button.dart'; -/// A customizable button component with various styling options. -/// -/// The [Button] allows you to create buttons with different variants, sizes, -/// and icons. You can also disable the button or show a loading state. -/// -/// Example usage: -/// -/// ```dart -/// RxButton( -/// label: 'Click me', -/// onPressed: () {}, -/// iconLeft: Icons.add, -/// ) -/// ``` class IconButton extends StatelessWidget { const IconButton( this.icon, { @@ -26,16 +12,37 @@ class IconButton extends StatelessWidget { this.style, }); + /// {@macro remix.component.disabled} final bool disabled; + + /// {@macro remix.component.loading} final bool loading; + + /// The icon displayed in the IconButton. final IconData? icon; + + /// {@macro remix.component.onPressed} final VoidCallback? onPressed; + + /// A builder that returns a [Widget] for the IconButton's spinner. + /// + /// This builder creates a widget to display when the IconButton is loading. + /// + /// {@macro remix.widget_spec_builder.spinner_builder} + /// + /// ```dart + /// IconButton( + /// icon: Icons.add, + /// onPressed: () {}, + /// spinnerBuilder: (spec) => spec(), + /// ); + /// ``` final WidgetSpecBuilder? spinnerBuilder; + + /// {@macro remix.component.variants} final List variants; - /// Additional custom styling for the button. - /// - /// This allows you to override or extend the default button styling. + /// {@macro remix.component.style} final IconButtonStyle? style; @override diff --git a/packages/remix/lib/src/helpers/docs.dart b/packages/remix/lib/src/helpers/docs.dart index 2f8a093b2..64cb4e3a0 100644 --- a/packages/remix/lib/src/helpers/docs.dart +++ b/packages/remix/lib/src/helpers/docs.dart @@ -6,6 +6,10 @@ library docs; /// The builder offers a [TextSpec] which can be used to style the /// text consistently with component's style. /// {@endtemplate} +/// {@template remix.widget_spec_builder.spinner_builder} +/// The builder offers a [SpinnerSpec] which can be used to style the +/// spinner consistently with component's style. +/// {@endtemplate} /// {@template remix.widget_spec_builder.text_spec.code} /// ```dart /// From 145e0a544b1c8569708a7f94b5261a0ebbc18422 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Mon, 4 Nov 2024 12:22:51 -0300 Subject: [PATCH 28/57] menu item --- .../menu_item/menu_item_widget.dart | 37 +++++++++++++++++++ packages/remix/lib/src/helpers/docs.dart | 7 ++++ 2 files changed, 44 insertions(+) diff --git a/packages/remix/lib/src/components/menu_item/menu_item_widget.dart b/packages/remix/lib/src/components/menu_item/menu_item_widget.dart index 7f83ed2e1..3a7fe2206 100644 --- a/packages/remix/lib/src/components/menu_item/menu_item_widget.dart +++ b/packages/remix/lib/src/components/menu_item/menu_item_widget.dart @@ -13,13 +13,50 @@ class MenuItem extends StatelessWidget { this.disabled = false, }); + /// The primary text displayed in the menu item. final String title; + + /// Optional secondary text displayed below the title. final String? subtitle; + + /// {@macro remix.component.onPressed} final VoidCallback? onPress; + + /// A builder that returns a [Widget] for the menu item's leading icon. + /// + /// This builder creates a widget to display at the start of the menu item. + /// + /// {@macro remix.widget_spec_builder.icon_spec} + /// + /// ```dart + /// MenuItem( + /// title: 'Settings', + /// leadingWidgetBuilder: (spec) => spec(Icons.settings), + /// ); + /// ``` final WidgetSpecBuilder? leadingWidgetBuilder; + + /// A builder that returns a [Widget] for the menu item's trailing icon. + /// + /// This builder creates a widget to display at the end of the menu item. + /// + /// {@macro remix.widget_spec_builder.icon_spec} + /// + /// ```dart + /// MenuItem( + /// title: 'Next', + /// trailingWidgetBuilder: (spec) => spec(Icons.chevron_right), + /// ); + /// ``` final WidgetSpecBuilder? trailingWidgetBuilder; + + /// {@macro remix.component.disabled} final bool disabled; + + /// {@macro remix.component.variants} final List variants; + + /// {@macro remix.component.style} final MenuItemStyle? style; @override diff --git a/packages/remix/lib/src/helpers/docs.dart b/packages/remix/lib/src/helpers/docs.dart index 64cb4e3a0..0531eadee 100644 --- a/packages/remix/lib/src/helpers/docs.dart +++ b/packages/remix/lib/src/helpers/docs.dart @@ -6,10 +6,17 @@ library docs; /// The builder offers a [TextSpec] which can be used to style the /// text consistently with component's style. /// {@endtemplate} +/// /// {@template remix.widget_spec_builder.spinner_builder} /// The builder offers a [SpinnerSpec] which can be used to style the /// spinner consistently with component's style. /// {@endtemplate} +/// +/// {@template remix.widget_spec_builder.icon_spec} +/// The builder offers a [IconSpec] which can be used to style the +/// icon consistently with component's style. +/// {@endtemplate} +/// /// {@template remix.widget_spec_builder.text_spec.code} /// ```dart /// From f4bf453a762828c393de041c91f3f2e6d6cb5e8d Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Mon, 4 Nov 2024 12:32:24 -0300 Subject: [PATCH 29/57] progress --- .../lib/src/components/progress/progress_widget.dart | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/remix/lib/src/components/progress/progress_widget.dart b/packages/remix/lib/src/components/progress/progress_widget.dart index e6ade46e5..4a4042de5 100644 --- a/packages/remix/lib/src/components/progress/progress_widget.dart +++ b/packages/remix/lib/src/components/progress/progress_widget.dart @@ -11,8 +11,16 @@ class Progress extends StatelessWidget { 'Progress value must be between 0 and 1', ); + /// {@macro remix.component.style} final ProgressStyle? style; + + /// The progress value between 0 and 1. + /// + /// This value determines how much of the progress bar is filled. + /// A value of 0 means empty, while 1 means completely filled. final double value; + + /// {@macro remix.component.variants} final List variants; @override From dbde5f5788b3b35401ad9a4fd225b2d58f3cd959 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Mon, 4 Nov 2024 12:37:16 -0300 Subject: [PATCH 30/57] radio --- .../lib/src/components/radio/radio_widget.dart | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/remix/lib/src/components/radio/radio_widget.dart b/packages/remix/lib/src/components/radio/radio_widget.dart index 3ee0083d0..39d7ddd30 100644 --- a/packages/remix/lib/src/components/radio/radio_widget.dart +++ b/packages/remix/lib/src/components/radio/radio_widget.dart @@ -12,12 +12,30 @@ class Radio extends StatefulWidget { required this.label, }); + /// The value associated with this radio button. + /// + /// This value is compared against [groupValue] to determine if this radio button + /// is selected. final T value; + + /// {@macro remix.component.onChanged} final ValueChanged onChanged; + + /// The currently selected value for a group of radio buttons. + /// + /// When [value] matches [groupValue], this radio button is considered selected. final T? groupValue; + + /// The label text displayed next to the radio button. final String label; + + /// {@macro remix.component.disabled} final bool disabled; + + /// {@macro remix.component.style} final RadioStyle? style; + + /// {@macro remix.component.variants} final List variants; bool get _selected => value == groupValue; From 8197ac2b7c2dd1b7a6328838dff1aa33061e30f3 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Mon, 4 Nov 2024 13:48:21 -0300 Subject: [PATCH 31/57] scaffold --- .../components/scaffold/scaffold_widget.dart | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/packages/remix/lib/src/components/scaffold/scaffold_widget.dart b/packages/remix/lib/src/components/scaffold/scaffold_widget.dart index be8ca07b6..ba51d4c2b 100644 --- a/packages/remix/lib/src/components/scaffold/scaffold_widget.dart +++ b/packages/remix/lib/src/components/scaffold/scaffold_widget.dart @@ -1,5 +1,28 @@ part of 'scaffold.dart'; +/// A widget that provides a basic structure for a page or screen. +/// +/// It consists of a single [body] widget that is wrapped in a +/// container with styling applied. +/// +/// The [style] parameter allows you to customize the appearance of the scaffold +/// using a [ScaffoldStyle]. If no style is provided, the default style from the +/// theme will be used. +/// +/// The [variants] parameter allows you to apply style variants to modify the +/// appearance of the scaffold. +/// +/// When a Scaffold is added to the widget tree, it automatically applies a +/// [ToastLayer] that enables the display of [Toast] components within its scope. +/// +/// Example: +/// ```dart +/// Scaffold( +/// body: Center( +/// child: Text('Hello World'), +/// ), +/// ) +/// ``` class Scaffold extends StatelessWidget { const Scaffold({ super.key, @@ -8,8 +31,13 @@ class Scaffold extends StatelessWidget { this.variants = const [], }); + /// The primary content of the scaffold. final Widget body; + + /// {@macro remix.component.style} final ScaffoldStyle? style; + + /// {@macro remix.component.variants} final List variants; @override From cdb4514c85bc140b51ab9e3b825e6349ffab2b63 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Mon, 4 Nov 2024 13:54:59 -0300 Subject: [PATCH 32/57] segmented control --- .../segmented_control_button_widget.dart | 33 +++++++++++++++++++ .../segmented_control_widget.dart | 13 +++++++- 2 files changed, 45 insertions(+), 1 deletion(-) diff --git a/packages/remix/lib/src/components/segmented_control/button/segmented_control_button_widget.dart b/packages/remix/lib/src/components/segmented_control/button/segmented_control_button_widget.dart index 464a9f9e5..5ee341f2e 100644 --- a/packages/remix/lib/src/components/segmented_control/button/segmented_control_button_widget.dart +++ b/packages/remix/lib/src/components/segmented_control/button/segmented_control_button_widget.dart @@ -1,9 +1,42 @@ part of '../segmented_control.dart'; +/// A button widget used within [SegmentedControl] to represent a single segment. +/// +/// The [SegmentButton] is designed to be used as a child of [SegmentedControl] and +/// represents one selectable segment within the control. It can display an optional +/// icon and/or text label. +/// +/// The button's appearance are controlled by the [SegmentedControlSpec] +/// provided by the parent [SegmentedControl]. This includes styling for the container, +/// flex layout, icon, and text label. +/// +/// Example usage: +/// ```dart +/// SegmentedControl( +/// buttons: [ +/// SegmentButton( +/// icon: Icons.home, +/// text: 'Home', +/// ), +/// SegmentButton( +/// icon: Icons.settings, +/// text: 'Settings', +/// ), +/// ], +/// onIndexChanged: (index) { +/// // Handle segment selection +/// }, +/// ) +/// ``` class SegmentButton extends StatelessWidget { const SegmentButton({super.key, IconData? icon, this.text}) : iconData = icon; + /// The icon data to display in the segment button. + /// If null, no icon will be shown. final IconData? iconData; + + /// The text label to display in the segment button. + /// If null, no text will be shown. final String? text; @override diff --git a/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart b/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart index 7f271dc9a..853844f30 100644 --- a/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart +++ b/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart @@ -12,11 +12,22 @@ class SegmentedControl extends StatefulWidget { required this.onIndexChanged, }); + /// The currently selected index. final int index; + + /// Callback that is called when a segment is selected. + /// The index of the selected segment is passed as an argument. final ValueChanged onIndexChanged; + + /// {@macro remix.component.style} final SegmentedControlStyle? style; + + /// {@macro remix.component.variants} final List variants; - final List buttons; + + /// The list of widgets to display as segments. + /// Each widget represents one segment in the control. + final List buttons; @override State createState() => _SegmentedControlState(); From a56732e91c45be5e0db1e75477c8288d85264e64 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Mon, 4 Nov 2024 13:57:51 -0300 Subject: [PATCH 33/57] radio and segmented control --- .../remix/lib/src/components/radio/radio.dart | 6 ++-- .../lib/src/components/radio/radio.g.dart | 32 +++++++++---------- .../lib/src/components/radio/radio_style.dart | 4 +-- .../src/components/radio/radio_widget.dart | 2 +- .../segmented_control/segmented_control.dart | 8 ++--- .../segmented_control.g.dart | 32 +++++++++---------- .../segmented_control_style.dart | 6 ++-- .../segmented_control_widget.dart | 2 +- 8 files changed, 46 insertions(+), 46 deletions(-) diff --git a/packages/remix/lib/src/components/radio/radio.dart b/packages/remix/lib/src/components/radio/radio.dart index 997c6f039..598d834bc 100644 --- a/packages/remix/lib/src/components/radio/radio.dart +++ b/packages/remix/lib/src/components/radio/radio.dart @@ -16,7 +16,7 @@ part 'radio_widget.dart'; base class RadioSpec extends Spec with _$RadioSpec, Diagnosticable { final BoxSpec container; final BoxSpec indicator; - final FlexSpec flex; + final FlexSpec layout; final TextSpec text; /// {@macro radio_spec_of} @@ -27,14 +27,14 @@ base class RadioSpec extends Spec with _$RadioSpec, Diagnosticable { const RadioSpec({ BoxSpec? container, BoxSpec? indicator, - FlexSpec? flex, + FlexSpec? layout, TextSpec? text, super.modifiers, super.animated, }) : container = container ?? const BoxSpec(), indicator = indicator ?? const BoxSpec(), text = text ?? const TextSpec(), - flex = flex ?? const FlexSpec(); + layout = layout ?? const FlexSpec(); @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { diff --git a/packages/remix/lib/src/components/radio/radio.g.dart b/packages/remix/lib/src/components/radio/radio.g.dart index 872b7160f..e12a5f8e7 100644 --- a/packages/remix/lib/src/components/radio/radio.g.dart +++ b/packages/remix/lib/src/components/radio/radio.g.dart @@ -35,7 +35,7 @@ mixin _$RadioSpec on Spec { RadioSpec copyWith({ BoxSpec? container, BoxSpec? indicator, - FlexSpec? flex, + FlexSpec? layout, TextSpec? text, WidgetModifiersData? modifiers, AnimatedData? animated, @@ -43,7 +43,7 @@ mixin _$RadioSpec on Spec { return RadioSpec( container: container ?? _$this.container, indicator: indicator ?? _$this.indicator, - flex: flex ?? _$this.flex, + layout: layout ?? _$this.layout, text: text ?? _$this.text, modifiers: modifiers ?? _$this.modifiers, animated: animated ?? _$this.animated, @@ -62,7 +62,7 @@ mixin _$RadioSpec on Spec { /// interpolation method: /// /// - [BoxSpec.lerp] for [container] and [indicator]. - /// - [FlexSpec.lerp] for [flex]. + /// - [FlexSpec.lerp] for [layout]. /// - [TextSpec.lerp] for [text]. /// For [modifiers] and [animated], the interpolation is performed using a step function. @@ -78,7 +78,7 @@ mixin _$RadioSpec on Spec { return RadioSpec( container: _$this.container.lerp(other.container, t), indicator: _$this.indicator.lerp(other.indicator, t), - flex: _$this.flex.lerp(other.flex, t), + layout: _$this.layout.lerp(other.layout, t), text: _$this.text.lerp(other.text, t), modifiers: other.modifiers, animated: t < 0.5 ? _$this.animated : other.animated, @@ -93,7 +93,7 @@ mixin _$RadioSpec on Spec { List get props => [ _$this.container, _$this.indicator, - _$this.flex, + _$this.layout, _$this.text, _$this.modifiers, _$this.animated, @@ -107,7 +107,7 @@ mixin _$RadioSpec on Spec { properties.add( DiagnosticsProperty('indicator', _$this.indicator, defaultValue: null)); properties - .add(DiagnosticsProperty('flex', _$this.flex, defaultValue: null)); + .add(DiagnosticsProperty('layout', _$this.layout, defaultValue: null)); properties .add(DiagnosticsProperty('text', _$this.text, defaultValue: null)); properties.add( @@ -128,13 +128,13 @@ base class RadioSpecAttribute extends SpecAttribute with Diagnosticable { final BoxSpecAttribute? container; final BoxSpecAttribute? indicator; - final FlexSpecAttribute? flex; + final FlexSpecAttribute? layout; final TextSpecAttribute? text; const RadioSpecAttribute({ this.container, this.indicator, - this.flex, + this.layout, this.text, super.modifiers, super.animated, @@ -153,7 +153,7 @@ base class RadioSpecAttribute extends SpecAttribute return RadioSpec( container: container?.resolve(mix), indicator: indicator?.resolve(mix), - flex: flex?.resolve(mix), + layout: layout?.resolve(mix), text: text?.resolve(mix), modifiers: modifiers?.resolve(mix), animated: animated?.resolve(mix) ?? mix.animation, @@ -175,7 +175,7 @@ base class RadioSpecAttribute extends SpecAttribute return RadioSpecAttribute( container: container?.merge(other.container) ?? other.container, indicator: indicator?.merge(other.indicator) ?? other.indicator, - flex: flex?.merge(other.flex) ?? other.flex, + layout: layout?.merge(other.layout) ?? other.layout, text: text?.merge(other.text) ?? other.text, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, animated: animated?.merge(other.animated) ?? other.animated, @@ -190,7 +190,7 @@ base class RadioSpecAttribute extends SpecAttribute List get props => [ container, indicator, - flex, + layout, text, modifiers, animated, @@ -203,7 +203,7 @@ base class RadioSpecAttribute extends SpecAttribute .add(DiagnosticsProperty('container', container, defaultValue: null)); properties .add(DiagnosticsProperty('indicator', indicator, defaultValue: null)); - properties.add(DiagnosticsProperty('flex', flex, defaultValue: null)); + properties.add(DiagnosticsProperty('layout', layout, defaultValue: null)); properties.add(DiagnosticsProperty('text', text, defaultValue: null)); properties .add(DiagnosticsProperty('modifiers', modifiers, defaultValue: null)); @@ -224,8 +224,8 @@ class RadioSpecUtility /// Utility for defining [RadioSpecAttribute.indicator] late final indicator = BoxSpecUtility((v) => only(indicator: v)); - /// Utility for defining [RadioSpecAttribute.flex] - late final flex = FlexSpecUtility((v) => only(flex: v)); + /// Utility for defining [RadioSpecAttribute.layout] + late final layout = FlexSpecUtility((v) => only(layout: v)); /// Utility for defining [RadioSpecAttribute.text] late final text = TextSpecUtility((v) => only(text: v)); @@ -249,7 +249,7 @@ class RadioSpecUtility T only({ BoxSpecAttribute? container, BoxSpecAttribute? indicator, - FlexSpecAttribute? flex, + FlexSpecAttribute? layout, TextSpecAttribute? text, WidgetModifiersDataDto? modifiers, AnimatedDataDto? animated, @@ -257,7 +257,7 @@ class RadioSpecUtility return builder(RadioSpecAttribute( container: container, indicator: indicator, - flex: flex, + layout: layout, text: text, modifiers: modifiers, animated: animated, diff --git a/packages/remix/lib/src/components/radio/radio_style.dart b/packages/remix/lib/src/components/radio/radio_style.dart index d60a02159..e9356a1a4 100644 --- a/packages/remix/lib/src/components/radio/radio_style.dart +++ b/packages/remix/lib/src/components/radio/radio_style.dart @@ -34,7 +34,7 @@ class RadioStyle extends SpecStyle { ..style.fontWeight.w500() ..textHeightBehavior.heightToFirstAscent.off(); - final flexStyle = $.flex.chain + final layoutStyle = $.layout.chain ..row() ..mainAxisSize.min() ..mainAxisAlignment.start() @@ -47,7 +47,7 @@ class RadioStyle extends SpecStyle { ...containerStyle, ...indicatorStyle, textStyle, - flexStyle, + layoutStyle, disabledStyle, ]).animate( duration: const Duration(milliseconds: 100), diff --git a/packages/remix/lib/src/components/radio/radio_widget.dart b/packages/remix/lib/src/components/radio/radio_widget.dart index 39d7ddd30..78aed24b0 100644 --- a/packages/remix/lib/src/components/radio/radio_widget.dart +++ b/packages/remix/lib/src/components/radio/radio_widget.dart @@ -94,7 +94,7 @@ class _RadioState extends State> { final ContainerWidget = spec.container; final IndicatorWidget = spec.indicator; - final FlexWidget = spec.flex; + final FlexWidget = spec.layout; final TextWidget = spec.text; return FlexWidget( diff --git a/packages/remix/lib/src/components/segmented_control/segmented_control.dart b/packages/remix/lib/src/components/segmented_control/segmented_control.dart index 601b5775f..d6ec17429 100644 --- a/packages/remix/lib/src/components/segmented_control/segmented_control.dart +++ b/packages/remix/lib/src/components/segmented_control/segmented_control.dart @@ -19,9 +19,9 @@ final $segmentedControl = SegmentedControlSpecUtility.self; class SegmentedControlSpec extends Spec with _$SegmentedControlSpec, Diagnosticable { final BoxSpec container; - final FlexSpec flex; - final bool showDivider; + final FlexSpec layout; final BoxSpec divider; + final bool showDivider; @MixableProperty(dto: MixableFieldDto(type: 'SegmentButtonSpecAttribute')) final SegmentButtonSpec item; @@ -33,13 +33,13 @@ class SegmentedControlSpec extends Spec const SegmentedControlSpec({ BoxSpec? container, - FlexSpec? flex, + FlexSpec? layout, bool? showDivider, BoxSpec? divider, SegmentButtonSpec? item, super.modifiers, super.animated, - }) : flex = flex ?? const FlexSpec(), + }) : layout = layout ?? const FlexSpec(), container = container ?? const BoxSpec(), showDivider = showDivider ?? false, item = item ?? const SegmentButtonSpec(), diff --git a/packages/remix/lib/src/components/segmented_control/segmented_control.g.dart b/packages/remix/lib/src/components/segmented_control/segmented_control.g.dart index b24f591a1..17c27c0eb 100644 --- a/packages/remix/lib/src/components/segmented_control/segmented_control.g.dart +++ b/packages/remix/lib/src/components/segmented_control/segmented_control.g.dart @@ -34,7 +34,7 @@ mixin _$SegmentedControlSpec on Spec { @override SegmentedControlSpec copyWith({ BoxSpec? container, - FlexSpec? flex, + FlexSpec? layout, bool? showDivider, BoxSpec? divider, SegmentButtonSpec? item, @@ -43,7 +43,7 @@ mixin _$SegmentedControlSpec on Spec { }) { return SegmentedControlSpec( container: container ?? _$this.container, - flex: flex ?? _$this.flex, + layout: layout ?? _$this.layout, showDivider: showDivider ?? _$this.showDivider, divider: divider ?? _$this.divider, item: item ?? _$this.item, @@ -64,7 +64,7 @@ mixin _$SegmentedControlSpec on Spec { /// interpolation method: /// /// - [BoxSpec.lerp] for [container] and [divider]. - /// - [FlexSpec.lerp] for [flex]. + /// - [FlexSpec.lerp] for [layout]. /// For [showDivider] and [item] and [modifiers] and [animated], the interpolation is performed using a step function. /// If [t] is less than 0.5, the value from the current [SegmentedControlSpec] is used. Otherwise, the value @@ -78,7 +78,7 @@ mixin _$SegmentedControlSpec on Spec { return SegmentedControlSpec( container: _$this.container.lerp(other.container, t), - flex: _$this.flex.lerp(other.flex, t), + layout: _$this.layout.lerp(other.layout, t), showDivider: t < 0.5 ? _$this.showDivider : other.showDivider, divider: _$this.divider.lerp(other.divider, t), item: _$this.item.lerp(other.item, t), @@ -94,7 +94,7 @@ mixin _$SegmentedControlSpec on Spec { @override List get props => [ _$this.container, - _$this.flex, + _$this.layout, _$this.showDivider, _$this.divider, _$this.item, @@ -108,7 +108,7 @@ mixin _$SegmentedControlSpec on Spec { properties.add( DiagnosticsProperty('container', _$this.container, defaultValue: null)); properties - .add(DiagnosticsProperty('flex', _$this.flex, defaultValue: null)); + .add(DiagnosticsProperty('layout', _$this.layout, defaultValue: null)); properties.add(DiagnosticsProperty('showDivider', _$this.showDivider, defaultValue: null)); properties.add( @@ -132,14 +132,14 @@ mixin _$SegmentedControlSpec on Spec { class SegmentedControlSpecAttribute extends SpecAttribute with Diagnosticable { final BoxSpecAttribute? container; - final FlexSpecAttribute? flex; + final FlexSpecAttribute? layout; final bool? showDivider; final BoxSpecAttribute? divider; final SegmentButtonSpecAttribute? item; const SegmentedControlSpecAttribute({ this.container, - this.flex, + this.layout, this.showDivider, this.divider, this.item, @@ -159,7 +159,7 @@ class SegmentedControlSpecAttribute extends SpecAttribute SegmentedControlSpec resolve(MixData mix) { return SegmentedControlSpec( container: container?.resolve(mix), - flex: flex?.resolve(mix), + layout: layout?.resolve(mix), showDivider: showDivider, divider: divider?.resolve(mix), item: item?.resolve(mix), @@ -183,7 +183,7 @@ class SegmentedControlSpecAttribute extends SpecAttribute return SegmentedControlSpecAttribute( container: container?.merge(other.container) ?? other.container, - flex: flex?.merge(other.flex) ?? other.flex, + layout: layout?.merge(other.layout) ?? other.layout, showDivider: other.showDivider ?? showDivider, divider: divider?.merge(other.divider) ?? other.divider, item: item?.merge(other.item) ?? other.item, @@ -199,7 +199,7 @@ class SegmentedControlSpecAttribute extends SpecAttribute @override List get props => [ container, - flex, + layout, showDivider, divider, item, @@ -212,7 +212,7 @@ class SegmentedControlSpecAttribute extends SpecAttribute super.debugFillProperties(properties); properties .add(DiagnosticsProperty('container', container, defaultValue: null)); - properties.add(DiagnosticsProperty('flex', flex, defaultValue: null)); + properties.add(DiagnosticsProperty('layout', layout, defaultValue: null)); properties.add( DiagnosticsProperty('showDivider', showDivider, defaultValue: null)); properties.add(DiagnosticsProperty('divider', divider, defaultValue: null)); @@ -233,8 +233,8 @@ class SegmentedControlSpecUtility /// Utility for defining [SegmentedControlSpecAttribute.container] late final container = BoxSpecUtility((v) => only(container: v)); - /// Utility for defining [SegmentedControlSpecAttribute.flex] - late final flex = FlexSpecUtility((v) => only(flex: v)); + /// Utility for defining [SegmentedControlSpecAttribute.layout] + late final layout = FlexSpecUtility((v) => only(layout: v)); /// Utility for defining [SegmentedControlSpecAttribute.showDivider] late final showDivider = BoolUtility((v) => only(showDivider: v)); @@ -263,7 +263,7 @@ class SegmentedControlSpecUtility @override T only({ BoxSpecAttribute? container, - FlexSpecAttribute? flex, + FlexSpecAttribute? layout, bool? showDivider, BoxSpecAttribute? divider, SegmentButtonSpecAttribute? item, @@ -272,7 +272,7 @@ class SegmentedControlSpecUtility }) { return builder(SegmentedControlSpecAttribute( container: container, - flex: flex, + layout: layout, showDivider: showDivider, divider: divider, item: item, diff --git a/packages/remix/lib/src/components/segmented_control/segmented_control_style.dart b/packages/remix/lib/src/components/segmented_control/segmented_control_style.dart index 0e66e528f..066ffa52e 100644 --- a/packages/remix/lib/src/components/segmented_control/segmented_control_style.dart +++ b/packages/remix/lib/src/components/segmented_control/segmented_control_style.dart @@ -25,8 +25,8 @@ class SegmentedControlStyle extends SpecStyle { $.showDivider.off(), ]; - final flexStyle = [ - $.flex.chain + final layoutStyle = [ + $.layout.chain ..row() ..mainAxisSize.min(), ]; @@ -58,7 +58,7 @@ class SegmentedControlStyle extends SpecStyle { return Style.create([ ...containerStyle, ...dividerStyle, - ...flexStyle, + ...layoutStyle, ...itemStyle, ]); } diff --git a/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart b/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart index 853844f30..ae7e9575b 100644 --- a/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart +++ b/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart @@ -66,7 +66,7 @@ class _SegmentedControlState extends State { child: Stack( alignment: Alignment.centerLeft, children: [ - spec.flex( + spec.layout( direction: Axis.vertical, children: [ for (int i = 0; i < widget.buttons.length; i++) From 470a27f6b6c2b4b8f6d9d50dde9da9a8c87345d5 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Mon, 4 Nov 2024 14:08:01 -0300 Subject: [PATCH 34/57] select --- .../select/button/select_button.dart | 8 +-- .../select/button/select_button_widget.dart | 6 +- .../components/select/item/select_menu.dart | 6 +- .../select/item/select_menu_widget.dart | 28 +++++++- .../lib/src/components/select/select.g.dart | 64 +++++++++---------- .../src/components/select/select_style.dart | 4 +- .../src/components/select/select_theme.dart | 4 +- .../src/components/select/select_widget.dart | 15 +++++ 8 files changed, 87 insertions(+), 48 deletions(-) diff --git a/packages/remix/lib/src/components/select/button/select_button.dart b/packages/remix/lib/src/components/select/button/select_button.dart index b04f6f804..458d428be 100644 --- a/packages/remix/lib/src/components/select/button/select_button.dart +++ b/packages/remix/lib/src/components/select/button/select_button.dart @@ -4,7 +4,7 @@ part of '../select.dart'; class SelectButtonSpec extends Spec with _$SelectButtonSpec, Diagnosticable { final BoxSpec container; - final FlexSpec flex; + final FlexSpec layout; final TextSpec label; final IconSpec icon; @@ -15,18 +15,18 @@ class SelectButtonSpec extends Spec const SelectButtonSpec({ BoxSpec? container, - FlexSpec? flex, + FlexSpec? layout, IconSpec? icon, TextSpec? label, super.modifiers, super.animated, - }) : flex = flex ?? const FlexSpec(), + }) : layout = layout ?? const FlexSpec(), container = container ?? const BoxSpec(), icon = icon ?? const IconSpec(), label = label ?? const TextSpec(); Widget call({required String text, required IconData trailingIcon}) => - XSelectButtonSpecWidget( + SelectButtonSpecWidget( spec: this, text: text, trailingIcon: trailingIcon, diff --git a/packages/remix/lib/src/components/select/button/select_button_widget.dart b/packages/remix/lib/src/components/select/button/select_button_widget.dart index 98d63cd23..b0fcb6a8f 100644 --- a/packages/remix/lib/src/components/select/button/select_button_widget.dart +++ b/packages/remix/lib/src/components/select/button/select_button_widget.dart @@ -1,7 +1,7 @@ part of '../select.dart'; -class XSelectButtonSpecWidget extends StatelessWidget { - const XSelectButtonSpecWidget({ +class SelectButtonSpecWidget extends StatelessWidget { + const SelectButtonSpecWidget({ super.key, required this.spec, required this.text, @@ -22,7 +22,7 @@ class XSelectButtonSpecWidget extends StatelessWidget { final container = button.container; final label = button.label; final icon = button.icon; - final flex = button.flex; + final flex = button.layout; return container( child: flex( diff --git a/packages/remix/lib/src/components/select/item/select_menu.dart b/packages/remix/lib/src/components/select/item/select_menu.dart index 2772c3db4..05cbd40e1 100644 --- a/packages/remix/lib/src/components/select/item/select_menu.dart +++ b/packages/remix/lib/src/components/select/item/select_menu.dart @@ -6,7 +6,7 @@ base class SelectMenuItemSpec extends Spec final IconSpec icon; final TextSpec text; final BoxSpec container; - final FlexSpec flex; + final FlexSpec layout; static const of = _$SelectMenuItemSpec.of; @@ -16,13 +16,13 @@ base class SelectMenuItemSpec extends Spec IconSpec? icon, TextSpec? text, BoxSpec? container, - FlexSpec? flex, + FlexSpec? layout, super.modifiers, super.animated, }) : icon = icon ?? const IconSpec(), text = text ?? const TextSpec(), container = container ?? const BoxSpec(), - flex = flex ?? const FlexSpec(); + layout = layout ?? const FlexSpec(); @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { diff --git a/packages/remix/lib/src/components/select/item/select_menu_widget.dart b/packages/remix/lib/src/components/select/item/select_menu_widget.dart index db21d8872..48bc89cc1 100644 --- a/packages/remix/lib/src/components/select/item/select_menu_widget.dart +++ b/packages/remix/lib/src/components/select/item/select_menu_widget.dart @@ -1,5 +1,26 @@ part of '../select.dart'; +/// A widget that represents an individual item in a [Select] dropdown menu. +/// +/// This widget is used internally by the [Select] widget to render each [SelectMenuItem] +/// in its dropdown. It applies styling and layout defined in the [SelectStyle]. +/// +/// Example usage within [Select]: +/// ```dart +/// Select( +/// value: selectedValue, +/// onChanged: (value) => setState(() => selectedValue = value), +/// items: [ +/// SelectMenuItem( +/// value: 'profile', +/// child: SelectMenuItemWidget( +/// icon: Icons.person, +/// text: 'Profile', +/// ), +/// ), +/// ], +/// ) +/// ``` class SelectMenuItemWidget extends StatelessWidget { const SelectMenuItemWidget({ super.key, @@ -7,7 +28,10 @@ class SelectMenuItemWidget extends StatelessWidget { required this.text, }) : iconData = icon; + /// The optional icon data to display before the text. final IconData? iconData; + + /// The text label to display for this menu item. final String text; @override @@ -18,12 +42,12 @@ class SelectMenuItemWidget extends StatelessWidget { final item = SelectSpec.of(context).item; final container = item.container; - final flex = item.flex; + final layout = item.layout; final icon = item.icon; final text = item.text; return container( - child: flex( + child: layout( direction: Axis.horizontal, children: [ if (iconData != null) icon(iconData), diff --git a/packages/remix/lib/src/components/select/select.g.dart b/packages/remix/lib/src/components/select/select.g.dart index 55d8e346b..d22807367 100644 --- a/packages/remix/lib/src/components/select/select.g.dart +++ b/packages/remix/lib/src/components/select/select.g.dart @@ -579,7 +579,7 @@ mixin _$SelectButtonSpec on Spec { @override SelectButtonSpec copyWith({ BoxSpec? container, - FlexSpec? flex, + FlexSpec? layout, IconSpec? icon, TextSpec? label, WidgetModifiersData? modifiers, @@ -587,7 +587,7 @@ mixin _$SelectButtonSpec on Spec { }) { return SelectButtonSpec( container: container ?? _$this.container, - flex: flex ?? _$this.flex, + layout: layout ?? _$this.layout, icon: icon ?? _$this.icon, label: label ?? _$this.label, modifiers: modifiers ?? _$this.modifiers, @@ -607,7 +607,7 @@ mixin _$SelectButtonSpec on Spec { /// interpolation method: /// /// - [BoxSpec.lerp] for [container]. - /// - [FlexSpec.lerp] for [flex]. + /// - [FlexSpec.lerp] for [layout]. /// - [IconSpec.lerp] for [icon]. /// - [TextSpec.lerp] for [label]. @@ -623,7 +623,7 @@ mixin _$SelectButtonSpec on Spec { return SelectButtonSpec( container: _$this.container.lerp(other.container, t), - flex: _$this.flex.lerp(other.flex, t), + layout: _$this.layout.lerp(other.layout, t), icon: _$this.icon.lerp(other.icon, t), label: _$this.label.lerp(other.label, t), modifiers: other.modifiers, @@ -638,7 +638,7 @@ mixin _$SelectButtonSpec on Spec { @override List get props => [ _$this.container, - _$this.flex, + _$this.layout, _$this.icon, _$this.label, _$this.modifiers, @@ -651,7 +651,7 @@ mixin _$SelectButtonSpec on Spec { properties.add( DiagnosticsProperty('container', _$this.container, defaultValue: null)); properties - .add(DiagnosticsProperty('flex', _$this.flex, defaultValue: null)); + .add(DiagnosticsProperty('layout', _$this.layout, defaultValue: null)); properties .add(DiagnosticsProperty('icon', _$this.icon, defaultValue: null)); properties @@ -673,13 +673,13 @@ mixin _$SelectButtonSpec on Spec { class SelectButtonSpecAttribute extends SpecAttribute with Diagnosticable { final BoxSpecAttribute? container; - final FlexSpecAttribute? flex; + final FlexSpecAttribute? layout; final IconSpecAttribute? icon; final TextSpecAttribute? label; const SelectButtonSpecAttribute({ this.container, - this.flex, + this.layout, this.icon, this.label, super.modifiers, @@ -698,7 +698,7 @@ class SelectButtonSpecAttribute extends SpecAttribute SelectButtonSpec resolve(MixData mix) { return SelectButtonSpec( container: container?.resolve(mix), - flex: flex?.resolve(mix), + layout: layout?.resolve(mix), icon: icon?.resolve(mix), label: label?.resolve(mix), modifiers: modifiers?.resolve(mix), @@ -720,7 +720,7 @@ class SelectButtonSpecAttribute extends SpecAttribute return SelectButtonSpecAttribute( container: container?.merge(other.container) ?? other.container, - flex: flex?.merge(other.flex) ?? other.flex, + layout: layout?.merge(other.layout) ?? other.layout, icon: icon?.merge(other.icon) ?? other.icon, label: label?.merge(other.label) ?? other.label, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, @@ -735,7 +735,7 @@ class SelectButtonSpecAttribute extends SpecAttribute @override List get props => [ container, - flex, + layout, icon, label, modifiers, @@ -747,7 +747,7 @@ class SelectButtonSpecAttribute extends SpecAttribute super.debugFillProperties(properties); properties .add(DiagnosticsProperty('container', container, defaultValue: null)); - properties.add(DiagnosticsProperty('flex', flex, defaultValue: null)); + properties.add(DiagnosticsProperty('layout', layout, defaultValue: null)); properties.add(DiagnosticsProperty('icon', icon, defaultValue: null)); properties.add(DiagnosticsProperty('label', label, defaultValue: null)); properties @@ -766,8 +766,8 @@ class SelectButtonSpecUtility /// Utility for defining [SelectButtonSpecAttribute.container] late final container = BoxSpecUtility((v) => only(container: v)); - /// Utility for defining [SelectButtonSpecAttribute.flex] - late final flex = FlexSpecUtility((v) => only(flex: v)); + /// Utility for defining [SelectButtonSpecAttribute.layout] + late final layout = FlexSpecUtility((v) => only(layout: v)); /// Utility for defining [SelectButtonSpecAttribute.icon] late final icon = IconSpecUtility((v) => only(icon: v)); @@ -793,7 +793,7 @@ class SelectButtonSpecUtility @override T only({ BoxSpecAttribute? container, - FlexSpecAttribute? flex, + FlexSpecAttribute? layout, IconSpecAttribute? icon, TextSpecAttribute? label, WidgetModifiersDataDto? modifiers, @@ -801,7 +801,7 @@ class SelectButtonSpecUtility }) { return builder(SelectButtonSpecAttribute( container: container, - flex: flex, + layout: layout, icon: icon, label: label, modifiers: modifiers, @@ -864,7 +864,7 @@ mixin _$SelectMenuItemSpec on Spec { IconSpec? icon, TextSpec? text, BoxSpec? container, - FlexSpec? flex, + FlexSpec? layout, WidgetModifiersData? modifiers, AnimatedData? animated, }) { @@ -872,7 +872,7 @@ mixin _$SelectMenuItemSpec on Spec { icon: icon ?? _$this.icon, text: text ?? _$this.text, container: container ?? _$this.container, - flex: flex ?? _$this.flex, + layout: layout ?? _$this.layout, modifiers: modifiers ?? _$this.modifiers, animated: animated ?? _$this.animated, ); @@ -892,7 +892,7 @@ mixin _$SelectMenuItemSpec on Spec { /// - [IconSpec.lerp] for [icon]. /// - [TextSpec.lerp] for [text]. /// - [BoxSpec.lerp] for [container]. - /// - [FlexSpec.lerp] for [flex]. + /// - [FlexSpec.lerp] for [layout]. /// For [modifiers] and [animated], the interpolation is performed using a step function. /// If [t] is less than 0.5, the value from the current [SelectMenuItemSpec] is used. Otherwise, the value @@ -908,7 +908,7 @@ mixin _$SelectMenuItemSpec on Spec { icon: _$this.icon.lerp(other.icon, t), text: _$this.text.lerp(other.text, t), container: _$this.container.lerp(other.container, t), - flex: _$this.flex.lerp(other.flex, t), + layout: _$this.layout.lerp(other.layout, t), modifiers: other.modifiers, animated: t < 0.5 ? _$this.animated : other.animated, ); @@ -923,7 +923,7 @@ mixin _$SelectMenuItemSpec on Spec { _$this.icon, _$this.text, _$this.container, - _$this.flex, + _$this.layout, _$this.modifiers, _$this.animated, ]; @@ -938,7 +938,7 @@ mixin _$SelectMenuItemSpec on Spec { properties.add( DiagnosticsProperty('container', _$this.container, defaultValue: null)); properties - .add(DiagnosticsProperty('flex', _$this.flex, defaultValue: null)); + .add(DiagnosticsProperty('layout', _$this.layout, defaultValue: null)); properties.add( DiagnosticsProperty('modifiers', _$this.modifiers, defaultValue: null)); properties.add( @@ -958,13 +958,13 @@ base class SelectMenuItemSpecAttribute extends SpecAttribute final IconSpecAttribute? icon; final TextSpecAttribute? text; final BoxSpecAttribute? container; - final FlexSpecAttribute? flex; + final FlexSpecAttribute? layout; const SelectMenuItemSpecAttribute({ this.icon, this.text, this.container, - this.flex, + this.layout, super.modifiers, super.animated, }); @@ -983,7 +983,7 @@ base class SelectMenuItemSpecAttribute extends SpecAttribute icon: icon?.resolve(mix), text: text?.resolve(mix), container: container?.resolve(mix), - flex: flex?.resolve(mix), + layout: layout?.resolve(mix), modifiers: modifiers?.resolve(mix), animated: animated?.resolve(mix) ?? mix.animation, ); @@ -1006,7 +1006,7 @@ base class SelectMenuItemSpecAttribute extends SpecAttribute icon: icon?.merge(other.icon) ?? other.icon, text: text?.merge(other.text) ?? other.text, container: container?.merge(other.container) ?? other.container, - flex: flex?.merge(other.flex) ?? other.flex, + layout: layout?.merge(other.layout) ?? other.layout, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, animated: animated?.merge(other.animated) ?? other.animated, ); @@ -1021,7 +1021,7 @@ base class SelectMenuItemSpecAttribute extends SpecAttribute icon, text, container, - flex, + layout, modifiers, animated, ]; @@ -1033,7 +1033,7 @@ base class SelectMenuItemSpecAttribute extends SpecAttribute properties.add(DiagnosticsProperty('text', text, defaultValue: null)); properties .add(DiagnosticsProperty('container', container, defaultValue: null)); - properties.add(DiagnosticsProperty('flex', flex, defaultValue: null)); + properties.add(DiagnosticsProperty('layout', layout, defaultValue: null)); properties .add(DiagnosticsProperty('modifiers', modifiers, defaultValue: null)); properties @@ -1056,8 +1056,8 @@ class SelectMenuItemSpecUtility /// Utility for defining [SelectMenuItemSpecAttribute.container] late final container = BoxSpecUtility((v) => only(container: v)); - /// Utility for defining [SelectMenuItemSpecAttribute.flex] - late final flex = FlexSpecUtility((v) => only(flex: v)); + /// Utility for defining [SelectMenuItemSpecAttribute.layout] + late final layout = FlexSpecUtility((v) => only(layout: v)); /// Utility for defining [SelectMenuItemSpecAttribute.modifiers] late final wrap = SpecModifierUtility((v) => only(modifiers: v)); @@ -1079,7 +1079,7 @@ class SelectMenuItemSpecUtility IconSpecAttribute? icon, TextSpecAttribute? text, BoxSpecAttribute? container, - FlexSpecAttribute? flex, + FlexSpecAttribute? layout, WidgetModifiersDataDto? modifiers, AnimatedDataDto? animated, }) { @@ -1087,7 +1087,7 @@ class SelectMenuItemSpecUtility icon: icon, text: text, container: container, - flex: flex, + layout: layout, modifiers: modifiers, animated: animated, )); diff --git a/packages/remix/lib/src/components/select/select_style.dart b/packages/remix/lib/src/components/select/select_style.dart index d6d725a44..31bb17d75 100644 --- a/packages/remix/lib/src/components/select/select_style.dart +++ b/packages/remix/lib/src/components/select/select_style.dart @@ -14,7 +14,7 @@ class SelectStyle extends SpecStyle { ]; final buttonStyle = [ - $.button.flex.mainAxisAlignment.spaceBetween(), + $.button.layout.mainAxisAlignment.spaceBetween(), $.button.container.chain ..color.white() ..padding.all(10) @@ -66,7 +66,7 @@ class SelectStyle extends SpecStyle { ..style.color.black() ..style.fontSize(14), $.item.icon.size(20), - $.item.flex.gap(6), + $.item.layout.gap(6), spec.on.hover($.item.container.color.black12()), ]; diff --git a/packages/remix/lib/src/components/select/select_theme.dart b/packages/remix/lib/src/components/select/select_theme.dart index a4ff58834..248f51b13 100644 --- a/packages/remix/lib/src/components/select/select_theme.dart +++ b/packages/remix/lib/src/components/select/select_theme.dart @@ -25,8 +25,8 @@ class FortalezaSelectStyle extends SelectStyle { ..container.border.all.color.$neutral(6) ..container.color.$neutral(1) ..icon.color.$accentAlpha(12) - ..flex.gap.$space(1) - ..flex.mainAxisSize.min(), + ..layout.gap.$space(1) + ..layout.mainAxisSize.min(), $.item.container.padding.horizontal.$space(3), spec.on.disabled( $.button.chain diff --git a/packages/remix/lib/src/components/select/select_widget.dart b/packages/remix/lib/src/components/select/select_widget.dart index cf4305d8c..ec7285f15 100644 --- a/packages/remix/lib/src/components/select/select_widget.dart +++ b/packages/remix/lib/src/components/select/select_widget.dart @@ -19,13 +19,28 @@ class Select extends StatefulWidget { this.disabled = false, }); + /// The currently selected value in the select component. final T value; + + /// {@macro remix.component.style} final SelectStyle? style; + + /// {@macro remix.component.variants} final List variants; + + /// {@macro remix.component.onChanged} final ValueChanged onChanged; + + /// Builder function that creates the button portion of the select component. + /// When tapped, this button will display the dropdown menu. + /// This allows customizing how the button is displayed. final WidgetSpecBuilder button; + + /// {@macro remix.component.disabled} final bool disabled; + /// The list of items to display in the dropdown menu. + /// Each item contains a value and widget to display. final List> items; @override From c290e912a933fa210fe59577097bd537711e3c4d Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Mon, 4 Nov 2024 14:10:25 -0300 Subject: [PATCH 35/57] slider --- .../src/components/slider/slider_widget.dart | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/packages/remix/lib/src/components/slider/slider_widget.dart b/packages/remix/lib/src/components/slider/slider_widget.dart index 89cfb2db5..1f19fce72 100644 --- a/packages/remix/lib/src/components/slider/slider_widget.dart +++ b/packages/remix/lib/src/components/slider/slider_widget.dart @@ -13,19 +13,42 @@ class Slider extends StatefulWidget { this.style, this.variants = const [], this.disabled = false, - }); + }) : assert( + value >= min && value <= max, + 'Slider value must be between min and max values', + ); + /// The minimum value the slider can have. final double min; + + /// The maximum value the slider can have. final double max; + + /// The number of discrete divisions the slider can move through. + /// If it's 0, the slider moves continuously. final int divisions; + + /// The current value of the slider. + /// Must be between [min] and [max]. final double value; + + /// {@macro remix.component.style} final SliderStyle? style; + + /// {@macro remix.component.variants} final List variants; + + /// {@macro remix.component.disabled} final bool disabled; + /// Called when the user starts dragging the slider. + final ValueChanged? onChangeStart; + + /// Called during drag with the new value. final ValueChanged? onChanged; + + /// Called when the user is done selecting a new value. final ValueChanged? onChangeEnd; - final ValueChanged? onChangeStart; @override State createState() => _SliderState(); From 3effc05849ca5e9a02634237864317e19107251e Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Mon, 4 Nov 2024 14:14:31 -0300 Subject: [PATCH 36/57] toast --- .../components/spinner/spinner_widget.dart | 3 + .../src/components/switch/switch_widget.dart | 9 +++ .../remix/lib/src/components/toast/toast.dart | 12 ++-- .../lib/src/components/toast/toast.g.dart | 70 +++++++++---------- .../lib/src/components/toast/toast_style.dart | 8 +-- .../lib/src/components/toast/toast_theme.dart | 8 +-- .../src/components/toast/toast_widget.dart | 14 +++- 7 files changed, 71 insertions(+), 53 deletions(-) diff --git a/packages/remix/lib/src/components/spinner/spinner_widget.dart b/packages/remix/lib/src/components/spinner/spinner_widget.dart index 4f4b75a2e..0d5f8e67e 100644 --- a/packages/remix/lib/src/components/spinner/spinner_widget.dart +++ b/packages/remix/lib/src/components/spinner/spinner_widget.dart @@ -3,7 +3,10 @@ part of 'spinner.dart'; class Spinner extends StatelessWidget { const Spinner({super.key, this.style, this.variants = const []}); + /// {@macro remix.component.style} final SpinnerStyle? style; + + /// {@macro remix.component.variants} final List variants; @override diff --git a/packages/remix/lib/src/components/switch/switch_widget.dart b/packages/remix/lib/src/components/switch/switch_widget.dart index 86de7ff22..d833694f6 100644 --- a/packages/remix/lib/src/components/switch/switch_widget.dart +++ b/packages/remix/lib/src/components/switch/switch_widget.dart @@ -10,10 +10,19 @@ class Switch extends StatefulWidget { this.variants = const [], }); + /// Whether the switch is on or off. final bool value; + + /// {@macro remix.component.onChanged} final ValueChanged onChanged; + + /// {@macro remix.component.style} final SwitchStyle? style; + + /// {@macro remix.component.disabled} final bool disabled; + + /// {@macro remix.component.variants} final List variants; @override diff --git a/packages/remix/lib/src/components/toast/toast.dart b/packages/remix/lib/src/components/toast/toast.dart index 7de166103..afa11e8a5 100644 --- a/packages/remix/lib/src/components/toast/toast.dart +++ b/packages/remix/lib/src/components/toast/toast.dart @@ -17,8 +17,8 @@ part 'toast_widget.dart'; @MixableSpec() base class ToastSpec extends Spec with _$ToastSpec, Diagnosticable { final BoxSpec container; - final FlexSpec containerFlex; - final FlexSpec textContentFlex; + final FlexSpec layout; + final FlexSpec textLayout; final TextSpec title; final TextSpec description; @@ -29,15 +29,15 @@ base class ToastSpec extends Spec with _$ToastSpec, Diagnosticable { const ToastSpec({ BoxSpec? container, - FlexSpec? containerFlex, - FlexSpec? textContentFlex, + FlexSpec? layout, + FlexSpec? textLayout, TextSpec? title, TextSpec? description, super.modifiers, super.animated, }) : container = container ?? const BoxSpec(), - containerFlex = containerFlex ?? const FlexSpec(), - textContentFlex = textContentFlex ?? const FlexSpec(), + layout = layout ?? const FlexSpec(), + textLayout = textLayout ?? const FlexSpec(), title = title ?? const TextSpec(), description = description ?? const TextSpec(); diff --git a/packages/remix/lib/src/components/toast/toast.g.dart b/packages/remix/lib/src/components/toast/toast.g.dart index 06aa5c741..d0c7c36f1 100644 --- a/packages/remix/lib/src/components/toast/toast.g.dart +++ b/packages/remix/lib/src/components/toast/toast.g.dart @@ -34,8 +34,8 @@ mixin _$ToastSpec on Spec { @override ToastSpec copyWith({ BoxSpec? container, - FlexSpec? containerFlex, - FlexSpec? textContentFlex, + FlexSpec? layout, + FlexSpec? textLayout, TextSpec? title, TextSpec? description, WidgetModifiersData? modifiers, @@ -43,8 +43,8 @@ mixin _$ToastSpec on Spec { }) { return ToastSpec( container: container ?? _$this.container, - containerFlex: containerFlex ?? _$this.containerFlex, - textContentFlex: textContentFlex ?? _$this.textContentFlex, + layout: layout ?? _$this.layout, + textLayout: textLayout ?? _$this.textLayout, title: title ?? _$this.title, description: description ?? _$this.description, modifiers: modifiers ?? _$this.modifiers, @@ -64,7 +64,7 @@ mixin _$ToastSpec on Spec { /// interpolation method: /// /// - [BoxSpec.lerp] for [container]. - /// - [FlexSpec.lerp] for [containerFlex] and [textContentFlex]. + /// - [FlexSpec.lerp] for [layout] and [textLayout]. /// - [TextSpec.lerp] for [title] and [description]. /// For [modifiers] and [animated], the interpolation is performed using a step function. @@ -79,8 +79,8 @@ mixin _$ToastSpec on Spec { return ToastSpec( container: _$this.container.lerp(other.container, t), - containerFlex: _$this.containerFlex.lerp(other.containerFlex, t), - textContentFlex: _$this.textContentFlex.lerp(other.textContentFlex, t), + layout: _$this.layout.lerp(other.layout, t), + textLayout: _$this.textLayout.lerp(other.textLayout, t), title: _$this.title.lerp(other.title, t), description: _$this.description.lerp(other.description, t), modifiers: other.modifiers, @@ -95,8 +95,8 @@ mixin _$ToastSpec on Spec { @override List get props => [ _$this.container, - _$this.containerFlex, - _$this.textContentFlex, + _$this.layout, + _$this.textLayout, _$this.title, _$this.description, _$this.modifiers, @@ -108,10 +108,9 @@ mixin _$ToastSpec on Spec { void _debugFillProperties(DiagnosticPropertiesBuilder properties) { properties.add( DiagnosticsProperty('container', _$this.container, defaultValue: null)); - properties.add(DiagnosticsProperty('containerFlex', _$this.containerFlex, - defaultValue: null)); - properties.add(DiagnosticsProperty( - 'textContentFlex', _$this.textContentFlex, + properties + .add(DiagnosticsProperty('layout', _$this.layout, defaultValue: null)); + properties.add(DiagnosticsProperty('textLayout', _$this.textLayout, defaultValue: null)); properties .add(DiagnosticsProperty('title', _$this.title, defaultValue: null)); @@ -134,15 +133,15 @@ mixin _$ToastSpec on Spec { base class ToastSpecAttribute extends SpecAttribute with Diagnosticable { final BoxSpecAttribute? container; - final FlexSpecAttribute? containerFlex; - final FlexSpecAttribute? textContentFlex; + final FlexSpecAttribute? layout; + final FlexSpecAttribute? textLayout; final TextSpecAttribute? title; final TextSpecAttribute? description; const ToastSpecAttribute({ this.container, - this.containerFlex, - this.textContentFlex, + this.layout, + this.textLayout, this.title, this.description, super.modifiers, @@ -161,8 +160,8 @@ base class ToastSpecAttribute extends SpecAttribute ToastSpec resolve(MixData mix) { return ToastSpec( container: container?.resolve(mix), - containerFlex: containerFlex?.resolve(mix), - textContentFlex: textContentFlex?.resolve(mix), + layout: layout?.resolve(mix), + textLayout: textLayout?.resolve(mix), title: title?.resolve(mix), description: description?.resolve(mix), modifiers: modifiers?.resolve(mix), @@ -184,10 +183,8 @@ base class ToastSpecAttribute extends SpecAttribute return ToastSpecAttribute( container: container?.merge(other.container) ?? other.container, - containerFlex: - containerFlex?.merge(other.containerFlex) ?? other.containerFlex, - textContentFlex: textContentFlex?.merge(other.textContentFlex) ?? - other.textContentFlex, + layout: layout?.merge(other.layout) ?? other.layout, + textLayout: textLayout?.merge(other.textLayout) ?? other.textLayout, title: title?.merge(other.title) ?? other.title, description: description?.merge(other.description) ?? other.description, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, @@ -202,8 +199,8 @@ base class ToastSpecAttribute extends SpecAttribute @override List get props => [ container, - containerFlex, - textContentFlex, + layout, + textLayout, title, description, modifiers, @@ -215,10 +212,9 @@ base class ToastSpecAttribute extends SpecAttribute super.debugFillProperties(properties); properties .add(DiagnosticsProperty('container', container, defaultValue: null)); - properties.add(DiagnosticsProperty('containerFlex', containerFlex, - defaultValue: null)); - properties.add(DiagnosticsProperty('textContentFlex', textContentFlex, - defaultValue: null)); + properties.add(DiagnosticsProperty('layout', layout, defaultValue: null)); + properties + .add(DiagnosticsProperty('textLayout', textLayout, defaultValue: null)); properties.add(DiagnosticsProperty('title', title, defaultValue: null)); properties.add( DiagnosticsProperty('description', description, defaultValue: null)); @@ -238,11 +234,11 @@ class ToastSpecUtility /// Utility for defining [ToastSpecAttribute.container] late final container = BoxSpecUtility((v) => only(container: v)); - /// Utility for defining [ToastSpecAttribute.containerFlex] - late final containerFlex = FlexSpecUtility((v) => only(containerFlex: v)); + /// Utility for defining [ToastSpecAttribute.layout] + late final layout = FlexSpecUtility((v) => only(layout: v)); - /// Utility for defining [ToastSpecAttribute.textContentFlex] - late final textContentFlex = FlexSpecUtility((v) => only(textContentFlex: v)); + /// Utility for defining [ToastSpecAttribute.textLayout] + late final textLayout = FlexSpecUtility((v) => only(textLayout: v)); /// Utility for defining [ToastSpecAttribute.title] late final title = TextSpecUtility((v) => only(title: v)); @@ -268,8 +264,8 @@ class ToastSpecUtility @override T only({ BoxSpecAttribute? container, - FlexSpecAttribute? containerFlex, - FlexSpecAttribute? textContentFlex, + FlexSpecAttribute? layout, + FlexSpecAttribute? textLayout, TextSpecAttribute? title, TextSpecAttribute? description, WidgetModifiersDataDto? modifiers, @@ -277,8 +273,8 @@ class ToastSpecUtility }) { return builder(ToastSpecAttribute( container: container, - containerFlex: containerFlex, - textContentFlex: textContentFlex, + layout: layout, + textLayout: textLayout, title: title, description: description, modifiers: modifiers, diff --git a/packages/remix/lib/src/components/toast/toast_style.dart b/packages/remix/lib/src/components/toast/toast_style.dart index 074cdf8c1..dfda28030 100644 --- a/packages/remix/lib/src/components/toast/toast_style.dart +++ b/packages/remix/lib/src/components/toast/toast_style.dart @@ -15,13 +15,13 @@ class ToastStyle extends SpecStyle { ..margin.all(20) ..constraints.minWidth(300); - final containerFlexStyle = $.containerFlex.chain + final layoutFlexStyle = $.layout.chain ..direction.horizontal() ..mainAxisAlignment.spaceBetween() ..mainAxisSize.min() ..gap(16); - final textContentFlexStyle = $.textContentFlex.chain + final textLayoutFlexStyle = $.textLayout.chain ..direction.vertical() ..crossAxisAlignment.start() ..gap(4) @@ -37,8 +37,8 @@ class ToastStyle extends SpecStyle { return Style.create([ containerStyle, - containerFlexStyle, - textContentFlexStyle, + layoutFlexStyle, + textLayoutFlexStyle, titleStyle, descriptionStyle, ]); diff --git a/packages/remix/lib/src/components/toast/toast_theme.dart b/packages/remix/lib/src/components/toast/toast_theme.dart index 58677634f..1e71f7fd6 100644 --- a/packages/remix/lib/src/components/toast/toast_theme.dart +++ b/packages/remix/lib/src/components/toast/toast_theme.dart @@ -14,9 +14,9 @@ class FortalezaToastStyle extends ToastStyle { ..padding.all.$space(4) ..margin.all.$space(4); - final containerFlexStyle = $.containerFlex.gap.$space(5); + final layoutStyle = $.layout.gap.$space(5); - final textContentFlexStyle = $.textContentFlex.gap.$space(1); + final textLayoutStyle = $.textLayout.gap.$space(1); final titleStyle = $.title.chain ..style.$text(2) @@ -29,8 +29,8 @@ class FortalezaToastStyle extends ToastStyle { return Style.create([ super.makeStyle(spec).call(), containerStyle, - containerFlexStyle, - textContentFlexStyle, + layoutStyle, + textLayoutStyle, titleStyle, descriptionStyle, ]); diff --git a/packages/remix/lib/src/components/toast/toast_widget.dart b/packages/remix/lib/src/components/toast/toast_widget.dart index 243b0a6d5..6ed0879cb 100644 --- a/packages/remix/lib/src/components/toast/toast_widget.dart +++ b/packages/remix/lib/src/components/toast/toast_widget.dart @@ -11,12 +11,22 @@ class Toast extends StatelessWidget { this.variants = const [], }); + /// The title text displayed in the toast. final String title; + + /// The description text displayed below the title. final String? description; + + /// Optional widget displayed on the right side of the toast. final Widget? trailing; + + /// Optional widget displayed on the left side of the toast. final Widget? leading; + /// {@macro remix.component.style} final ToastStyle? style; + + /// {@macro remix.component.variants} final List variants; @override @@ -30,11 +40,11 @@ class Toast extends StatelessWidget { final spec = ToastSpec.of(context); return spec.container( - child: spec.containerFlex( + child: spec.layout( direction: Axis.horizontal, children: [ if (leading != null) leading!, - spec.textContentFlex( + spec.textLayout( direction: Axis.vertical, children: [ spec.title(title), From aa49300d14b95b70d7abc937bbb7eeadc58b9916 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Thu, 14 Nov 2024 16:31:56 -0300 Subject: [PATCH 37/57] accordion --- .../ephemeral/FlutterInputs.xcfilelist | 254 +++++++++--------- .../src/components/accordion/accordion.dart | 9 +- .../src/components/accordion/accordion.g.dart | 89 +++--- .../components/accordion/accordion_style.dart | 16 +- .../components/accordion/accordion_theme.dart | 12 +- .../accordion/accordion_widget.dart | 32 ++- .../accordion/header/accordion_header.dart | 9 +- .../header/accordion_header_spec_widget.dart | 21 +- 8 files changed, 208 insertions(+), 234 deletions(-) diff --git a/packages/remix/demo/macos/Flutter/ephemeral/FlutterInputs.xcfilelist b/packages/remix/demo/macos/Flutter/ephemeral/FlutterInputs.xcfilelist index da4e17eeb..d7deed5e4 100644 --- a/packages/remix/demo/macos/Flutter/ephemeral/FlutterInputs.xcfilelist +++ b/packages/remix/demo/macos/Flutter/ephemeral/FlutterInputs.xcfilelist @@ -1,27 +1,27 @@ -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/_fe_analyzer_shared-67.0.0/LICENSE -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.1/LICENSE -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.1/lib/accessibility_tools.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.1/lib/src/accessibility_issue.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.1/lib/src/accessibility_tools.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.1/lib/src/checker_manager.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.1/lib/src/checkers/checker_base.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.1/lib/src/checkers/flex_overflow_checker.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.1/lib/src/checkers/image_label_checker.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.1/lib/src/checkers/input_label_checker.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.1/lib/src/checkers/minimum_tap_area_checker.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.1/lib/src/checkers/mixin.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.1/lib/src/checkers/semantic_label_checker.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.1/lib/src/enums/buttons_alignment.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.1/lib/src/floating_action_buttons.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.1/lib/src/testing_tools/color_mode_simulation.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.1/lib/src/testing_tools/info_button.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.1/lib/src/testing_tools/multi_value_toggle.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.1/lib/src/testing_tools/slider_toggle.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.1/lib/src/testing_tools/switch_toggle.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.1/lib/src/testing_tools/test_environment.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.1/lib/src/testing_tools/testing_tools_panel.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.1/lib/src/testing_tools/testing_tools_wrapper.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/analyzer-6.4.1/LICENSE +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/_fe_analyzer_shared-72.0.0/LICENSE +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.3/LICENSE +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.3/lib/accessibility_tools.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.3/lib/src/accessibility_issue.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.3/lib/src/accessibility_tools.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.3/lib/src/checker_manager.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.3/lib/src/checkers/checker_base.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.3/lib/src/checkers/flex_overflow_checker.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.3/lib/src/checkers/image_label_checker.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.3/lib/src/checkers/input_label_checker.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.3/lib/src/checkers/minimum_tap_area_checker.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.3/lib/src/checkers/mixin.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.3/lib/src/checkers/semantic_label_checker.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.3/lib/src/enums/buttons_alignment.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.3/lib/src/floating_action_buttons.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.3/lib/src/testing_tools/color_mode_simulation.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.3/lib/src/testing_tools/info_button.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.3/lib/src/testing_tools/multi_value_toggle.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.3/lib/src/testing_tools/slider_toggle.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.3/lib/src/testing_tools/switch_toggle.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.3/lib/src/testing_tools/test_environment.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.3/lib/src/testing_tools/testing_tools_panel.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/accessibility_tools-2.2.3/lib/src/testing_tools/testing_tools_wrapper.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/analyzer-6.7.0/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/args-2.6.0/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/async-2.11.0/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/async-2.11.0/lib/async.dart @@ -85,10 +85,10 @@ /Users/lucasoliveira/.pub-cache/hosted/pub.dev/boolean_selector-2.1.1/lib/src/visitor.dart /Users/lucasoliveira/.pub-cache/hosted/pub.dev/build-2.4.1/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/build_config-1.1.1/LICENSE -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/build_daemon-4.0.1/LICENSE +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/build_daemon-4.0.2/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/build_resolvers-2.4.2/LICENSE -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/build_runner-2.4.9/LICENSE -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/build_runner_core-7.3.0/LICENSE +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/build_runner-2.4.13/LICENSE +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/build_runner_core-7.3.2/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/built_collection-5.1.1/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/built_value-8.9.2/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/characters-1.3.0/LICENSE @@ -106,7 +106,7 @@ /Users/lucasoliveira/.pub-cache/hosted/pub.dev/clock-1.1.1/lib/src/default.dart /Users/lucasoliveira/.pub-cache/hosted/pub.dev/clock-1.1.1/lib/src/stopwatch.dart /Users/lucasoliveira/.pub-cache/hosted/pub.dev/clock-1.1.1/lib/src/utils.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/code_builder-4.10.0/LICENSE +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/code_builder-4.10.1/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/collection-1.18.0/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/collection-1.18.0/lib/collection.dart /Users/lucasoliveira/.pub-cache/hosted/pub.dev/collection-1.18.0/lib/src/algorithms.dart @@ -132,93 +132,93 @@ /Users/lucasoliveira/.pub-cache/hosted/pub.dev/collection-1.18.0/lib/src/unmodifiable_wrappers.dart /Users/lucasoliveira/.pub-cache/hosted/pub.dev/collection-1.18.0/lib/src/utils.dart /Users/lucasoliveira/.pub-cache/hosted/pub.dev/collection-1.18.0/lib/src/wrappers.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/convert-3.1.1/LICENSE -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/crypto-3.0.3/LICENSE +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/convert-3.1.2/LICENSE +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/crypto-3.0.6/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/cupertino_icons-1.0.8/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/cupertino_icons-1.0.8/assets/CupertinoIcons.ttf -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/dart_style-2.3.6/LICENSE -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/LICENSE -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/device_frame.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/android/devices.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/android/oneplus_8_pro/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/android/oneplus_8_pro/frame.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/android/oneplus_8_pro/screen.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/android/samsung_galaxy_a50/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/android/samsung_galaxy_a50/frame.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/android/samsung_galaxy_a50/screen.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/android/samsung_galaxy_note20/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/android/samsung_galaxy_note20/frame.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/android/samsung_galaxy_note20/screen.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/android/samsung_galaxy_note20_ultra/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/android/samsung_galaxy_note20_ultra/frame.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/android/samsung_galaxy_note20_ultra/screen.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/android/samsung_galaxy_s20/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/android/samsung_galaxy_s20/frame.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/android/samsung_galaxy_s20/screen.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/android/sony_xperia_1_ii/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/android/sony_xperia_1_ii/frame.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/android/sony_xperia_1_ii/screen.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/devices.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/generic/base/draw_extensions.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/generic/desktop_monitor/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/generic/desktop_monitor/frame.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/generic/laptop/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/generic/laptop/frame.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/generic/phone/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/generic/phone/frame.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/generic/tablet/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/generic/tablet/frame.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/devices.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/ipad/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/ipad/frame.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/ipad/screen.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/ipad_air_4/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/ipad_air_4/frame.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/ipad_air_4/screen.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/ipad_pro_11inches/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/ipad_pro_11inches/frame.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/ipad_pro_11inches/screen.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/ipad_pro_12Inches_gen2/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/ipad_pro_12Inches_gen2/frame.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/ipad_pro_12Inches_gen2/screen.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/ipad_pro_12Inches_gen4/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/ipad_pro_12Inches_gen4/frame.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/ipad_pro_12Inches_gen4/screen.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/iphone_12/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/iphone_12/frame.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/iphone_12/screen.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/iphone_12_mini/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/iphone_12_mini/frame.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/iphone_12_mini/screen.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/iphone_12_pro_max/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/iphone_12_pro_max/frame.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/iphone_12_pro_max/screen.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/iphone_13/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/iphone_13/frame.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/iphone_13/screen.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/iphone_13_mini/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/iphone_13_mini/frame.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/iphone_13_mini/screen.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/iphone_13_pro_max/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/iphone_13_pro_max/frame.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/iphone_13_pro_max/screen.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/iphone_se/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/iphone_se/frame.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/ios/iphone_se/screen.g.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/linux/devices.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/macos/devices.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/macos/macbook_pro/device.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/macos/macbook_pro/frame.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/devices/windows/devices.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/frame.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/info/device_type.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/info/identifier.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/info/info.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/info/info.freezed.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/keyboard/button.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/keyboard/virtual_keyboard.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/theme.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.1.0/lib/src/theme.freezed.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/dart_style-2.3.7/LICENSE +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/LICENSE +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/device_frame.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/android/devices.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/android/oneplus_8_pro/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/android/oneplus_8_pro/frame.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/android/oneplus_8_pro/screen.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/android/samsung_galaxy_a50/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/android/samsung_galaxy_a50/frame.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/android/samsung_galaxy_a50/screen.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/android/samsung_galaxy_note20/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/android/samsung_galaxy_note20/frame.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/android/samsung_galaxy_note20/screen.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/android/samsung_galaxy_note20_ultra/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/android/samsung_galaxy_note20_ultra/frame.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/android/samsung_galaxy_note20_ultra/screen.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/android/samsung_galaxy_s20/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/android/samsung_galaxy_s20/frame.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/android/samsung_galaxy_s20/screen.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/android/sony_xperia_1_ii/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/android/sony_xperia_1_ii/frame.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/android/sony_xperia_1_ii/screen.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/devices.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/generic/base/draw_extensions.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/generic/desktop_monitor/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/generic/desktop_monitor/frame.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/generic/laptop/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/generic/laptop/frame.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/generic/phone/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/generic/phone/frame.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/generic/tablet/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/generic/tablet/frame.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/devices.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/ipad/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/ipad/frame.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/ipad/screen.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/ipad_air_4/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/ipad_air_4/frame.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/ipad_air_4/screen.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/ipad_pro_11inches/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/ipad_pro_11inches/frame.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/ipad_pro_11inches/screen.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/ipad_pro_12Inches_gen2/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/ipad_pro_12Inches_gen2/frame.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/ipad_pro_12Inches_gen2/screen.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/ipad_pro_12Inches_gen4/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/ipad_pro_12Inches_gen4/frame.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/ipad_pro_12Inches_gen4/screen.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/iphone_12/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/iphone_12/frame.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/iphone_12/screen.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/iphone_12_mini/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/iphone_12_mini/frame.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/iphone_12_mini/screen.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/iphone_12_pro_max/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/iphone_12_pro_max/frame.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/iphone_12_pro_max/screen.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/iphone_13/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/iphone_13/frame.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/iphone_13/screen.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/iphone_13_mini/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/iphone_13_mini/frame.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/iphone_13_mini/screen.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/iphone_13_pro_max/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/iphone_13_pro_max/frame.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/iphone_13_pro_max/screen.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/iphone_se/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/iphone_se/frame.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/ios/iphone_se/screen.g.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/linux/devices.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/macos/devices.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/macos/macbook_pro/device.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/macos/macbook_pro/frame.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/devices/windows/devices.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/frame.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/info/device_type.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/info/identifier.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/info/info.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/info/info.freezed.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/keyboard/button.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/keyboard/virtual_keyboard.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/theme.dart +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/device_frame-1.2.0/lib/src/theme.freezed.dart /Users/lucasoliveira/.pub-cache/hosted/pub.dev/fake_async-1.3.1/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/fake_async-1.3.1/lib/fake_async.dart /Users/lucasoliveira/.pub-cache/hosted/pub.dev/file-7.0.1/LICENSE @@ -229,7 +229,7 @@ /Users/lucasoliveira/.pub-cache/hosted/pub.dev/freezed_annotation-2.4.4/lib/freezed_annotation.g.dart /Users/lucasoliveira/.pub-cache/hosted/pub.dev/frontend_server_client-4.0.0/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/glob-2.1.2/LICENSE -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/graphs-2.3.1/LICENSE +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/graphs-2.3.2/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/http_multi_server-3.2.1/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/http_parser-4.0.2/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/inspector-2.1.0/LICENSE @@ -306,7 +306,8 @@ /Users/lucasoliveira/.pub-cache/hosted/pub.dev/leak_tracker_testing-3.0.1/lib/src/leak_testing.dart /Users/lucasoliveira/.pub-cache/hosted/pub.dev/leak_tracker_testing-3.0.1/lib/src/matchers.dart /Users/lucasoliveira/.pub-cache/hosted/pub.dev/lints-4.0.0/LICENSE -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/logging-1.2.0/LICENSE +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/logging-1.3.0/LICENSE +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/macros-0.1.2-main.4/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/matcher-0.12.16+1/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/matcher-0.12.16+1/lib/expect.dart /Users/lucasoliveira/.pub-cache/hosted/pub.dev/matcher-0.12.16+1/lib/matcher.dart @@ -381,7 +382,7 @@ /Users/lucasoliveira/.pub-cache/hosted/pub.dev/meta-1.15.0/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/meta-1.15.0/lib/meta.dart /Users/lucasoliveira/.pub-cache/hosted/pub.dev/meta-1.15.0/lib/meta_meta.dart -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/mime-1.0.6/LICENSE +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/mime-2.0.0/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/nested-1.0.0/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/nested-1.0.0/lib/nested.dart /Users/lucasoliveira/.pub-cache/hosted/pub.dev/package_config-2.1.0/LICENSE @@ -414,7 +415,7 @@ /Users/lucasoliveira/.pub-cache/hosted/pub.dev/resizable_widget-1.0.5/lib/src/separator_controller.dart /Users/lucasoliveira/.pub-cache/hosted/pub.dev/resizable_widget-1.0.5/lib/src/widget_size_info.dart /Users/lucasoliveira/.pub-cache/hosted/pub.dev/shelf-1.4.1/LICENSE -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/shelf_web_socket-1.0.4/LICENSE +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/shelf_web_socket-2.0.0/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/source_gen-1.5.0/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/source_span-1.10.0/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/source_span-1.10.0/lib/source_span.dart @@ -507,7 +508,7 @@ /Users/lucasoliveira/.pub-cache/hosted/pub.dev/test_api-0.7.2/lib/src/scaffolding/utils.dart /Users/lucasoliveira/.pub-cache/hosted/pub.dev/test_api-0.7.2/lib/src/utils.dart /Users/lucasoliveira/.pub-cache/hosted/pub.dev/timing-1.0.1/LICENSE -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/typed_data-1.3.2/LICENSE +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/typed_data-1.4.0/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/vector_math-2.1.4/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/vector_math-2.1.4/lib/src/vector_math_64/aabb2.dart /Users/lucasoliveira/.pub-cache/hosted/pub.dev/vector_math-2.1.4/lib/src/vector_math_64/aabb3.dart @@ -542,8 +543,9 @@ /Users/lucasoliveira/.pub-cache/hosted/pub.dev/vm_service-14.2.5/lib/vm_service.dart /Users/lucasoliveira/.pub-cache/hosted/pub.dev/vm_service-14.2.5/lib/vm_service_io.dart /Users/lucasoliveira/.pub-cache/hosted/pub.dev/watcher-1.1.0/LICENSE -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/web-0.5.1/LICENSE -/Users/lucasoliveira/.pub-cache/hosted/pub.dev/web_socket_channel-2.4.5/LICENSE +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/web-1.1.0/LICENSE +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/web_socket-0.1.6/LICENSE +/Users/lucasoliveira/.pub-cache/hosted/pub.dev/web_socket_channel-3.0.1/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/widgetbook-3.10.0/LICENSE /Users/lucasoliveira/.pub-cache/hosted/pub.dev/widgetbook-3.10.0/assets/fonts/Poppins/Poppins-Black.ttf /Users/lucasoliveira/.pub-cache/hosted/pub.dev/widgetbook-3.10.0/assets/fonts/Poppins/Poppins-BlackItalic.ttf @@ -846,6 +848,9 @@ /Users/lucasoliveira/Developer/Mix/mix/packages/mix/lib/src/specs/flex/flex_spec.dart /Users/lucasoliveira/Developer/Mix/mix/packages/mix/lib/src/specs/flex/flex_spec.g.dart /Users/lucasoliveira/Developer/Mix/mix/packages/mix/lib/src/specs/flex/flex_widget.dart +/Users/lucasoliveira/Developer/Mix/mix/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart +/Users/lucasoliveira/Developer/Mix/mix/packages/mix/lib/src/specs/flexbox/flexbox_spec.g.dart +/Users/lucasoliveira/Developer/Mix/mix/packages/mix/lib/src/specs/flexbox/flexbox_widget.dart /Users/lucasoliveira/Developer/Mix/mix/packages/mix/lib/src/specs/icon/icon_spec.dart /Users/lucasoliveira/Developer/Mix/mix/packages/mix/lib/src/specs/icon/icon_spec.g.dart /Users/lucasoliveira/Developer/Mix/mix/packages/mix/lib/src/specs/icon/icon_widget.dart @@ -906,6 +911,7 @@ /Users/lucasoliveira/Developer/Mix/mix/packages/remix/demo/lib/components/slider.dart /Users/lucasoliveira/Developer/Mix/mix/packages/remix/demo/lib/components/spinner_use_case.dart /Users/lucasoliveira/Developer/Mix/mix/packages/remix/demo/lib/components/switch_use_case.dart +/Users/lucasoliveira/Developer/Mix/mix/packages/remix/demo/lib/components/textfield_use_case.dart /Users/lucasoliveira/Developer/Mix/mix/packages/remix/demo/lib/components/toast_use_case.dart /Users/lucasoliveira/Developer/Mix/mix/packages/remix/demo/lib/helpers/knob_builder.dart /Users/lucasoliveira/Developer/Mix/mix/packages/remix/demo/lib/helpers/string.dart @@ -1025,6 +1031,13 @@ /Users/lucasoliveira/Developer/Mix/mix/packages/remix/lib/src/components/switch/switch_style.dart /Users/lucasoliveira/Developer/Mix/mix/packages/remix/lib/src/components/switch/switch_theme.dart /Users/lucasoliveira/Developer/Mix/mix/packages/remix/lib/src/components/switch/switch_widget.dart +/Users/lucasoliveira/Developer/Mix/mix/packages/remix/lib/src/components/textfield/attributes/attributes.dart +/Users/lucasoliveira/Developer/Mix/mix/packages/remix/lib/src/components/textfield/attributes/attributes.g.dart +/Users/lucasoliveira/Developer/Mix/mix/packages/remix/lib/src/components/textfield/textfield.dart +/Users/lucasoliveira/Developer/Mix/mix/packages/remix/lib/src/components/textfield/textfield.g.dart +/Users/lucasoliveira/Developer/Mix/mix/packages/remix/lib/src/components/textfield/textfield_style.dart +/Users/lucasoliveira/Developer/Mix/mix/packages/remix/lib/src/components/textfield/textfield_theme.dart +/Users/lucasoliveira/Developer/Mix/mix/packages/remix/lib/src/components/textfield/textfield_widget.dart /Users/lucasoliveira/Developer/Mix/mix/packages/remix/lib/src/components/toast/toast.dart /Users/lucasoliveira/Developer/Mix/mix/packages/remix/lib/src/components/toast/toast.g.dart /Users/lucasoliveira/Developer/Mix/mix/packages/remix/lib/src/components/toast/toast_layer.dart @@ -1045,6 +1058,7 @@ /Users/lucasoliveira/Developer/Mix/mix/packages/remix/lib/src/theme/tokens/space_tokens.dart /Users/lucasoliveira/Developer/Mix/mix/packages/remix/lib/src/theme/tokens/text_style_tokens.dart /Users/lucasoliveira/fvm/versions/stable/bin/cache/artifacts/material_fonts/MaterialIcons-Regular.otf +/Users/lucasoliveira/fvm/versions/stable/bin/cache/dart-sdk/pkg/_macros/LICENSE /Users/lucasoliveira/fvm/versions/stable/bin/cache/pkg/sky_engine/LICENSE /Users/lucasoliveira/fvm/versions/stable/bin/internal/engine.version /Users/lucasoliveira/fvm/versions/stable/packages/flutter/LICENSE diff --git a/packages/remix/lib/src/components/accordion/accordion.dart b/packages/remix/lib/src/components/accordion/accordion.dart index 3a4c3197b..c19383811 100644 --- a/packages/remix/lib/src/components/accordion/accordion.dart +++ b/packages/remix/lib/src/components/accordion/accordion.dart @@ -16,12 +16,11 @@ part 'header/accordion_header_spec_widget.dart'; @MixableSpec() base class AccordionSpec extends Spec with _$AccordionSpec { - final BoxSpec container; @MixableProperty(dto: MixableFieldDto(type: 'AccordionHeaderSpecAttribute')) final AccordionHeaderSpec header; final BoxSpec contentContainer; - final FlexSpec flex; final TextSpec textContent; + final FlexBoxSpec flexContainer; /// {@macro accordion_spec_of} static const of = _$AccordionSpec.of; @@ -29,15 +28,13 @@ base class AccordionSpec extends Spec with _$AccordionSpec { static const from = _$AccordionSpec.from; const AccordionSpec({ - BoxSpec? container, + FlexBoxSpec? flexContainer, AccordionHeaderSpec? header, BoxSpec? contentContainer, - FlexSpec? flex, TextSpec? textContent, super.animated, - }) : container = container ?? const BoxSpec(), + }) : flexContainer = flexContainer ?? const FlexBoxSpec(), header = header ?? const AccordionHeaderSpec(), contentContainer = contentContainer ?? const BoxSpec(), - flex = flex ?? const FlexSpec(), textContent = textContent ?? const TextSpec(); } diff --git a/packages/remix/lib/src/components/accordion/accordion.g.dart b/packages/remix/lib/src/components/accordion/accordion.g.dart index 001e1f8ab..7e162eaf8 100644 --- a/packages/remix/lib/src/components/accordion/accordion.g.dart +++ b/packages/remix/lib/src/components/accordion/accordion.g.dart @@ -33,18 +33,16 @@ mixin _$AccordionSpec on Spec { /// replaced with the new values. @override AccordionSpec copyWith({ - BoxSpec? container, + FlexBoxSpec? flexContainer, AccordionHeaderSpec? header, BoxSpec? contentContainer, - FlexSpec? flex, TextSpec? textContent, AnimatedData? animated, }) { return AccordionSpec( - container: container ?? _$this.container, + flexContainer: flexContainer ?? _$this.flexContainer, header: header ?? _$this.header, contentContainer: contentContainer ?? _$this.contentContainer, - flex: flex ?? _$this.flex, textContent: textContent ?? _$this.textContent, animated: animated ?? _$this.animated, ); @@ -61,8 +59,8 @@ mixin _$AccordionSpec on Spec { /// The interpolation is performed on each property of the [AccordionSpec] using the appropriate /// interpolation method: /// - /// - [BoxSpec.lerp] for [container] and [contentContainer]. - /// - [FlexSpec.lerp] for [flex]. + /// - [FlexBoxSpec.lerp] for [flexContainer]. + /// - [BoxSpec.lerp] for [contentContainer]. /// - [TextSpec.lerp] for [textContent]. /// For [header] and [animated], the interpolation is performed using a step function. @@ -76,10 +74,9 @@ mixin _$AccordionSpec on Spec { if (other == null) return _$this; return AccordionSpec( - container: _$this.container.lerp(other.container, t), + flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), header: _$this.header.lerp(other.header, t), contentContainer: _$this.contentContainer.lerp(other.contentContainer, t), - flex: _$this.flex.lerp(other.flex, t), textContent: _$this.textContent.lerp(other.textContent, t), animated: t < 0.5 ? _$this.animated : other.animated, ); @@ -91,10 +88,9 @@ mixin _$AccordionSpec on Spec { /// compare two [AccordionSpec] instances for equality. @override List get props => [ - _$this.container, + _$this.flexContainer, _$this.header, _$this.contentContainer, - _$this.flex, _$this.textContent, _$this.animated, ]; @@ -110,17 +106,15 @@ mixin _$AccordionSpec on Spec { /// Use this class to configure the attributes of a [AccordionSpec] and pass it to /// the [AccordionSpec] constructor. base class AccordionSpecAttribute extends SpecAttribute { - final BoxSpecAttribute? container; + final FlexBoxSpecAttribute? flexContainer; final AccordionHeaderSpecAttribute? header; final BoxSpecAttribute? contentContainer; - final FlexSpecAttribute? flex; final TextSpecAttribute? textContent; const AccordionSpecAttribute({ - this.container, + this.flexContainer, this.header, this.contentContainer, - this.flex, this.textContent, super.animated, }); @@ -136,10 +130,9 @@ base class AccordionSpecAttribute extends SpecAttribute { @override AccordionSpec resolve(MixData mix) { return AccordionSpec( - container: container?.resolve(mix), + flexContainer: flexContainer?.resolve(mix), header: header?.resolve(mix), contentContainer: contentContainer?.resolve(mix), - flex: flex?.resolve(mix), textContent: textContent?.resolve(mix), animated: animated?.resolve(mix) ?? mix.animation, ); @@ -158,11 +151,11 @@ base class AccordionSpecAttribute extends SpecAttribute { if (other == null) return this; return AccordionSpecAttribute( - container: container?.merge(other.container) ?? other.container, + flexContainer: + flexContainer?.merge(other.flexContainer) ?? other.flexContainer, header: header?.merge(other.header) ?? other.header, contentContainer: contentContainer?.merge(other.contentContainer) ?? other.contentContainer, - flex: flex?.merge(other.flex) ?? other.flex, textContent: textContent?.merge(other.textContent) ?? other.textContent, animated: animated?.merge(other.animated) ?? other.animated, ); @@ -174,10 +167,9 @@ base class AccordionSpecAttribute extends SpecAttribute { /// compare two [AccordionSpecAttribute] instances for equality. @override List get props => [ - container, + flexContainer, header, contentContainer, - flex, textContent, animated, ]; @@ -189,8 +181,8 @@ base class AccordionSpecAttribute extends SpecAttribute { /// Use the methods of this class to configure specific properties of a [AccordionSpec]. class AccordionSpecUtility extends SpecUtility { - /// Utility for defining [AccordionSpecAttribute.container] - late final container = BoxSpecUtility((v) => only(container: v)); + /// Utility for defining [AccordionSpecAttribute.flexContainer] + late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); /// Utility for defining [AccordionSpecAttribute.header] late final header = AccordionHeaderSpecUtility((v) => only(header: v)); @@ -199,9 +191,6 @@ class AccordionSpecUtility late final contentContainer = BoxSpecUtility((v) => only(contentContainer: v)); - /// Utility for defining [AccordionSpecAttribute.flex] - late final flex = FlexSpecUtility((v) => only(flex: v)); - /// Utility for defining [AccordionSpecAttribute.textContent] late final textContent = TextSpecUtility((v) => only(textContent: v)); @@ -219,18 +208,16 @@ class AccordionSpecUtility /// Returns a new [AccordionSpecAttribute] with the specified properties. @override T only({ - BoxSpecAttribute? container, + FlexBoxSpecAttribute? flexContainer, AccordionHeaderSpecAttribute? header, BoxSpecAttribute? contentContainer, - FlexSpecAttribute? flex, TextSpecAttribute? textContent, AnimatedDataDto? animated, }) { return builder(AccordionSpecAttribute( - container: container, + flexContainer: flexContainer, header: header, contentContainer: contentContainer, - flex: flex, textContent: textContent, animated: animated, )); @@ -288,16 +275,14 @@ mixin _$AccordionHeaderSpec on Spec { /// replaced with the new values. @override AccordionHeaderSpec copyWith({ - BoxSpec? container, - FlexSpec? flex, + FlexBoxSpec? flexContainer, IconSpec? leadingIcon, TextSpec? text, IconSpec? trailingIcon, AnimatedData? animated, }) { return AccordionHeaderSpec( - container: container ?? _$this.container, - flex: flex ?? _$this.flex, + flexContainer: flexContainer ?? _$this.flexContainer, leadingIcon: leadingIcon ?? _$this.leadingIcon, text: text ?? _$this.text, trailingIcon: trailingIcon ?? _$this.trailingIcon, @@ -316,8 +301,7 @@ mixin _$AccordionHeaderSpec on Spec { /// The interpolation is performed on each property of the [AccordionHeaderSpec] using the appropriate /// interpolation method: /// - /// - [BoxSpec.lerp] for [container]. - /// - [FlexSpec.lerp] for [flex]. + /// - [FlexBoxSpec.lerp] for [flexContainer]. /// - [IconSpec.lerp] for [leadingIcon] and [trailingIcon]. /// - [TextSpec.lerp] for [text]. @@ -332,8 +316,7 @@ mixin _$AccordionHeaderSpec on Spec { if (other == null) return _$this; return AccordionHeaderSpec( - container: _$this.container.lerp(other.container, t), - flex: _$this.flex.lerp(other.flex, t), + flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), leadingIcon: _$this.leadingIcon.lerp(other.leadingIcon, t), text: _$this.text.lerp(other.text, t), trailingIcon: _$this.trailingIcon.lerp(other.trailingIcon, t), @@ -347,8 +330,7 @@ mixin _$AccordionHeaderSpec on Spec { /// compare two [AccordionHeaderSpec] instances for equality. @override List get props => [ - _$this.container, - _$this.flex, + _$this.flexContainer, _$this.leadingIcon, _$this.text, _$this.trailingIcon, @@ -367,15 +349,13 @@ mixin _$AccordionHeaderSpec on Spec { /// the [AccordionHeaderSpec] constructor. base class AccordionHeaderSpecAttribute extends SpecAttribute { - final BoxSpecAttribute? container; - final FlexSpecAttribute? flex; + final FlexBoxSpecAttribute? flexContainer; final IconSpecAttribute? leadingIcon; final TextSpecAttribute? text; final IconSpecAttribute? trailingIcon; const AccordionHeaderSpecAttribute({ - this.container, - this.flex, + this.flexContainer, this.leadingIcon, this.text, this.trailingIcon, @@ -393,8 +373,7 @@ base class AccordionHeaderSpecAttribute @override AccordionHeaderSpec resolve(MixData mix) { return AccordionHeaderSpec( - container: container?.resolve(mix), - flex: flex?.resolve(mix), + flexContainer: flexContainer?.resolve(mix), leadingIcon: leadingIcon?.resolve(mix), text: text?.resolve(mix), trailingIcon: trailingIcon?.resolve(mix), @@ -416,8 +395,8 @@ base class AccordionHeaderSpecAttribute if (other == null) return this; return AccordionHeaderSpecAttribute( - container: container?.merge(other.container) ?? other.container, - flex: flex?.merge(other.flex) ?? other.flex, + flexContainer: + flexContainer?.merge(other.flexContainer) ?? other.flexContainer, leadingIcon: leadingIcon?.merge(other.leadingIcon) ?? other.leadingIcon, text: text?.merge(other.text) ?? other.text, trailingIcon: @@ -432,8 +411,7 @@ base class AccordionHeaderSpecAttribute /// compare two [AccordionHeaderSpecAttribute] instances for equality. @override List get props => [ - container, - flex, + flexContainer, leadingIcon, text, trailingIcon, @@ -447,11 +425,8 @@ base class AccordionHeaderSpecAttribute /// Use the methods of this class to configure specific properties of a [AccordionHeaderSpec]. class AccordionHeaderSpecUtility extends SpecUtility { - /// Utility for defining [AccordionHeaderSpecAttribute.container] - late final container = BoxSpecUtility((v) => only(container: v)); - - /// Utility for defining [AccordionHeaderSpecAttribute.flex] - late final flex = FlexSpecUtility((v) => only(flex: v)); + /// Utility for defining [AccordionHeaderSpecAttribute.flexContainer] + late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); /// Utility for defining [AccordionHeaderSpecAttribute.leadingIcon] late final leadingIcon = IconSpecUtility((v) => only(leadingIcon: v)); @@ -476,16 +451,14 @@ class AccordionHeaderSpecUtility /// Returns a new [AccordionHeaderSpecAttribute] with the specified properties. @override T only({ - BoxSpecAttribute? container, - FlexSpecAttribute? flex, + FlexBoxSpecAttribute? flexContainer, IconSpecAttribute? leadingIcon, TextSpecAttribute? text, IconSpecAttribute? trailingIcon, AnimatedDataDto? animated, }) { return builder(AccordionHeaderSpecAttribute( - container: container, - flex: flex, + flexContainer: flexContainer, leadingIcon: leadingIcon, text: text, trailingIcon: trailingIcon, diff --git a/packages/remix/lib/src/components/accordion/accordion_style.dart b/packages/remix/lib/src/components/accordion/accordion_style.dart index a4f059581..37f98fd7a 100644 --- a/packages/remix/lib/src/components/accordion/accordion_style.dart +++ b/packages/remix/lib/src/components/accordion/accordion_style.dart @@ -7,10 +7,9 @@ class AccordionStyle extends SpecStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final flexStyle = [$.flex.mainAxisSize.min()]; - - final containerStyle = [ - $.container.chain + final flexContainerStyle = [ + $.flexContainer.chain + ..flex.mainAxisSize.min() ..clipBehavior.antiAlias() ..border.bottom.color.grey.shade400(), ]; @@ -32,12 +31,12 @@ class AccordionStyle extends SpecStyle { ]; final headerStyle = [ - $.header.container.chain + $.header.flexContainer.chain + ..flex.gap(6) ..width.infinity() ..padding.vertical(16) ..color.transparent(), $.header.chain - ..flex.gap(6) ..leadingIcon.size(18) ..trailingIcon.wrap.transform.rotate(0) ..trailingIcon.size(18), @@ -51,8 +50,7 @@ class AccordionStyle extends SpecStyle { ]; return Style.create([ - ...flexStyle, - ...containerStyle, + ...flexContainerStyle, ...contentStyle, ...textContainerStyle, ...headerStyle, @@ -69,7 +67,7 @@ class AccordionDarkStyle extends AccordionStyle { return Style.create([ super.makeStyle(spec).call(), - $.container.border.bottom.color.grey.shade700(), + $.flexContainer.border.bottom.color.grey.shade700(), $.header.text.style.color.white(), $.header.trailingIcon.color.white(), $.textContent.style.color.white(), diff --git a/packages/remix/lib/src/components/accordion/accordion_theme.dart b/packages/remix/lib/src/components/accordion/accordion_theme.dart index 51d474c20..073bd6d9d 100644 --- a/packages/remix/lib/src/components/accordion/accordion_theme.dart +++ b/packages/remix/lib/src/components/accordion/accordion_theme.dart @@ -11,7 +11,7 @@ class FortalezaAccordionStyle extends AccordionStyle { final style = Style( // Container - $.container.chain + $.flexContainer.chain ..border.all.color.$neutral(2) ..shape.roundedRectangle.borderRadius(6) ..shape.roundedRectangle.side.width(1) @@ -24,13 +24,13 @@ class FortalezaAccordionStyle extends AccordionStyle { // Header $.header.chain - ..container.padding.horizontal.$space(4) + ..flexContainer.padding.horizontal.$space(4) ..text.style.fontWeight.w400() ..text.style.color.$neutral(12) ..trailingIcon.color.$neutral(10) - ..container.color.$neutral(1) - ..container.animated.curve.easeInCubic() - ..container.animated.duration(const Duration(milliseconds: 100)), + ..flexContainer.color.$neutral(1) + ..flexContainer.animated.curve.easeInCubic() + ..flexContainer.animated.duration(const Duration(milliseconds: 100)), $.contentContainer.chain ..padding.all.$space(3) @@ -47,7 +47,7 @@ class FortalezaAccordionStyle extends AccordionStyle { // Variants spec.on.selected($.contentContainer.border.top.style.solid()), spec.on.hover( - $.header.container.color.$neutral(3), + $.header.flexContainer.color.$neutral(3), $.header.text.style.decoration.none(), ), ); diff --git a/packages/remix/lib/src/components/accordion/accordion_widget.dart b/packages/remix/lib/src/components/accordion/accordion_widget.dart index fb3acaf39..9e35baa60 100644 --- a/packages/remix/lib/src/components/accordion/accordion_widget.dart +++ b/packages/remix/lib/src/components/accordion/accordion_widget.dart @@ -64,25 +64,23 @@ class _AccordionState extends State with TickerProviderStateMixin { child: widget.content(spec.textContent), ); - return spec.container( - child: spec.flex( - direction: Axis.vertical, - children: [ - Pressable( - onPress: _handleTap, - controller: _controller, - child: SpecBuilder( - style: variantStyle, - builder: (context) { - final spec = AccordionSpec.of(context); + return spec.flexContainer( + direction: Axis.vertical, + children: [ + Pressable( + onPress: _handleTap, + controller: _controller, + child: SpecBuilder( + style: variantStyle, + builder: (context) { + final spec = AccordionSpec.of(context); - return widget.header(spec.header); - }, - ), + return widget.header(spec.header); + }, ), - content, - ], - ), + ), + content, + ], ); }, ), diff --git a/packages/remix/lib/src/components/accordion/header/accordion_header.dart b/packages/remix/lib/src/components/accordion/header/accordion_header.dart index 08c1fec84..ee4d4d90b 100644 --- a/packages/remix/lib/src/components/accordion/header/accordion_header.dart +++ b/packages/remix/lib/src/components/accordion/header/accordion_header.dart @@ -3,8 +3,7 @@ part of '../accordion.dart'; @MixableSpec() base class AccordionHeaderSpec extends Spec with _$AccordionHeaderSpec { - final BoxSpec container; - final FlexSpec flex; + final FlexBoxSpec flexContainer; final IconSpec leadingIcon; final TextSpec text; final IconSpec trailingIcon; @@ -15,14 +14,12 @@ base class AccordionHeaderSpec extends Spec static const from = _$AccordionHeaderSpec.from; const AccordionHeaderSpec({ - BoxSpec? container, - FlexSpec? flex, + FlexBoxSpec? flexContainer, IconSpec? leadingIcon, TextSpec? text, IconSpec? trailingIcon, super.animated, - }) : container = container ?? const BoxSpec(), - flex = flex ?? const FlexSpec(), + }) : flexContainer = flexContainer ?? const FlexBoxSpec(), leadingIcon = leadingIcon ?? const IconSpec(), text = text ?? const TextSpec(), trailingIcon = trailingIcon ?? const IconSpec(); diff --git a/packages/remix/lib/src/components/accordion/header/accordion_header_spec_widget.dart b/packages/remix/lib/src/components/accordion/header/accordion_header_spec_widget.dart index db02b5ae9..5ac09404b 100644 --- a/packages/remix/lib/src/components/accordion/header/accordion_header_spec_widget.dart +++ b/packages/remix/lib/src/components/accordion/header/accordion_header_spec_widget.dart @@ -16,22 +16,19 @@ class AccordionHeaderSpecWidget extends StatelessWidget { @override Widget build(BuildContext context) { - final ContainerWidget = spec.container; - final FlexWidget = spec.flex; + final FlexContainerWidget = spec.flexContainer; final LeadingIconWidget = spec.leadingIcon; final TrailingIconWidget = spec.trailingIcon; final TitleWidget = spec.text; - return ContainerWidget( - child: FlexWidget( - direction: Axis.horizontal, - children: [ - if (leadingIcon != null) LeadingIconWidget(leadingIcon), - TitleWidget(title), - const Spacer(), - TrailingIconWidget(trailingIcon), - ], - ), + return FlexContainerWidget( + direction: Axis.horizontal, + children: [ + if (leadingIcon != null) LeadingIconWidget(leadingIcon), + TitleWidget(title), + const Spacer(), + TrailingIconWidget(trailingIcon), + ], ); } } From ef1d96cb5d34b5ee70a992dd8eb263442c635683 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Thu, 14 Nov 2024 16:39:50 -0300 Subject: [PATCH 38/57] callout --- .../lib/src/components/callout/callout.dart | 9 ++-- .../lib/src/components/callout/callout.g.dart | 44 +++++++------------ .../src/components/callout/callout_style.dart | 31 +++++-------- .../src/components/callout/callout_theme.dart | 17 ++++--- .../components/callout/callout_widget.dart | 8 ++-- 5 files changed, 40 insertions(+), 69 deletions(-) diff --git a/packages/remix/lib/src/components/callout/callout.dart b/packages/remix/lib/src/components/callout/callout.dart index 4ffa14aca..fd99cfa12 100644 --- a/packages/remix/lib/src/components/callout/callout.dart +++ b/packages/remix/lib/src/components/callout/callout.dart @@ -12,8 +12,7 @@ part 'callout_widget.dart'; @MixableSpec() base class CalloutSpec extends Spec with _$CalloutSpec { - final BoxSpec container; - final FlexSpec flex; + final FlexBoxSpec flexContainer; final IconSpec icon; final TextSpec text; @@ -23,14 +22,12 @@ base class CalloutSpec extends Spec with _$CalloutSpec { static const from = _$CalloutSpec.from; const CalloutSpec({ - BoxSpec? container, - FlexSpec? flex, + FlexBoxSpec? flexContainer, IconSpec? icon, TextSpec? text, super.modifiers, super.animated, - }) : container = container ?? const BoxSpec(), - flex = flex ?? const FlexSpec(), + }) : flexContainer = flexContainer ?? const FlexBoxSpec(), icon = icon ?? const IconSpec(), text = text ?? const TextSpec(); } diff --git a/packages/remix/lib/src/components/callout/callout.g.dart b/packages/remix/lib/src/components/callout/callout.g.dart index 458ca1391..2c6b56c5d 100644 --- a/packages/remix/lib/src/components/callout/callout.g.dart +++ b/packages/remix/lib/src/components/callout/callout.g.dart @@ -33,16 +33,14 @@ mixin _$CalloutSpec on Spec { /// replaced with the new values. @override CalloutSpec copyWith({ - BoxSpec? container, - FlexSpec? flex, + FlexBoxSpec? flexContainer, IconSpec? icon, TextSpec? text, WidgetModifiersData? modifiers, AnimatedData? animated, }) { return CalloutSpec( - container: container ?? _$this.container, - flex: flex ?? _$this.flex, + flexContainer: flexContainer ?? _$this.flexContainer, icon: icon ?? _$this.icon, text: text ?? _$this.text, modifiers: modifiers ?? _$this.modifiers, @@ -61,8 +59,7 @@ mixin _$CalloutSpec on Spec { /// The interpolation is performed on each property of the [CalloutSpec] using the appropriate /// interpolation method: /// - /// - [BoxSpec.lerp] for [container]. - /// - [FlexSpec.lerp] for [flex]. + /// - [FlexBoxSpec.lerp] for [flexContainer]. /// - [IconSpec.lerp] for [icon]. /// - [TextSpec.lerp] for [text]. @@ -77,8 +74,7 @@ mixin _$CalloutSpec on Spec { if (other == null) return _$this; return CalloutSpec( - container: _$this.container.lerp(other.container, t), - flex: _$this.flex.lerp(other.flex, t), + flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), icon: _$this.icon.lerp(other.icon, t), text: _$this.text.lerp(other.text, t), modifiers: other.modifiers, @@ -92,8 +88,7 @@ mixin _$CalloutSpec on Spec { /// compare two [CalloutSpec] instances for equality. @override List get props => [ - _$this.container, - _$this.flex, + _$this.flexContainer, _$this.icon, _$this.text, _$this.modifiers, @@ -111,14 +106,12 @@ mixin _$CalloutSpec on Spec { /// Use this class to configure the attributes of a [CalloutSpec] and pass it to /// the [CalloutSpec] constructor. base class CalloutSpecAttribute extends SpecAttribute { - final BoxSpecAttribute? container; - final FlexSpecAttribute? flex; + final FlexBoxSpecAttribute? flexContainer; final IconSpecAttribute? icon; final TextSpecAttribute? text; const CalloutSpecAttribute({ - this.container, - this.flex, + this.flexContainer, this.icon, this.text, super.modifiers, @@ -136,8 +129,7 @@ base class CalloutSpecAttribute extends SpecAttribute { @override CalloutSpec resolve(MixData mix) { return CalloutSpec( - container: container?.resolve(mix), - flex: flex?.resolve(mix), + flexContainer: flexContainer?.resolve(mix), icon: icon?.resolve(mix), text: text?.resolve(mix), modifiers: modifiers?.resolve(mix), @@ -158,8 +150,8 @@ base class CalloutSpecAttribute extends SpecAttribute { if (other == null) return this; return CalloutSpecAttribute( - container: container?.merge(other.container) ?? other.container, - flex: flex?.merge(other.flex) ?? other.flex, + flexContainer: + flexContainer?.merge(other.flexContainer) ?? other.flexContainer, icon: icon?.merge(other.icon) ?? other.icon, text: text?.merge(other.text) ?? other.text, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, @@ -173,8 +165,7 @@ base class CalloutSpecAttribute extends SpecAttribute { /// compare two [CalloutSpecAttribute] instances for equality. @override List get props => [ - container, - flex, + flexContainer, icon, text, modifiers, @@ -188,11 +179,8 @@ base class CalloutSpecAttribute extends SpecAttribute { /// Use the methods of this class to configure specific properties of a [CalloutSpec]. class CalloutSpecUtility extends SpecUtility { - /// Utility for defining [CalloutSpecAttribute.container] - late final container = BoxSpecUtility((v) => only(container: v)); - - /// Utility for defining [CalloutSpecAttribute.flex] - late final flex = FlexSpecUtility((v) => only(flex: v)); + /// Utility for defining [CalloutSpecAttribute.flexContainer] + late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); /// Utility for defining [CalloutSpecAttribute.icon] late final icon = IconSpecUtility((v) => only(icon: v)); @@ -217,16 +205,14 @@ class CalloutSpecUtility /// Returns a new [CalloutSpecAttribute] with the specified properties. @override T only({ - BoxSpecAttribute? container, - FlexSpecAttribute? flex, + FlexBoxSpecAttribute? flexContainer, IconSpecAttribute? icon, TextSpecAttribute? text, WidgetModifiersDataDto? modifiers, AnimatedDataDto? animated, }) { return builder(CalloutSpecAttribute( - container: container, - flex: flex, + flexContainer: flexContainer, icon: icon, text: text, modifiers: modifiers, diff --git a/packages/remix/lib/src/components/callout/callout_style.dart b/packages/remix/lib/src/components/callout/callout_style.dart index 1b71a31f0..aaefa14ef 100644 --- a/packages/remix/lib/src/components/callout/callout_style.dart +++ b/packages/remix/lib/src/components/callout/callout_style.dart @@ -9,19 +9,15 @@ class CalloutStyle extends SpecStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final containerStyle = [ - $.container.chain + final flexContainerStyle = [ + $.flexContainer.chain ..borderRadius(6) ..color.white() - ..border.all.color.black12(), - ]; - - final flexStyle = [ - $.flex.chain - ..wrap.padding(12) - ..gap(8) - ..mainAxisSize.min() - ..direction.horizontal(), + ..padding(12) + ..border.all.color.black12() + ..flex.mainAxisSize.min() + ..flex.gap(8) + ..flex.direction.horizontal(), ]; final iconStyle = [$.icon.color.black(), $.icon.size(16)]; @@ -33,12 +29,7 @@ class CalloutStyle extends SpecStyle { ..style.fontWeight.w500(), ]; - return Style.create([ - ...containerStyle, - ...flexStyle, - ...iconStyle, - ...textStyle, - ]); + return Style.create([...flexContainerStyle, ...iconStyle, ...textStyle]); } } @@ -48,8 +39,8 @@ class CalloutDarkStyle extends CalloutStyle { @override Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final containerStyle = [ - $.container.chain + final flexContainerStyle = [ + $.flexContainer.chain ..color.black() ..border.all.color.white30(), ]; @@ -60,7 +51,7 @@ class CalloutDarkStyle extends CalloutStyle { return Style.create([ super.makeStyle(spec).call(), - ...containerStyle, + ...flexContainerStyle, ...textStyle, ...iconStyle, ]); diff --git a/packages/remix/lib/src/components/callout/callout_theme.dart b/packages/remix/lib/src/components/callout/callout_theme.dart index 40ca56e44..240ea751c 100644 --- a/packages/remix/lib/src/components/callout/callout_theme.dart +++ b/packages/remix/lib/src/components/callout/callout_theme.dart @@ -15,16 +15,15 @@ class FortalezaCalloutStyle extends CalloutStyle { final baseStyle = super.makeStyle(spec); final baseOverrides = Style( baseStyle(), - $.flex.chain - ..gap.$space(3) - ..crossAxisAlignment.center() - ..mainAxisAlignment.start() - ..wrap.padding(16), - $.container.chain + $.flexContainer.chain ..borderRadius(8) ..color.$accent(3) ..border.all.width(0) - ..border.all.style.none(), + ..border.all.style.none() + ..padding(16) + ..flex.gap.$space(3) + ..flex.crossAxisAlignment.center() + ..flex.mainAxisAlignment.start(), $.icon.chain ..color.$accentAlpha(11) ..size(20), @@ -34,7 +33,7 @@ class FortalezaCalloutStyle extends CalloutStyle { ); final surfaceVariant = Style( - $.container.chain + $.flexContainer.chain ..border.all.style.solid() ..color.$accentAlpha(3) ..border.width(1) @@ -42,7 +41,7 @@ class FortalezaCalloutStyle extends CalloutStyle { ); final outlineVariant = Style( - $.container.chain + $.flexContainer.chain ..border.all.style.solid() ..color.transparent() ..border.width(1) diff --git a/packages/remix/lib/src/components/callout/callout_widget.dart b/packages/remix/lib/src/components/callout/callout_widget.dart index 1a2406a73..1bb3db8e5 100644 --- a/packages/remix/lib/src/components/callout/callout_widget.dart +++ b/packages/remix/lib/src/components/callout/callout_widget.dart @@ -32,11 +32,9 @@ class Callout extends StatelessWidget { builder: (context) { final spec = CalloutSpec.of(context); - return spec.container( - child: spec.flex( - direction: Axis.horizontal, - children: [if (icon != null) spec.icon(icon!), spec.text(text)], - ), + return spec.flexContainer( + direction: Axis.horizontal, + children: [if (icon != null) spec.icon(icon!), spec.text(text)], ); }, ); From 5995f552e6c5ae0ed1a95a50aeb69b62ff81c934 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Thu, 14 Nov 2024 16:48:31 -0300 Subject: [PATCH 39/57] checkbox --- .../lib/src/components/checkbox/checkbox.dart | 6 ++-- .../src/components/checkbox/checkbox.g.dart | 36 ++++++++++--------- .../components/checkbox/checkbox_style.dart | 5 +-- .../components/checkbox/checkbox_theme.dart | 9 ++--- .../components/checkbox/checkbox_widget.dart | 4 +-- 5 files changed, 29 insertions(+), 31 deletions(-) diff --git a/packages/remix/lib/src/components/checkbox/checkbox.dart b/packages/remix/lib/src/components/checkbox/checkbox.dart index bc3f6d950..a69460a66 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox.dart @@ -14,7 +14,7 @@ part 'checkbox_widget.dart'; @MixableSpec() base class CheckboxSpec extends Spec with _$CheckboxSpec, Diagnosticable { - final FlexSpec layout; + final FlexBoxSpec flexContainer; final BoxSpec indicatorContainer; final IconSpec indicatorIcon; final TextSpec label; @@ -27,13 +27,13 @@ base class CheckboxSpec extends Spec const CheckboxSpec({ BoxSpec? indicatorContainer, IconSpec? indicatorIcon, - FlexSpec? layout, + FlexBoxSpec? flexContainer, TextSpec? label, super.modifiers, super.animated, }) : indicatorContainer = indicatorContainer ?? const BoxSpec(), indicatorIcon = indicatorIcon ?? const IconSpec(), - layout = layout ?? const FlexSpec(), + flexContainer = flexContainer ?? const FlexBoxSpec(), label = label ?? const TextSpec(); @override diff --git a/packages/remix/lib/src/components/checkbox/checkbox.g.dart b/packages/remix/lib/src/components/checkbox/checkbox.g.dart index 2e3b72c80..b8fab4cbc 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox.g.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox.g.dart @@ -35,7 +35,7 @@ mixin _$CheckboxSpec on Spec { CheckboxSpec copyWith({ BoxSpec? indicatorContainer, IconSpec? indicatorIcon, - FlexSpec? layout, + FlexBoxSpec? flexContainer, TextSpec? label, WidgetModifiersData? modifiers, AnimatedData? animated, @@ -43,7 +43,7 @@ mixin _$CheckboxSpec on Spec { return CheckboxSpec( indicatorContainer: indicatorContainer ?? _$this.indicatorContainer, indicatorIcon: indicatorIcon ?? _$this.indicatorIcon, - layout: layout ?? _$this.layout, + flexContainer: flexContainer ?? _$this.flexContainer, label: label ?? _$this.label, modifiers: modifiers ?? _$this.modifiers, animated: animated ?? _$this.animated, @@ -63,7 +63,7 @@ mixin _$CheckboxSpec on Spec { /// /// - [BoxSpec.lerp] for [indicatorContainer]. /// - [IconSpec.lerp] for [indicatorIcon]. - /// - [FlexSpec.lerp] for [layout]. + /// - [FlexBoxSpec.lerp] for [flexContainer]. /// - [TextSpec.lerp] for [label]. /// For [modifiers] and [animated], the interpolation is performed using a step function. @@ -80,7 +80,7 @@ mixin _$CheckboxSpec on Spec { indicatorContainer: _$this.indicatorContainer.lerp(other.indicatorContainer, t), indicatorIcon: _$this.indicatorIcon.lerp(other.indicatorIcon, t), - layout: _$this.layout.lerp(other.layout, t), + flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), label: _$this.label.lerp(other.label, t), modifiers: other.modifiers, animated: t < 0.5 ? _$this.animated : other.animated, @@ -95,7 +95,7 @@ mixin _$CheckboxSpec on Spec { List get props => [ _$this.indicatorContainer, _$this.indicatorIcon, - _$this.layout, + _$this.flexContainer, _$this.label, _$this.modifiers, _$this.animated, @@ -109,8 +109,8 @@ mixin _$CheckboxSpec on Spec { defaultValue: null)); properties.add(DiagnosticsProperty('indicatorIcon', _$this.indicatorIcon, defaultValue: null)); - properties - .add(DiagnosticsProperty('layout', _$this.layout, defaultValue: null)); + properties.add(DiagnosticsProperty('flexContainer', _$this.flexContainer, + defaultValue: null)); properties .add(DiagnosticsProperty('label', _$this.label, defaultValue: null)); properties.add( @@ -131,13 +131,13 @@ base class CheckboxSpecAttribute extends SpecAttribute with Diagnosticable { final BoxSpecAttribute? indicatorContainer; final IconSpecAttribute? indicatorIcon; - final FlexSpecAttribute? layout; + final FlexBoxSpecAttribute? flexContainer; final TextSpecAttribute? label; const CheckboxSpecAttribute({ this.indicatorContainer, this.indicatorIcon, - this.layout, + this.flexContainer, this.label, super.modifiers, super.animated, @@ -156,7 +156,7 @@ base class CheckboxSpecAttribute extends SpecAttribute return CheckboxSpec( indicatorContainer: indicatorContainer?.resolve(mix), indicatorIcon: indicatorIcon?.resolve(mix), - layout: layout?.resolve(mix), + flexContainer: flexContainer?.resolve(mix), label: label?.resolve(mix), modifiers: modifiers?.resolve(mix), animated: animated?.resolve(mix) ?? mix.animation, @@ -180,7 +180,8 @@ base class CheckboxSpecAttribute extends SpecAttribute other.indicatorContainer, indicatorIcon: indicatorIcon?.merge(other.indicatorIcon) ?? other.indicatorIcon, - layout: layout?.merge(other.layout) ?? other.layout, + flexContainer: + flexContainer?.merge(other.flexContainer) ?? other.flexContainer, label: label?.merge(other.label) ?? other.label, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, animated: animated?.merge(other.animated) ?? other.animated, @@ -195,7 +196,7 @@ base class CheckboxSpecAttribute extends SpecAttribute List get props => [ indicatorContainer, indicatorIcon, - layout, + flexContainer, label, modifiers, animated, @@ -208,7 +209,8 @@ base class CheckboxSpecAttribute extends SpecAttribute defaultValue: null)); properties.add(DiagnosticsProperty('indicatorIcon', indicatorIcon, defaultValue: null)); - properties.add(DiagnosticsProperty('layout', layout, defaultValue: null)); + properties.add(DiagnosticsProperty('flexContainer', flexContainer, + defaultValue: null)); properties.add(DiagnosticsProperty('label', label, defaultValue: null)); properties .add(DiagnosticsProperty('modifiers', modifiers, defaultValue: null)); @@ -230,8 +232,8 @@ class CheckboxSpecUtility /// Utility for defining [CheckboxSpecAttribute.indicatorIcon] late final indicatorIcon = IconSpecUtility((v) => only(indicatorIcon: v)); - /// Utility for defining [CheckboxSpecAttribute.layout] - late final layout = FlexSpecUtility((v) => only(layout: v)); + /// Utility for defining [CheckboxSpecAttribute.flexContainer] + late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); /// Utility for defining [CheckboxSpecAttribute.label] late final label = TextSpecUtility((v) => only(label: v)); @@ -255,7 +257,7 @@ class CheckboxSpecUtility T only({ BoxSpecAttribute? indicatorContainer, IconSpecAttribute? indicatorIcon, - FlexSpecAttribute? layout, + FlexBoxSpecAttribute? flexContainer, TextSpecAttribute? label, WidgetModifiersDataDto? modifiers, AnimatedDataDto? animated, @@ -263,7 +265,7 @@ class CheckboxSpecUtility return builder(CheckboxSpecAttribute( indicatorContainer: indicatorContainer, indicatorIcon: indicatorIcon, - layout: layout, + flexContainer: flexContainer, label: label, modifiers: modifiers, animated: animated, diff --git a/packages/remix/lib/src/components/checkbox/checkbox_style.dart b/packages/remix/lib/src/components/checkbox/checkbox_style.dart index f4ce858ee..3b54b61f5 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox_style.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox_style.dart @@ -31,7 +31,7 @@ class CheckboxStyle extends SpecStyle { ..style.fontWeight.w500() ..textHeightBehavior.heightToFirstAscent.off(); - final layoutStyle = $.layout.chain + final flexContainerStyle = $.flexContainer.flex.chain ..crossAxisAlignment.center() ..mainAxisAlignment.start() ..mainAxisSize.min() @@ -47,7 +47,7 @@ class CheckboxStyle extends SpecStyle { ...containerStyle, ...indicatorStyle, labelStyle, - layoutStyle, + flexContainerStyle, disabledStyle, ]); } @@ -64,6 +64,7 @@ class CheckboxDarkStyle extends CheckboxStyle { super.makeStyle(spec).call(), $.indicatorContainer.border.all.color.white(), $.indicatorIcon.color.black(), + $.label.style.color.white(), spec.on.selected( $.indicatorContainer.color.white(), $.indicatorIcon.color.black(), diff --git a/packages/remix/lib/src/components/checkbox/checkbox_theme.dart b/packages/remix/lib/src/components/checkbox/checkbox_theme.dart index 8a2962de3..338fe6090 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox_theme.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox_theme.dart @@ -13,17 +13,12 @@ class FortalezaCheckboxStyle extends CheckboxStyle { final baseStyle = super.makeStyle(spec); final baseOverrides = Style( + $.indicatorIcon.wrap.scale(0.5), $.indicatorContainer.chain ..border.all.width(0) ..border.all.style.none(), - $.indicatorContainer.chain - ..wrap.opacity(0) - ..wrap.scale(0.5), $.label.style.color.$neutral(12), - spec.on.selected( - $.indicatorContainer.wrap.opacity(1), - $.indicatorContainer.wrap.scale(1), - ), + spec.on.selected($.indicatorIcon.wrap.scale(0.9)), ); final surfaceVariant = Style( diff --git a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart index b2a8f00f8..ca8d6a668 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart @@ -93,11 +93,11 @@ class _CheckboxState extends State { builder: (context) { final spec = CheckboxSpec.of(context); + final FlexContainerLayout = spec.flexContainer; final ContainerWidget = spec.indicatorContainer; - final ContainerLayout = spec.layout; final IconWidget = spec.indicatorIcon; - return ContainerLayout( + return FlexContainerLayout( direction: Axis.horizontal, children: [ ContainerWidget( From e425c4e718184daebfd4f5f7502d7fcca9e8ef16 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Thu, 14 Nov 2024 16:54:36 -0300 Subject: [PATCH 40/57] chip --- .../remix/lib/src/components/chip/chip.dart | 9 +-- .../remix/lib/src/components/chip/chip.g.dart | 55 +++++++------------ .../lib/src/components/chip/chip_style.dart | 38 ++++++------- .../lib/src/components/chip/chip_theme.dart | 31 +++++------ .../lib/src/components/chip/chip_widget.dart | 16 +++--- 5 files changed, 61 insertions(+), 88 deletions(-) diff --git a/packages/remix/lib/src/components/chip/chip.dart b/packages/remix/lib/src/components/chip/chip.dart index 3a837a6d9..6d6bb11ba 100644 --- a/packages/remix/lib/src/components/chip/chip.dart +++ b/packages/remix/lib/src/components/chip/chip.dart @@ -14,8 +14,7 @@ part 'chip_widget.dart'; @MixableSpec() class ChipSpec extends Spec with _$ChipSpec, Diagnosticable { - final FlexSpec layout; - final BoxSpec container; + final FlexBoxSpec flexContainer; final IconSpec icon; final TextSpec label; @@ -25,14 +24,12 @@ class ChipSpec extends Spec with _$ChipSpec, Diagnosticable { static const from = _$ChipSpec.from; const ChipSpec({ - BoxSpec? container, - FlexSpec? layout, + FlexBoxSpec? flexContainer, IconSpec? icon, TextSpec? label, super.modifiers, super.animated, - }) : layout = layout ?? const FlexSpec(), - container = container ?? const BoxSpec(), + }) : flexContainer = flexContainer ?? const FlexBoxSpec(), icon = icon ?? const IconSpec(), label = label ?? const TextSpec(); diff --git a/packages/remix/lib/src/components/chip/chip.g.dart b/packages/remix/lib/src/components/chip/chip.g.dart index 796052837..bf311701c 100644 --- a/packages/remix/lib/src/components/chip/chip.g.dart +++ b/packages/remix/lib/src/components/chip/chip.g.dart @@ -33,16 +33,14 @@ mixin _$ChipSpec on Spec { /// replaced with the new values. @override ChipSpec copyWith({ - BoxSpec? container, - FlexSpec? layout, + FlexBoxSpec? flexContainer, IconSpec? icon, TextSpec? label, WidgetModifiersData? modifiers, AnimatedData? animated, }) { return ChipSpec( - container: container ?? _$this.container, - layout: layout ?? _$this.layout, + flexContainer: flexContainer ?? _$this.flexContainer, icon: icon ?? _$this.icon, label: label ?? _$this.label, modifiers: modifiers ?? _$this.modifiers, @@ -61,8 +59,7 @@ mixin _$ChipSpec on Spec { /// The interpolation is performed on each property of the [ChipSpec] using the appropriate /// interpolation method: /// - /// - [BoxSpec.lerp] for [container]. - /// - [FlexSpec.lerp] for [layout]. + /// - [FlexBoxSpec.lerp] for [flexContainer]. /// - [IconSpec.lerp] for [icon]. /// - [TextSpec.lerp] for [label]. @@ -77,8 +74,7 @@ mixin _$ChipSpec on Spec { if (other == null) return _$this; return ChipSpec( - container: _$this.container.lerp(other.container, t), - layout: _$this.layout.lerp(other.layout, t), + flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), icon: _$this.icon.lerp(other.icon, t), label: _$this.label.lerp(other.label, t), modifiers: other.modifiers, @@ -92,8 +88,7 @@ mixin _$ChipSpec on Spec { /// compare two [ChipSpec] instances for equality. @override List get props => [ - _$this.container, - _$this.layout, + _$this.flexContainer, _$this.icon, _$this.label, _$this.modifiers, @@ -103,10 +98,8 @@ mixin _$ChipSpec on Spec { ChipSpec get _$this => this as ChipSpec; void _debugFillProperties(DiagnosticPropertiesBuilder properties) { - properties.add( - DiagnosticsProperty('container', _$this.container, defaultValue: null)); - properties - .add(DiagnosticsProperty('layout', _$this.layout, defaultValue: null)); + properties.add(DiagnosticsProperty('flexContainer', _$this.flexContainer, + defaultValue: null)); properties .add(DiagnosticsProperty('icon', _$this.icon, defaultValue: null)); properties @@ -126,14 +119,12 @@ mixin _$ChipSpec on Spec { /// Use this class to configure the attributes of a [ChipSpec] and pass it to /// the [ChipSpec] constructor. class ChipSpecAttribute extends SpecAttribute with Diagnosticable { - final BoxSpecAttribute? container; - final FlexSpecAttribute? layout; + final FlexBoxSpecAttribute? flexContainer; final IconSpecAttribute? icon; final TextSpecAttribute? label; const ChipSpecAttribute({ - this.container, - this.layout, + this.flexContainer, this.icon, this.label, super.modifiers, @@ -151,8 +142,7 @@ class ChipSpecAttribute extends SpecAttribute with Diagnosticable { @override ChipSpec resolve(MixData mix) { return ChipSpec( - container: container?.resolve(mix), - layout: layout?.resolve(mix), + flexContainer: flexContainer?.resolve(mix), icon: icon?.resolve(mix), label: label?.resolve(mix), modifiers: modifiers?.resolve(mix), @@ -173,8 +163,8 @@ class ChipSpecAttribute extends SpecAttribute with Diagnosticable { if (other == null) return this; return ChipSpecAttribute( - container: container?.merge(other.container) ?? other.container, - layout: layout?.merge(other.layout) ?? other.layout, + flexContainer: + flexContainer?.merge(other.flexContainer) ?? other.flexContainer, icon: icon?.merge(other.icon) ?? other.icon, label: label?.merge(other.label) ?? other.label, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, @@ -188,8 +178,7 @@ class ChipSpecAttribute extends SpecAttribute with Diagnosticable { /// compare two [ChipSpecAttribute] instances for equality. @override List get props => [ - container, - layout, + flexContainer, icon, label, modifiers, @@ -199,9 +188,8 @@ class ChipSpecAttribute extends SpecAttribute with Diagnosticable { @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); - properties - .add(DiagnosticsProperty('container', container, defaultValue: null)); - properties.add(DiagnosticsProperty('layout', layout, defaultValue: null)); + properties.add(DiagnosticsProperty('flexContainer', flexContainer, + defaultValue: null)); properties.add(DiagnosticsProperty('icon', icon, defaultValue: null)); properties.add(DiagnosticsProperty('label', label, defaultValue: null)); properties @@ -217,11 +205,8 @@ class ChipSpecAttribute extends SpecAttribute with Diagnosticable { /// Use the methods of this class to configure specific properties of a [ChipSpec]. class ChipSpecUtility extends SpecUtility { - /// Utility for defining [ChipSpecAttribute.container] - late final container = BoxSpecUtility((v) => only(container: v)); - - /// Utility for defining [ChipSpecAttribute.layout] - late final layout = FlexSpecUtility((v) => only(layout: v)); + /// Utility for defining [ChipSpecAttribute.flexContainer] + late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); /// Utility for defining [ChipSpecAttribute.icon] late final icon = IconSpecUtility((v) => only(icon: v)); @@ -246,16 +231,14 @@ class ChipSpecUtility /// Returns a new [ChipSpecAttribute] with the specified properties. @override T only({ - BoxSpecAttribute? container, - FlexSpecAttribute? layout, + FlexBoxSpecAttribute? flexContainer, IconSpecAttribute? icon, TextSpecAttribute? label, WidgetModifiersDataDto? modifiers, AnimatedDataDto? animated, }) { return builder(ChipSpecAttribute( - container: container, - layout: layout, + flexContainer: flexContainer, icon: icon, label: label, modifiers: modifiers, diff --git a/packages/remix/lib/src/components/chip/chip_style.dart b/packages/remix/lib/src/components/chip/chip_style.dart index a800d28c1..5cb095699 100644 --- a/packages/remix/lib/src/components/chip/chip_style.dart +++ b/packages/remix/lib/src/components/chip/chip_style.dart @@ -7,14 +7,6 @@ class ChipStyle extends SpecStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final layoutStyle = [ - $.layout.chain - ..mainAxisAlignment.center() - ..crossAxisAlignment.center() - ..mainAxisSize.min() - ..gap(8), - ]; - final iconStyle = [ $.icon.chain ..size(18) @@ -31,28 +23,32 @@ class ChipStyle extends SpecStyle { ..style.fontWeight.w600(), ]; - final containerStyle = [ - $.container.chain + final flexContainerStyle = [ + $.flexContainer.chain ..borderRadius(6) ..color.white() ..border.all.width(1) ..border.color.grey.shade200() ..padding.vertical(8) - ..padding.horizontal(12), - spec.on.selected($.container.color.grey.shade200()), + ..padding.horizontal(12) + ..flex.mainAxisAlignment.center() + ..flex.crossAxisAlignment.center() + ..flex.mainAxisSize.min() + ..flex.gap(8), + spec.on.selected($.flexContainer.color.grey.shade200()), ]; final disabledStyle = spec.on.disabled( $.label.style.color.grey.shade600(), $.icon.color.grey.shade600(), - spec.on.selected($.container.color.grey.shade300()), + spec.on.selected($.flexContainer.color.grey.shade300()), ); return Style.create([ - ...layoutStyle, + ...flexContainerStyle, ...iconStyle, ...labelStyle, - ...containerStyle, + ...flexContainerStyle, disabledStyle, ]); } @@ -65,17 +61,17 @@ class ChipDarkStyle extends ChipStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final containerStyle = [ - $.container.chain + final flexContainerStyle = [ + $.flexContainer.chain ..border.all.color.grey.shade900() ..color.black(), $.icon.color.white(), - spec.on.selected($.container.color.grey.shade900()), + spec.on.selected($.flexContainer.color.grey.shade900()), spec.on.disabled( $.label.style.color.grey.shade600(), $.icon.color.grey.shade600(), - $.container.color.black(), - spec.on.selected($.container.color.grey.shade900()), + $.flexContainer.color.black(), + spec.on.selected($.flexContainer.color.grey.shade900()), ), ]; @@ -83,7 +79,7 @@ class ChipDarkStyle extends ChipStyle { return Style.create([ super.makeStyle(spec).call(), - ...containerStyle, + ...flexContainerStyle, labelStyle, ]); } diff --git a/packages/remix/lib/src/components/chip/chip_theme.dart b/packages/remix/lib/src/components/chip/chip_theme.dart index 4c55c6f94..bb57d21f3 100644 --- a/packages/remix/lib/src/components/chip/chip_theme.dart +++ b/packages/remix/lib/src/components/chip/chip_theme.dart @@ -11,8 +11,6 @@ class FortalezaChipStyle extends ChipStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final layoutStyle = [$.layout.gap.$space(2)]; - final iconStyle = [$.icon.color.$accent()]; final labelStyle = [ @@ -21,49 +19,50 @@ class FortalezaChipStyle extends ChipStyle { ..style.color.$accent(), ]; - final containerStyle = [ - $.container.chain + final flexContainerStyle = [ + $.flexContainer.chain + ..flex.gap.$space(2) ..borderRadius(20) ..color.$accent(2) ..border.color.$accent(6) ..padding.vertical(8) ..padding.horizontal(12), - (spec.on.hover & spec.on.unselected)($.container.color.$accent(3)), - spec.on.selected($.container.color.$accent(4)), + (spec.on.hover & spec.on.unselected)($.flexContainer.color.$accent(3)), + spec.on.selected($.flexContainer.color.$accent(4)), ]; final disabledStyle = [ spec.on.disabled( - $.container.border.color.$neutral(4), - $.container.color.$neutral(2), + $.flexContainer.border.color.$neutral(4), + $.flexContainer.color.$neutral(2), $.label.style.color.$neutral(8), $.icon.color.$neutral(8), - spec.on.selected($.container.color.$neutral(4)), + spec.on.selected($.flexContainer.color.$neutral(4)), ), ]; final ghostStyle = Style.create([ - $.container.chain + $.flexContainer.chain ..borderRadius(6) ..color.$accent(1) ..border.style.none() ..padding.vertical(8) ..padding.horizontal(12), - (spec.on.hover & spec.on.unselected)($.container.color.$accent(3)), - spec.on.selected($.container.color.$accent(4)), + (spec.on.hover & spec.on.unselected)($.flexContainer.color.$accent(3)), + spec.on.selected($.flexContainer.color.$accent(4)), spec.on.disabled( - $.container.color.$neutral(2), + $.flexContainer.color.$neutral(2), $.icon.color.$neutral(8), - (spec.on.selected)($.container.color.$neutral(4)), + (spec.on.selected)($.flexContainer.color.$neutral(4)), ), ]); return Style.create([ super.makeStyle(spec).call(), - ...layoutStyle, + ...flexContainerStyle, ...iconStyle, ...labelStyle, - ...containerStyle, + ...flexContainerStyle, ...disabledStyle, ghost(ghostStyle()), ]).animate(duration: const Duration(milliseconds: 150)); diff --git a/packages/remix/lib/src/components/chip/chip_widget.dart b/packages/remix/lib/src/components/chip/chip_widget.dart index 46b52343d..880bfa951 100644 --- a/packages/remix/lib/src/components/chip/chip_widget.dart +++ b/packages/remix/lib/src/components/chip/chip_widget.dart @@ -92,15 +92,13 @@ class _ChipState extends State { builder: (context) { final spec = ChipSpec.of(context); - return spec.container( - child: spec.layout( - direction: Axis.horizontal, - children: [ - if (widget.iconLeft != null) spec.icon(widget.iconLeft), - if (widget.label?.isNotEmpty == true) spec.label(widget.label!), - if (widget.iconRight != null) spec.icon(widget.iconRight), - ], - ), + return spec.flexContainer( + direction: Axis.horizontal, + children: [ + if (widget.iconLeft != null) spec.icon(widget.iconLeft), + if (widget.label?.isNotEmpty == true) spec.label(widget.label!), + if (widget.iconRight != null) spec.icon(widget.iconRight), + ], ); }, ), From 01c0dd718bf23c40397c95311044c737c216634a Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Thu, 14 Nov 2024 17:04:00 -0300 Subject: [PATCH 41/57] dialog --- .../src/components/button/button_style.dart | 2 +- .../lib/src/components/dialog/dialog.dart | 15 ++- .../lib/src/components/dialog/dialog.g.dart | 92 ++++++++----------- .../src/components/dialog/dialog_style.dart | 21 ++--- .../src/components/dialog/dialog_theme.dart | 4 +- .../src/components/dialog/dialog_widget.dart | 28 +++--- 6 files changed, 67 insertions(+), 95 deletions(-) diff --git a/packages/remix/lib/src/components/button/button_style.dart b/packages/remix/lib/src/components/button/button_style.dart index dd6023a21..68b2cfb6f 100644 --- a/packages/remix/lib/src/components/button/button_style.dart +++ b/packages/remix/lib/src/components/button/button_style.dart @@ -33,7 +33,7 @@ class ButtonStyle extends SpecStyle { final flexboxStyle = [ $.flexbox.chain ..borderRadius(6) - ..color.red() + ..color.black() ..padding.vertical(8) ..padding.horizontal(12) ..flex.mainAxisAlignment.center() diff --git a/packages/remix/lib/src/components/dialog/dialog.dart b/packages/remix/lib/src/components/dialog/dialog.dart index 3b0d2d684..4ea465498 100644 --- a/packages/remix/lib/src/components/dialog/dialog.dart +++ b/packages/remix/lib/src/components/dialog/dialog.dart @@ -83,11 +83,10 @@ Future showDialog({ @MixableSpec() class DialogSpec extends Spec with _$DialogSpec, Diagnosticable { - final BoxSpec container; + final FlexBoxSpec flexContainer; final TextSpec title; final TextSpec description; - final FlexSpec containerLayout; - final FlexSpec actionsLayout; + final FlexSpec flexActions; /// {@macro dialog_spec_of} static const of = _$DialogSpec.of; @@ -95,18 +94,16 @@ class DialogSpec extends Spec with _$DialogSpec, Diagnosticable { static const from = _$DialogSpec.from; const DialogSpec({ - BoxSpec? container, + FlexBoxSpec? flexContainer, TextSpec? title, TextSpec? description, - FlexSpec? containerLayout, - FlexSpec? actionsLayout, + FlexSpec? flexActions, super.modifiers, super.animated, - }) : container = container ?? const BoxSpec(), + }) : flexContainer = flexContainer ?? const FlexBoxSpec(), title = title ?? const TextSpec(), description = description ?? const TextSpec(), - containerLayout = containerLayout ?? const FlexSpec(), - actionsLayout = actionsLayout ?? const FlexSpec(); + flexActions = flexActions ?? const FlexSpec(); @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { diff --git a/packages/remix/lib/src/components/dialog/dialog.g.dart b/packages/remix/lib/src/components/dialog/dialog.g.dart index 23532ee59..f49d61967 100644 --- a/packages/remix/lib/src/components/dialog/dialog.g.dart +++ b/packages/remix/lib/src/components/dialog/dialog.g.dart @@ -33,20 +33,18 @@ mixin _$DialogSpec on Spec { /// replaced with the new values. @override DialogSpec copyWith({ - BoxSpec? container, + FlexBoxSpec? flexContainer, TextSpec? title, TextSpec? description, - FlexSpec? containerLayout, - FlexSpec? actionsLayout, + FlexSpec? flexActions, WidgetModifiersData? modifiers, AnimatedData? animated, }) { return DialogSpec( - container: container ?? _$this.container, + flexContainer: flexContainer ?? _$this.flexContainer, title: title ?? _$this.title, description: description ?? _$this.description, - containerLayout: containerLayout ?? _$this.containerLayout, - actionsLayout: actionsLayout ?? _$this.actionsLayout, + flexActions: flexActions ?? _$this.flexActions, modifiers: modifiers ?? _$this.modifiers, animated: animated ?? _$this.animated, ); @@ -63,9 +61,9 @@ mixin _$DialogSpec on Spec { /// The interpolation is performed on each property of the [DialogSpec] using the appropriate /// interpolation method: /// - /// - [BoxSpec.lerp] for [container]. + /// - [FlexBoxSpec.lerp] for [flexContainer]. /// - [TextSpec.lerp] for [title] and [description]. - /// - [FlexSpec.lerp] for [containerLayout] and [actionsLayout]. + /// - [FlexSpec.lerp] for [flexActions]. /// For [modifiers] and [animated], the interpolation is performed using a step function. /// If [t] is less than 0.5, the value from the current [DialogSpec] is used. Otherwise, the value @@ -78,11 +76,10 @@ mixin _$DialogSpec on Spec { if (other == null) return _$this; return DialogSpec( - container: _$this.container.lerp(other.container, t), + flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), title: _$this.title.lerp(other.title, t), description: _$this.description.lerp(other.description, t), - containerLayout: _$this.containerLayout.lerp(other.containerLayout, t), - actionsLayout: _$this.actionsLayout.lerp(other.actionsLayout, t), + flexActions: _$this.flexActions.lerp(other.flexActions, t), modifiers: other.modifiers, animated: t < 0.5 ? _$this.animated : other.animated, ); @@ -94,11 +91,10 @@ mixin _$DialogSpec on Spec { /// compare two [DialogSpec] instances for equality. @override List get props => [ - _$this.container, + _$this.flexContainer, _$this.title, _$this.description, - _$this.containerLayout, - _$this.actionsLayout, + _$this.flexActions, _$this.modifiers, _$this.animated, ]; @@ -106,16 +102,13 @@ mixin _$DialogSpec on Spec { DialogSpec get _$this => this as DialogSpec; void _debugFillProperties(DiagnosticPropertiesBuilder properties) { - properties.add( - DiagnosticsProperty('container', _$this.container, defaultValue: null)); + properties.add(DiagnosticsProperty('flexContainer', _$this.flexContainer, + defaultValue: null)); properties .add(DiagnosticsProperty('title', _$this.title, defaultValue: null)); properties.add(DiagnosticsProperty('description', _$this.description, defaultValue: null)); - properties.add(DiagnosticsProperty( - 'containerLayout', _$this.containerLayout, - defaultValue: null)); - properties.add(DiagnosticsProperty('actionsLayout', _$this.actionsLayout, + properties.add(DiagnosticsProperty('flexActions', _$this.flexActions, defaultValue: null)); properties.add( DiagnosticsProperty('modifiers', _$this.modifiers, defaultValue: null)); @@ -133,18 +126,16 @@ mixin _$DialogSpec on Spec { /// the [DialogSpec] constructor. class DialogSpecAttribute extends SpecAttribute with Diagnosticable { - final BoxSpecAttribute? container; + final FlexBoxSpecAttribute? flexContainer; final TextSpecAttribute? title; final TextSpecAttribute? description; - final FlexSpecAttribute? containerLayout; - final FlexSpecAttribute? actionsLayout; + final FlexSpecAttribute? flexActions; const DialogSpecAttribute({ - this.container, + this.flexContainer, this.title, this.description, - this.containerLayout, - this.actionsLayout, + this.flexActions, super.modifiers, super.animated, }); @@ -160,11 +151,10 @@ class DialogSpecAttribute extends SpecAttribute @override DialogSpec resolve(MixData mix) { return DialogSpec( - container: container?.resolve(mix), + flexContainer: flexContainer?.resolve(mix), title: title?.resolve(mix), description: description?.resolve(mix), - containerLayout: containerLayout?.resolve(mix), - actionsLayout: actionsLayout?.resolve(mix), + flexActions: flexActions?.resolve(mix), modifiers: modifiers?.resolve(mix), animated: animated?.resolve(mix) ?? mix.animation, ); @@ -183,13 +173,11 @@ class DialogSpecAttribute extends SpecAttribute if (other == null) return this; return DialogSpecAttribute( - container: container?.merge(other.container) ?? other.container, + flexContainer: + flexContainer?.merge(other.flexContainer) ?? other.flexContainer, title: title?.merge(other.title) ?? other.title, description: description?.merge(other.description) ?? other.description, - containerLayout: containerLayout?.merge(other.containerLayout) ?? - other.containerLayout, - actionsLayout: - actionsLayout?.merge(other.actionsLayout) ?? other.actionsLayout, + flexActions: flexActions?.merge(other.flexActions) ?? other.flexActions, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, animated: animated?.merge(other.animated) ?? other.animated, ); @@ -201,11 +189,10 @@ class DialogSpecAttribute extends SpecAttribute /// compare two [DialogSpecAttribute] instances for equality. @override List get props => [ - container, + flexContainer, title, description, - containerLayout, - actionsLayout, + flexActions, modifiers, animated, ]; @@ -213,15 +200,13 @@ class DialogSpecAttribute extends SpecAttribute @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); - properties - .add(DiagnosticsProperty('container', container, defaultValue: null)); + properties.add(DiagnosticsProperty('flexContainer', flexContainer, + defaultValue: null)); properties.add(DiagnosticsProperty('title', title, defaultValue: null)); properties.add( DiagnosticsProperty('description', description, defaultValue: null)); - properties.add(DiagnosticsProperty('containerLayout', containerLayout, - defaultValue: null)); - properties.add(DiagnosticsProperty('actionsLayout', actionsLayout, - defaultValue: null)); + properties.add( + DiagnosticsProperty('flexActions', flexActions, defaultValue: null)); properties .add(DiagnosticsProperty('modifiers', modifiers, defaultValue: null)); properties @@ -235,8 +220,8 @@ class DialogSpecAttribute extends SpecAttribute /// Use the methods of this class to configure specific properties of a [DialogSpec]. class DialogSpecUtility extends SpecUtility { - /// Utility for defining [DialogSpecAttribute.container] - late final container = BoxSpecUtility((v) => only(container: v)); + /// Utility for defining [DialogSpecAttribute.flexContainer] + late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); /// Utility for defining [DialogSpecAttribute.title] late final title = TextSpecUtility((v) => only(title: v)); @@ -244,11 +229,8 @@ class DialogSpecUtility /// Utility for defining [DialogSpecAttribute.description] late final description = TextSpecUtility((v) => only(description: v)); - /// Utility for defining [DialogSpecAttribute.containerLayout] - late final containerLayout = FlexSpecUtility((v) => only(containerLayout: v)); - - /// Utility for defining [DialogSpecAttribute.actionsLayout] - late final actionsLayout = FlexSpecUtility((v) => only(actionsLayout: v)); + /// Utility for defining [DialogSpecAttribute.flexActions] + late final flexActions = FlexSpecUtility((v) => only(flexActions: v)); /// Utility for defining [DialogSpecAttribute.modifiers] late final wrap = SpecModifierUtility((v) => only(modifiers: v)); @@ -267,20 +249,18 @@ class DialogSpecUtility /// Returns a new [DialogSpecAttribute] with the specified properties. @override T only({ - BoxSpecAttribute? container, + FlexBoxSpecAttribute? flexContainer, TextSpecAttribute? title, TextSpecAttribute? description, - FlexSpecAttribute? containerLayout, - FlexSpecAttribute? actionsLayout, + FlexSpecAttribute? flexActions, WidgetModifiersDataDto? modifiers, AnimatedDataDto? animated, }) { return builder(DialogSpecAttribute( - container: container, + flexContainer: flexContainer, title: title, description: description, - containerLayout: containerLayout, - actionsLayout: actionsLayout, + flexActions: flexActions, modifiers: modifiers, animated: animated, )); diff --git a/packages/remix/lib/src/components/dialog/dialog_style.dart b/packages/remix/lib/src/components/dialog/dialog_style.dart index d559174eb..c48a23c32 100644 --- a/packages/remix/lib/src/components/dialog/dialog_style.dart +++ b/packages/remix/lib/src/components/dialog/dialog_style.dart @@ -7,20 +7,18 @@ class DialogStyle extends SpecStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final containerStyle = $.container.chain + final flexContainerStyle = $.flexContainer.chain ..padding.all(16) ..borderRadius.all(8) ..color.white() ..constraints.minWidth(300) - ..constraints.maxWidth(500); + ..constraints.maxWidth(500) + ..flex.mainAxisSize.min() + ..flex.gap(4) + ..flex.crossAxisAlignment.start() + ..flex.direction.vertical(); - final containerLayout = $.containerLayout.chain - ..mainAxisSize.min() - ..gap(4) - ..crossAxisAlignment.start() - ..direction.vertical(); - - final actionsLayout = $.actionsLayout.chain + final actionsLayout = $.flexActions.chain ..mainAxisSize.max() ..mainAxisAlignment.end() ..gap(12) @@ -39,8 +37,7 @@ class DialogStyle extends SpecStyle { return Style.create( [ $with.align(alignment: Alignment.center), - containerStyle, - containerLayout, + flexContainerStyle, titleStyle, descriptionStyle, actionsLayout, @@ -58,7 +55,7 @@ class DialogDarkStyle extends DialogStyle { return Style.create([ super.makeStyle(spec).call(), - $.container.chain + $.flexContainer.chain ..color.black() ..border.all.width(1) ..border.color.grey.shade900(), diff --git a/packages/remix/lib/src/components/dialog/dialog_theme.dart b/packages/remix/lib/src/components/dialog/dialog_theme.dart index 7426150b4..ce8a61a7f 100644 --- a/packages/remix/lib/src/components/dialog/dialog_theme.dart +++ b/packages/remix/lib/src/components/dialog/dialog_theme.dart @@ -7,7 +7,7 @@ class FortalezaDialogStyle extends DialogStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final containerStyle = $.container.chain + final flexContainerStyle = $.flexContainer.chain ..padding.all.$space(4) ..borderRadius.all.$radius(2) ..border.all.color.$neutral(6) @@ -24,7 +24,7 @@ class FortalezaDialogStyle extends DialogStyle { return Style.create( [ super.makeStyle(spec).call(), - containerStyle, + flexContainerStyle, titleStyle, descriptionStyle, ], diff --git a/packages/remix/lib/src/components/dialog/dialog_widget.dart b/packages/remix/lib/src/components/dialog/dialog_widget.dart index c4bf87196..06ef4a7ae 100644 --- a/packages/remix/lib/src/components/dialog/dialog_widget.dart +++ b/packages/remix/lib/src/components/dialog/dialog_widget.dart @@ -76,21 +76,19 @@ class Dialog extends StatelessWidget { builder: (context) { final spec = DialogSpec.of(context); - return spec.container( - child: spec.containerLayout( - direction: Axis.vertical, - children: [ - if (titleBuilder != null) titleBuilder!(spec.title), - if (descriptionBuilder != null) - descriptionBuilder!(spec.description), - content ?? const SizedBox.shrink(), - if (actions != null) - spec.actionsLayout( - direction: Axis.horizontal, - children: actions!, - ), - ], - ), + return spec.flexContainer( + direction: Axis.vertical, + children: [ + if (titleBuilder != null) titleBuilder!(spec.title), + if (descriptionBuilder != null) + descriptionBuilder!(spec.description), + content ?? const SizedBox.shrink(), + if (actions != null) + spec.flexActions( + direction: Axis.horizontal, + children: actions!, + ), + ], ); }, ); From 0e8c81a645e5dee99a494f5de3ade010085b84f7 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Thu, 14 Nov 2024 17:45:37 -0300 Subject: [PATCH 42/57] menu_item --- .../src/components/menu_item/menu_item.dart | 15 ++- .../src/components/menu_item/menu_item.g.dart | 93 +++++++------------ .../components/menu_item/menu_item_style.dart | 12 +-- .../components/menu_item/menu_item_theme.dart | 18 ++-- .../menu_item/menu_item_widget.dart | 32 +++---- .../callout/callout_widget_test.dart | 17 +--- 6 files changed, 74 insertions(+), 113 deletions(-) diff --git a/packages/remix/lib/src/components/menu_item/menu_item.dart b/packages/remix/lib/src/components/menu_item/menu_item.dart index 909ef97d2..ab623d3c8 100644 --- a/packages/remix/lib/src/components/menu_item/menu_item.dart +++ b/packages/remix/lib/src/components/menu_item/menu_item.dart @@ -15,9 +15,8 @@ part 'menu_item_widget.dart'; @MixableSpec() class MenuItemSpec extends Spec with _$MenuItemSpec, Diagnosticable { - final BoxSpec outerContainer; - final FlexSpec contentLayout; - final FlexSpec titleSubtitleLayout; + final FlexBoxSpec flexContainer; + final FlexSpec titleSubtitleFlex; final IconSpec icon; final TextSpec title; final TextSpec subtitle; @@ -28,17 +27,15 @@ class MenuItemSpec extends Spec static const from = _$MenuItemSpec.from; const MenuItemSpec({ - BoxSpec? outerContainer, - FlexSpec? contentLayout, - FlexSpec? titleSubtitleLayout, + FlexBoxSpec? flexContainer, + FlexSpec? titleSubtitleFlex, IconSpec? icon, TextSpec? title, TextSpec? subtitle, super.modifiers, super.animated, - }) : outerContainer = outerContainer ?? const BoxSpec(), - contentLayout = contentLayout ?? const FlexSpec(), - titleSubtitleLayout = titleSubtitleLayout ?? const FlexSpec(), + }) : flexContainer = flexContainer ?? const FlexBoxSpec(), + titleSubtitleFlex = titleSubtitleFlex ?? const FlexSpec(), icon = icon ?? const IconSpec(), title = title ?? const TextSpec(), subtitle = subtitle ?? const TextSpec(); diff --git a/packages/remix/lib/src/components/menu_item/menu_item.g.dart b/packages/remix/lib/src/components/menu_item/menu_item.g.dart index 02b7bb9b8..1b30696b2 100644 --- a/packages/remix/lib/src/components/menu_item/menu_item.g.dart +++ b/packages/remix/lib/src/components/menu_item/menu_item.g.dart @@ -33,9 +33,8 @@ mixin _$MenuItemSpec on Spec { /// replaced with the new values. @override MenuItemSpec copyWith({ - BoxSpec? outerContainer, - FlexSpec? contentLayout, - FlexSpec? titleSubtitleLayout, + FlexBoxSpec? flexContainer, + FlexSpec? titleSubtitleFlex, IconSpec? icon, TextSpec? title, TextSpec? subtitle, @@ -43,9 +42,8 @@ mixin _$MenuItemSpec on Spec { AnimatedData? animated, }) { return MenuItemSpec( - outerContainer: outerContainer ?? _$this.outerContainer, - contentLayout: contentLayout ?? _$this.contentLayout, - titleSubtitleLayout: titleSubtitleLayout ?? _$this.titleSubtitleLayout, + flexContainer: flexContainer ?? _$this.flexContainer, + titleSubtitleFlex: titleSubtitleFlex ?? _$this.titleSubtitleFlex, icon: icon ?? _$this.icon, title: title ?? _$this.title, subtitle: subtitle ?? _$this.subtitle, @@ -65,8 +63,8 @@ mixin _$MenuItemSpec on Spec { /// The interpolation is performed on each property of the [MenuItemSpec] using the appropriate /// interpolation method: /// - /// - [BoxSpec.lerp] for [outerContainer]. - /// - [FlexSpec.lerp] for [contentLayout] and [titleSubtitleLayout]. + /// - [FlexBoxSpec.lerp] for [flexContainer]. + /// - [FlexSpec.lerp] for [titleSubtitleFlex]. /// - [IconSpec.lerp] for [icon]. /// - [TextSpec.lerp] for [title] and [subtitle]. @@ -81,10 +79,9 @@ mixin _$MenuItemSpec on Spec { if (other == null) return _$this; return MenuItemSpec( - outerContainer: _$this.outerContainer.lerp(other.outerContainer, t), - contentLayout: _$this.contentLayout.lerp(other.contentLayout, t), - titleSubtitleLayout: - _$this.titleSubtitleLayout.lerp(other.titleSubtitleLayout, t), + flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), + titleSubtitleFlex: + _$this.titleSubtitleFlex.lerp(other.titleSubtitleFlex, t), icon: _$this.icon.lerp(other.icon, t), title: _$this.title.lerp(other.title, t), subtitle: _$this.subtitle.lerp(other.subtitle, t), @@ -99,9 +96,8 @@ mixin _$MenuItemSpec on Spec { /// compare two [MenuItemSpec] instances for equality. @override List get props => [ - _$this.outerContainer, - _$this.contentLayout, - _$this.titleSubtitleLayout, + _$this.flexContainer, + _$this.titleSubtitleFlex, _$this.icon, _$this.title, _$this.subtitle, @@ -112,12 +108,10 @@ mixin _$MenuItemSpec on Spec { MenuItemSpec get _$this => this as MenuItemSpec; void _debugFillProperties(DiagnosticPropertiesBuilder properties) { - properties.add(DiagnosticsProperty('outerContainer', _$this.outerContainer, - defaultValue: null)); - properties.add(DiagnosticsProperty('contentLayout', _$this.contentLayout, + properties.add(DiagnosticsProperty('flexContainer', _$this.flexContainer, defaultValue: null)); properties.add(DiagnosticsProperty( - 'titleSubtitleLayout', _$this.titleSubtitleLayout, + 'titleSubtitleFlex', _$this.titleSubtitleFlex, defaultValue: null)); properties .add(DiagnosticsProperty('icon', _$this.icon, defaultValue: null)); @@ -141,17 +135,15 @@ mixin _$MenuItemSpec on Spec { /// the [MenuItemSpec] constructor. class MenuItemSpecAttribute extends SpecAttribute with Diagnosticable { - final BoxSpecAttribute? outerContainer; - final FlexSpecAttribute? contentLayout; - final FlexSpecAttribute? titleSubtitleLayout; + final FlexBoxSpecAttribute? flexContainer; + final FlexSpecAttribute? titleSubtitleFlex; final IconSpecAttribute? icon; final TextSpecAttribute? title; final TextSpecAttribute? subtitle; const MenuItemSpecAttribute({ - this.outerContainer, - this.contentLayout, - this.titleSubtitleLayout, + this.flexContainer, + this.titleSubtitleFlex, this.icon, this.title, this.subtitle, @@ -170,9 +162,8 @@ class MenuItemSpecAttribute extends SpecAttribute @override MenuItemSpec resolve(MixData mix) { return MenuItemSpec( - outerContainer: outerContainer?.resolve(mix), - contentLayout: contentLayout?.resolve(mix), - titleSubtitleLayout: titleSubtitleLayout?.resolve(mix), + flexContainer: flexContainer?.resolve(mix), + titleSubtitleFlex: titleSubtitleFlex?.resolve(mix), icon: icon?.resolve(mix), title: title?.resolve(mix), subtitle: subtitle?.resolve(mix), @@ -194,13 +185,10 @@ class MenuItemSpecAttribute extends SpecAttribute if (other == null) return this; return MenuItemSpecAttribute( - outerContainer: - outerContainer?.merge(other.outerContainer) ?? other.outerContainer, - contentLayout: - contentLayout?.merge(other.contentLayout) ?? other.contentLayout, - titleSubtitleLayout: - titleSubtitleLayout?.merge(other.titleSubtitleLayout) ?? - other.titleSubtitleLayout, + flexContainer: + flexContainer?.merge(other.flexContainer) ?? other.flexContainer, + titleSubtitleFlex: titleSubtitleFlex?.merge(other.titleSubtitleFlex) ?? + other.titleSubtitleFlex, icon: icon?.merge(other.icon) ?? other.icon, title: title?.merge(other.title) ?? other.title, subtitle: subtitle?.merge(other.subtitle) ?? other.subtitle, @@ -215,9 +203,8 @@ class MenuItemSpecAttribute extends SpecAttribute /// compare two [MenuItemSpecAttribute] instances for equality. @override List get props => [ - outerContainer, - contentLayout, - titleSubtitleLayout, + flexContainer, + titleSubtitleFlex, icon, title, subtitle, @@ -228,12 +215,9 @@ class MenuItemSpecAttribute extends SpecAttribute @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); - properties.add(DiagnosticsProperty('outerContainer', outerContainer, - defaultValue: null)); - properties.add(DiagnosticsProperty('contentLayout', contentLayout, + properties.add(DiagnosticsProperty('flexContainer', flexContainer, defaultValue: null)); - properties.add(DiagnosticsProperty( - 'titleSubtitleLayout', titleSubtitleLayout, + properties.add(DiagnosticsProperty('titleSubtitleFlex', titleSubtitleFlex, defaultValue: null)); properties.add(DiagnosticsProperty('icon', icon, defaultValue: null)); properties.add(DiagnosticsProperty('title', title, defaultValue: null)); @@ -252,15 +236,12 @@ class MenuItemSpecAttribute extends SpecAttribute /// Use the methods of this class to configure specific properties of a [MenuItemSpec]. class MenuItemSpecUtility extends SpecUtility { - /// Utility for defining [MenuItemSpecAttribute.outerContainer] - late final outerContainer = BoxSpecUtility((v) => only(outerContainer: v)); - - /// Utility for defining [MenuItemSpecAttribute.contentLayout] - late final contentLayout = FlexSpecUtility((v) => only(contentLayout: v)); + /// Utility for defining [MenuItemSpecAttribute.flexContainer] + late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); - /// Utility for defining [MenuItemSpecAttribute.titleSubtitleLayout] - late final titleSubtitleLayout = - FlexSpecUtility((v) => only(titleSubtitleLayout: v)); + /// Utility for defining [MenuItemSpecAttribute.titleSubtitleFlex] + late final titleSubtitleFlex = + FlexSpecUtility((v) => only(titleSubtitleFlex: v)); /// Utility for defining [MenuItemSpecAttribute.icon] late final icon = IconSpecUtility((v) => only(icon: v)); @@ -288,9 +269,8 @@ class MenuItemSpecUtility /// Returns a new [MenuItemSpecAttribute] with the specified properties. @override T only({ - BoxSpecAttribute? outerContainer, - FlexSpecAttribute? contentLayout, - FlexSpecAttribute? titleSubtitleLayout, + FlexBoxSpecAttribute? flexContainer, + FlexSpecAttribute? titleSubtitleFlex, IconSpecAttribute? icon, TextSpecAttribute? title, TextSpecAttribute? subtitle, @@ -298,9 +278,8 @@ class MenuItemSpecUtility AnimatedDataDto? animated, }) { return builder(MenuItemSpecAttribute( - outerContainer: outerContainer, - contentLayout: contentLayout, - titleSubtitleLayout: titleSubtitleLayout, + flexContainer: flexContainer, + titleSubtitleFlex: titleSubtitleFlex, icon: icon, title: title, subtitle: subtitle, diff --git a/packages/remix/lib/src/components/menu_item/menu_item_style.dart b/packages/remix/lib/src/components/menu_item/menu_item_style.dart index b30b58856..20d65c9e3 100644 --- a/packages/remix/lib/src/components/menu_item/menu_item_style.dart +++ b/packages/remix/lib/src/components/menu_item/menu_item_style.dart @@ -7,15 +7,13 @@ class MenuItemStyle extends SpecStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final titleSubtitleLayout = $.titleSubtitleLayout.chain + final titleSubtitleFlex = $.titleSubtitleFlex.chain ..mainAxisAlignment.start() ..crossAxisAlignment.start() ..mainAxisSize.min() ..wrap.expanded() ..gap(4.0); - final contentLayout = $.contentLayout.gap(12.0); - final title = $.title.style.fontSize(14.0); final subtitle = $.subtitle.chain @@ -23,7 +21,8 @@ class MenuItemStyle extends SpecStyle { ..style.color.grey.shade600() ..maxLines(2); - final outerContainer = $.outerContainer.chain + final flexContainer = $.flexContainer.chain + ..flex.gap(12) ..padding(12) ..borderRadius(12); @@ -37,11 +36,10 @@ class MenuItemStyle extends SpecStyle { ); return Style.create([ - titleSubtitleLayout, - contentLayout, + titleSubtitleFlex, + flexContainer, title, subtitle, - outerContainer, icon, spec.on.disabled(disabled), ]); diff --git a/packages/remix/lib/src/components/menu_item/menu_item_theme.dart b/packages/remix/lib/src/components/menu_item/menu_item_theme.dart index ba541402e..9e290ed10 100644 --- a/packages/remix/lib/src/components/menu_item/menu_item_theme.dart +++ b/packages/remix/lib/src/components/menu_item/menu_item_theme.dart @@ -8,9 +8,8 @@ class FortalezaMenuItemStyle extends MenuItemStyle { final $ = spec.utilities; final baseStyle = super.makeStyle(spec); - final titleSubtitleLayout = $.titleSubtitleLayout.chain..gap.$space(1); + final titleSubtitleLayout = $.titleSubtitleFlex.chain..gap.$space(1); - final contentLayout = $.contentLayout.chain..gap.$space(3); final title = $.title.chain ..style.$text(2) ..style.color.resetDirectives() @@ -21,14 +20,15 @@ class FortalezaMenuItemStyle extends MenuItemStyle { ..style.color.resetDirectives() ..style.color.$neutral(9); - final outerContainer = $.outerContainer.chain + final flexContainer = $.flexContainer.chain ..padding.all.$space(3) ..padding.right.$space(4) - ..borderRadius.all.$radius(2); + ..borderRadius.all.$radius(2) + ..flex.gap.$space(3); final icon = $.icon.color.$neutral(11); - final hovered = $.outerContainer.color.$accent(2); + final hovered = $.flexContainer.color.$accent(3); final disabled = $.chain ..title.style.color.$neutral(9) @@ -38,16 +38,12 @@ class FortalezaMenuItemStyle extends MenuItemStyle { return Style.create([ baseStyle(), titleSubtitleLayout, - contentLayout, + flexContainer, title, subtitle, - outerContainer, icon, spec.on.hover(hovered), spec.on.disabled(disabled), - ]).animate( - duration: const Duration(milliseconds: 100), - curve: Curves.easeInOut, - ); + ]).animate(duration: const Duration(milliseconds: 100)); } } diff --git a/packages/remix/lib/src/components/menu_item/menu_item_widget.dart b/packages/remix/lib/src/components/menu_item/menu_item_widget.dart index 3a7fe2206..0b2cdc072 100644 --- a/packages/remix/lib/src/components/menu_item/menu_item_widget.dart +++ b/packages/remix/lib/src/components/menu_item/menu_item_widget.dart @@ -72,23 +72,21 @@ class MenuItem extends StatelessWidget { builder: (context) { final spec = MenuItemSpec.of(context); - return spec.outerContainer( - child: spec.contentLayout( - direction: Axis.horizontal, - children: [ - if (leadingWidgetBuilder != null) - leadingWidgetBuilder!(spec.icon), - spec.titleSubtitleLayout( - direction: Axis.vertical, - children: [ - spec.title(title), - if (subtitle != null) spec.subtitle(subtitle!), - ], - ), - if (trailingWidgetBuilder != null) - trailingWidgetBuilder!(spec.icon), - ], - ), + return spec.flexContainer( + direction: Axis.horizontal, + children: [ + if (leadingWidgetBuilder != null) + leadingWidgetBuilder!(spec.icon), + spec.titleSubtitleFlex( + direction: Axis.vertical, + children: [ + spec.title(title), + if (subtitle != null) spec.subtitle(subtitle!), + ], + ), + if (trailingWidgetBuilder != null) + trailingWidgetBuilder!(spec.icon), + ], ); }, ), diff --git a/packages/remix/test/components/callout/callout_widget_test.dart b/packages/remix/test/components/callout/callout_widget_test.dart index 4db5a8230..2b5c6ed5b 100644 --- a/packages/remix/test/components/callout/callout_widget_test.dart +++ b/packages/remix/test/components/callout/callout_widget_test.dart @@ -9,10 +9,7 @@ void main() { testWidgets('renders with custom label', (WidgetTester tester) async { await tester.pumpWidget( const MaterialApp( - home: r.Callout( - text: 'Test Callout', - style: r.CalloutStyle(), - ), + home: r.Callout(text: 'Test Callout', style: r.CalloutStyle()), ), ); @@ -25,8 +22,8 @@ void main() { await tester.pumpWidget( const MaterialApp( home: r.Callout( - text: 'Test Callout', icon: icon, + text: 'Test Callout', style: r.CalloutStyle(), ), ), @@ -65,18 +62,14 @@ void main() { class FakeCalloutStyle extends CalloutStyle { final Color color; - const FakeCalloutStyle( - this.color, - ); + const FakeCalloutStyle(this.color); @override Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; final baseStyle = super.makeStyle(spec); - return Style.create([ - baseStyle(), - $.container.color(color), - ]); + + return Style.create([baseStyle(), $.flexContainer.color(color)]); } } From da4185e8628b5d3b68e7aad2658d1236a0443348 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Thu, 14 Nov 2024 17:55:19 -0300 Subject: [PATCH 43/57] radio --- .../remix/lib/src/components/radio/radio.dart | 12 +-- .../lib/src/components/radio/radio.g.dart | 76 ++++++++++--------- .../lib/src/components/radio/radio_style.dart | 29 ++++--- .../lib/src/components/radio/radio_theme.dart | 30 ++++---- .../src/components/radio/radio_widget.dart | 4 +- 5 files changed, 79 insertions(+), 72 deletions(-) diff --git a/packages/remix/lib/src/components/radio/radio.dart b/packages/remix/lib/src/components/radio/radio.dart index 598d834bc..8be467577 100644 --- a/packages/remix/lib/src/components/radio/radio.dart +++ b/packages/remix/lib/src/components/radio/radio.dart @@ -14,9 +14,9 @@ part 'radio_widget.dart'; @MixableSpec() base class RadioSpec extends Spec with _$RadioSpec, Diagnosticable { - final BoxSpec container; + final BoxSpec indicatorContainer; final BoxSpec indicator; - final FlexSpec layout; + final FlexBoxSpec flexContainer; final TextSpec text; /// {@macro radio_spec_of} @@ -25,16 +25,16 @@ base class RadioSpec extends Spec with _$RadioSpec, Diagnosticable { static const from = _$RadioSpec.from; const RadioSpec({ - BoxSpec? container, + BoxSpec? indicatorContainer, BoxSpec? indicator, - FlexSpec? layout, + FlexBoxSpec? flexContainer, TextSpec? text, super.modifiers, super.animated, - }) : container = container ?? const BoxSpec(), + }) : indicatorContainer = indicatorContainer ?? const BoxSpec(), indicator = indicator ?? const BoxSpec(), text = text ?? const TextSpec(), - layout = layout ?? const FlexSpec(); + flexContainer = flexContainer ?? const FlexBoxSpec(); @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { diff --git a/packages/remix/lib/src/components/radio/radio.g.dart b/packages/remix/lib/src/components/radio/radio.g.dart index e12a5f8e7..f02ad9fcd 100644 --- a/packages/remix/lib/src/components/radio/radio.g.dart +++ b/packages/remix/lib/src/components/radio/radio.g.dart @@ -33,17 +33,17 @@ mixin _$RadioSpec on Spec { /// replaced with the new values. @override RadioSpec copyWith({ - BoxSpec? container, + BoxSpec? indicatorContainer, BoxSpec? indicator, - FlexSpec? layout, + FlexBoxSpec? flexContainer, TextSpec? text, WidgetModifiersData? modifiers, AnimatedData? animated, }) { return RadioSpec( - container: container ?? _$this.container, + indicatorContainer: indicatorContainer ?? _$this.indicatorContainer, indicator: indicator ?? _$this.indicator, - layout: layout ?? _$this.layout, + flexContainer: flexContainer ?? _$this.flexContainer, text: text ?? _$this.text, modifiers: modifiers ?? _$this.modifiers, animated: animated ?? _$this.animated, @@ -61,8 +61,8 @@ mixin _$RadioSpec on Spec { /// The interpolation is performed on each property of the [RadioSpec] using the appropriate /// interpolation method: /// - /// - [BoxSpec.lerp] for [container] and [indicator]. - /// - [FlexSpec.lerp] for [layout]. + /// - [BoxSpec.lerp] for [indicatorContainer] and [indicator]. + /// - [FlexBoxSpec.lerp] for [flexContainer]. /// - [TextSpec.lerp] for [text]. /// For [modifiers] and [animated], the interpolation is performed using a step function. @@ -76,9 +76,10 @@ mixin _$RadioSpec on Spec { if (other == null) return _$this; return RadioSpec( - container: _$this.container.lerp(other.container, t), + indicatorContainer: + _$this.indicatorContainer.lerp(other.indicatorContainer, t), indicator: _$this.indicator.lerp(other.indicator, t), - layout: _$this.layout.lerp(other.layout, t), + flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), text: _$this.text.lerp(other.text, t), modifiers: other.modifiers, animated: t < 0.5 ? _$this.animated : other.animated, @@ -91,9 +92,9 @@ mixin _$RadioSpec on Spec { /// compare two [RadioSpec] instances for equality. @override List get props => [ - _$this.container, + _$this.indicatorContainer, _$this.indicator, - _$this.layout, + _$this.flexContainer, _$this.text, _$this.modifiers, _$this.animated, @@ -102,12 +103,13 @@ mixin _$RadioSpec on Spec { RadioSpec get _$this => this as RadioSpec; void _debugFillProperties(DiagnosticPropertiesBuilder properties) { - properties.add( - DiagnosticsProperty('container', _$this.container, defaultValue: null)); + properties.add(DiagnosticsProperty( + 'indicatorContainer', _$this.indicatorContainer, + defaultValue: null)); properties.add( DiagnosticsProperty('indicator', _$this.indicator, defaultValue: null)); - properties - .add(DiagnosticsProperty('layout', _$this.layout, defaultValue: null)); + properties.add(DiagnosticsProperty('flexContainer', _$this.flexContainer, + defaultValue: null)); properties .add(DiagnosticsProperty('text', _$this.text, defaultValue: null)); properties.add( @@ -126,15 +128,15 @@ mixin _$RadioSpec on Spec { /// the [RadioSpec] constructor. base class RadioSpecAttribute extends SpecAttribute with Diagnosticable { - final BoxSpecAttribute? container; + final BoxSpecAttribute? indicatorContainer; final BoxSpecAttribute? indicator; - final FlexSpecAttribute? layout; + final FlexBoxSpecAttribute? flexContainer; final TextSpecAttribute? text; const RadioSpecAttribute({ - this.container, + this.indicatorContainer, this.indicator, - this.layout, + this.flexContainer, this.text, super.modifiers, super.animated, @@ -151,9 +153,9 @@ base class RadioSpecAttribute extends SpecAttribute @override RadioSpec resolve(MixData mix) { return RadioSpec( - container: container?.resolve(mix), + indicatorContainer: indicatorContainer?.resolve(mix), indicator: indicator?.resolve(mix), - layout: layout?.resolve(mix), + flexContainer: flexContainer?.resolve(mix), text: text?.resolve(mix), modifiers: modifiers?.resolve(mix), animated: animated?.resolve(mix) ?? mix.animation, @@ -173,9 +175,11 @@ base class RadioSpecAttribute extends SpecAttribute if (other == null) return this; return RadioSpecAttribute( - container: container?.merge(other.container) ?? other.container, + indicatorContainer: indicatorContainer?.merge(other.indicatorContainer) ?? + other.indicatorContainer, indicator: indicator?.merge(other.indicator) ?? other.indicator, - layout: layout?.merge(other.layout) ?? other.layout, + flexContainer: + flexContainer?.merge(other.flexContainer) ?? other.flexContainer, text: text?.merge(other.text) ?? other.text, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, animated: animated?.merge(other.animated) ?? other.animated, @@ -188,9 +192,9 @@ base class RadioSpecAttribute extends SpecAttribute /// compare two [RadioSpecAttribute] instances for equality. @override List get props => [ - container, + indicatorContainer, indicator, - layout, + flexContainer, text, modifiers, animated, @@ -199,11 +203,12 @@ base class RadioSpecAttribute extends SpecAttribute @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); - properties - .add(DiagnosticsProperty('container', container, defaultValue: null)); + properties.add(DiagnosticsProperty('indicatorContainer', indicatorContainer, + defaultValue: null)); properties .add(DiagnosticsProperty('indicator', indicator, defaultValue: null)); - properties.add(DiagnosticsProperty('layout', layout, defaultValue: null)); + properties.add(DiagnosticsProperty('flexContainer', flexContainer, + defaultValue: null)); properties.add(DiagnosticsProperty('text', text, defaultValue: null)); properties .add(DiagnosticsProperty('modifiers', modifiers, defaultValue: null)); @@ -218,14 +223,15 @@ base class RadioSpecAttribute extends SpecAttribute /// Use the methods of this class to configure specific properties of a [RadioSpec]. class RadioSpecUtility extends SpecUtility { - /// Utility for defining [RadioSpecAttribute.container] - late final container = BoxSpecUtility((v) => only(container: v)); + /// Utility for defining [RadioSpecAttribute.indicatorContainer] + late final indicatorContainer = + BoxSpecUtility((v) => only(indicatorContainer: v)); /// Utility for defining [RadioSpecAttribute.indicator] late final indicator = BoxSpecUtility((v) => only(indicator: v)); - /// Utility for defining [RadioSpecAttribute.layout] - late final layout = FlexSpecUtility((v) => only(layout: v)); + /// Utility for defining [RadioSpecAttribute.flexContainer] + late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); /// Utility for defining [RadioSpecAttribute.text] late final text = TextSpecUtility((v) => only(text: v)); @@ -247,17 +253,17 @@ class RadioSpecUtility /// Returns a new [RadioSpecAttribute] with the specified properties. @override T only({ - BoxSpecAttribute? container, + BoxSpecAttribute? indicatorContainer, BoxSpecAttribute? indicator, - FlexSpecAttribute? layout, + FlexBoxSpecAttribute? flexContainer, TextSpecAttribute? text, WidgetModifiersDataDto? modifiers, AnimatedDataDto? animated, }) { return builder(RadioSpecAttribute( - container: container, + indicatorContainer: indicatorContainer, indicator: indicator, - layout: layout, + flexContainer: flexContainer, text: text, modifiers: modifiers, animated: animated, diff --git a/packages/remix/lib/src/components/radio/radio_style.dart b/packages/remix/lib/src/components/radio/radio_style.dart index e9356a1a4..18f8cc8db 100644 --- a/packages/remix/lib/src/components/radio/radio_style.dart +++ b/packages/remix/lib/src/components/radio/radio_style.dart @@ -7,14 +7,14 @@ class RadioStyle extends SpecStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final containerStyle = [ - $.container.chain + final indicatorContainerStyle = [ + $.indicatorContainer.chain ..borderRadius(99) ..alignment.center() ..size(14) ..border.all.width(1) ..border.all.color.black(), - spec.on.disabled($.container.border.color.black45()), + spec.on.disabled($.indicatorContainer.border.color.black45()), ]; final indicatorStyle = [ @@ -34,25 +34,22 @@ class RadioStyle extends SpecStyle { ..style.fontWeight.w500() ..textHeightBehavior.heightToFirstAscent.off(); - final layoutStyle = $.layout.chain - ..row() - ..mainAxisSize.min() - ..mainAxisAlignment.start() - ..crossAxisAlignment.center() - ..gap(8); + final layoutStyle = $.flexContainer.chain + ..flex.row() + ..flex.mainAxisSize.min() + ..flex.mainAxisAlignment.start() + ..flex.crossAxisAlignment.center() + ..flex.gap(8); final disabledStyle = spec.on.disabled($.text.style.color.grey()); return Style.create([ - ...containerStyle, + ...indicatorContainerStyle, ...indicatorStyle, textStyle, layoutStyle, disabledStyle, - ]).animate( - duration: const Duration(milliseconds: 100), - curve: Curves.easeInOutQuad, - ); + ]); } } @@ -65,11 +62,11 @@ class RadioDarkStyle extends RadioStyle { return Style.create([ super.makeStyle(spec).call(), - $.container.border.all.color.white(), + $.indicatorContainer.border.all.color.white(), $.indicator.color.white(), $.text.style.color.white(), spec.on.disabled( - $.container.border.all.color.white30(), + $.indicatorContainer.border.all.color.white30(), $.indicator.color.white30(), ), ]); diff --git a/packages/remix/lib/src/components/radio/radio_theme.dart b/packages/remix/lib/src/components/radio/radio_theme.dart index 9f16a52ed..a89332c5e 100644 --- a/packages/remix/lib/src/components/radio/radio_theme.dart +++ b/packages/remix/lib/src/components/radio/radio_theme.dart @@ -15,47 +15,48 @@ class FortalezaRadioStyle extends RadioStyle { final surfaceVariant = Style( $.indicator.wrap.padding.all(3.5), - $.container.chain + $.indicatorContainer.chain ..color.$neutral(1) ..border.width(1) ..border.color.$neutral(8), $.indicator.chain..color.$white(), $.text.style.color.$neutral(12), spec.on.hover( - $.container.chain + $.indicatorContainer.chain ..color.$accentAlpha(4) ..border.color.$accentAlpha(8), ), spec.on.selected( - $.container.chain + $.indicatorContainer.chain ..border.none() ..color.$accent(9), ), - (spec.on.selected & spec.on.hover)($.container.color.$accent(11)), + (spec.on.selected & + spec.on.hover)($.indicatorContainer.color.$accent(11)), (spec.on.disabled & spec.on.selected)( - $.container.chain + $.indicatorContainer.chain ..color.$neutral(3) ..border.style.solid(), ), ); final disabledVariant = Style( - $.container.chain + $.indicatorContainer.chain ..color.$neutral(3) ..border.color.$neutral(5), $.indicator.color.$neutral(7), ); final softVariant = Style( - $.container.border.none(), - $.container.color.$accent(4), + $.indicatorContainer.border.none(), + $.indicatorContainer.color.$accent(4), $.indicator.color.$accent(10), - spec.on.selected($.container.color.$accent(4)), - spec.on.hover($.container.color.$accent(5)), - (spec.on.hover & spec.on.selected)($.container.color.$accent(5)), + spec.on.selected($.indicatorContainer.color.$accent(4)), + spec.on.hover($.indicatorContainer.color.$accent(5)), + (spec.on.hover & spec.on.selected)($.indicatorContainer.color.$accent(5)), spec.on.disabled( - $.container.color.$neutral(3), - $.container.border.color.black26(), + $.indicatorContainer.color.$neutral(3), + $.indicatorContainer.border.color.black26(), $.indicator.color.$neutral(8), ), ); @@ -67,6 +68,9 @@ class FortalezaRadioStyle extends RadioStyle { spec.on.disabled(disabledVariant()), soft(softVariant()), ], + ).animate( + duration: const Duration(milliseconds: 100), + curve: Curves.linear, ); } } diff --git a/packages/remix/lib/src/components/radio/radio_widget.dart b/packages/remix/lib/src/components/radio/radio_widget.dart index 78aed24b0..3d047a34a 100644 --- a/packages/remix/lib/src/components/radio/radio_widget.dart +++ b/packages/remix/lib/src/components/radio/radio_widget.dart @@ -92,9 +92,9 @@ class _RadioState extends State> { builder: (context) { final spec = RadioSpec.of(context); - final ContainerWidget = spec.container; + final ContainerWidget = spec.indicatorContainer; final IndicatorWidget = spec.indicator; - final FlexWidget = spec.layout; + final FlexWidget = spec.flexContainer; final TextWidget = spec.text; return FlexWidget( From 9f19c232f14c7522e97702c2648a9b52ec401d1a Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Thu, 14 Nov 2024 18:08:08 -0300 Subject: [PATCH 44/57] select --- .../select/button/select_button.dart | 9 +- .../select/button/select_button_widget.dart | 11 +- .../components/select/item/select_menu.dart | 9 +- .../select/item/select_menu_widget.dart | 14 +- .../lib/src/components/select/select.dart | 9 +- .../lib/src/components/select/select.g.dart | 165 ++++++------------ .../src/components/select/select_style.dart | 35 ++-- .../src/components/select/select_theme.dart | 46 ++--- .../src/components/select/select_widget.dart | 45 ++--- .../components/radio/radio_widget_test.dart | 2 +- 10 files changed, 138 insertions(+), 207 deletions(-) diff --git a/packages/remix/lib/src/components/select/button/select_button.dart b/packages/remix/lib/src/components/select/button/select_button.dart index 458d428be..b85805e88 100644 --- a/packages/remix/lib/src/components/select/button/select_button.dart +++ b/packages/remix/lib/src/components/select/button/select_button.dart @@ -3,8 +3,7 @@ part of '../select.dart'; @MixableSpec() class SelectButtonSpec extends Spec with _$SelectButtonSpec, Diagnosticable { - final BoxSpec container; - final FlexSpec layout; + final FlexBoxSpec flexContainer; final TextSpec label; final IconSpec icon; @@ -14,14 +13,12 @@ class SelectButtonSpec extends Spec static const from = _$SelectButtonSpec.from; const SelectButtonSpec({ - BoxSpec? container, - FlexSpec? layout, + FlexBoxSpec? flexContainer, IconSpec? icon, TextSpec? label, super.modifiers, super.animated, - }) : layout = layout ?? const FlexSpec(), - container = container ?? const BoxSpec(), + }) : flexContainer = flexContainer ?? const FlexBoxSpec(), icon = icon ?? const IconSpec(), label = label ?? const TextSpec(); diff --git a/packages/remix/lib/src/components/select/button/select_button_widget.dart b/packages/remix/lib/src/components/select/button/select_button_widget.dart index b0fcb6a8f..dc8a814e0 100644 --- a/packages/remix/lib/src/components/select/button/select_button_widget.dart +++ b/packages/remix/lib/src/components/select/button/select_button_widget.dart @@ -19,16 +19,13 @@ class SelectButtonSpecWidget extends StatelessWidget { builder: (context) { final button = SelectSpec.of(context).button; - final container = button.container; + final flexContainer = button.flexContainer; final label = button.label; final icon = button.icon; - final flex = button.layout; - return container( - child: flex( - direction: Axis.horizontal, - children: [label(text), icon(trailingIcon)], - ), + return flexContainer( + direction: Axis.horizontal, + children: [label(text), icon(trailingIcon)], ); }, ); diff --git a/packages/remix/lib/src/components/select/item/select_menu.dart b/packages/remix/lib/src/components/select/item/select_menu.dart index 05cbd40e1..f3cc6b6b6 100644 --- a/packages/remix/lib/src/components/select/item/select_menu.dart +++ b/packages/remix/lib/src/components/select/item/select_menu.dart @@ -5,8 +5,7 @@ base class SelectMenuItemSpec extends Spec with _$SelectMenuItemSpec, Diagnosticable { final IconSpec icon; final TextSpec text; - final BoxSpec container; - final FlexSpec layout; + final FlexBoxSpec flexContainer; static const of = _$SelectMenuItemSpec.of; @@ -15,14 +14,12 @@ base class SelectMenuItemSpec extends Spec const SelectMenuItemSpec({ IconSpec? icon, TextSpec? text, - BoxSpec? container, - FlexSpec? layout, + FlexBoxSpec? flexContainer, super.modifiers, super.animated, }) : icon = icon ?? const IconSpec(), text = text ?? const TextSpec(), - container = container ?? const BoxSpec(), - layout = layout ?? const FlexSpec(); + flexContainer = flexContainer ?? const FlexBoxSpec(); @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { diff --git a/packages/remix/lib/src/components/select/item/select_menu_widget.dart b/packages/remix/lib/src/components/select/item/select_menu_widget.dart index 48bc89cc1..82701985f 100644 --- a/packages/remix/lib/src/components/select/item/select_menu_widget.dart +++ b/packages/remix/lib/src/components/select/item/select_menu_widget.dart @@ -41,19 +41,13 @@ class SelectMenuItemWidget extends StatelessWidget { builder: (context) { final item = SelectSpec.of(context).item; - final container = item.container; - final layout = item.layout; + final flexContainer = item.flexContainer; final icon = item.icon; final text = item.text; - return container( - child: layout( - direction: Axis.horizontal, - children: [ - if (iconData != null) icon(iconData), - text(this.text), - ], - ), + return flexContainer( + direction: Axis.horizontal, + children: [if (iconData != null) icon(iconData), text(this.text)], ); }, ); diff --git a/packages/remix/lib/src/components/select/select.dart b/packages/remix/lib/src/components/select/select.dart index cf2ed90d5..996514607 100644 --- a/packages/remix/lib/src/components/select/select.dart +++ b/packages/remix/lib/src/components/select/select.dart @@ -62,8 +62,7 @@ class SelectSpec extends Spec with _$SelectSpec, Diagnosticable { @MixableSpec() base class SelectMenuSpec extends Spec with _$SelectMenuSpec, Diagnosticable { - final BoxSpec container; - final FlexSpec flex; + final FlexBoxSpec flexContainer; final bool autoWidth; /// {@macro select_menu_spec_of} @@ -72,13 +71,11 @@ base class SelectMenuSpec extends Spec static const from = _$SelectMenuSpec.from; const SelectMenuSpec({ - BoxSpec? container, - FlexSpec? flex, + FlexBoxSpec? flexContainer, bool? autoWidth, super.modifiers, super.animated, - }) : container = container ?? const BoxSpec(), - flex = flex ?? const FlexSpec(), + }) : flexContainer = flexContainer ?? const FlexBoxSpec(), autoWidth = autoWidth ?? true; @override diff --git a/packages/remix/lib/src/components/select/select.g.dart b/packages/remix/lib/src/components/select/select.g.dart index d22807367..985f31e97 100644 --- a/packages/remix/lib/src/components/select/select.g.dart +++ b/packages/remix/lib/src/components/select/select.g.dart @@ -313,15 +313,13 @@ mixin _$SelectMenuSpec on Spec { /// replaced with the new values. @override SelectMenuSpec copyWith({ - BoxSpec? container, - FlexSpec? flex, + FlexBoxSpec? flexContainer, bool? autoWidth, WidgetModifiersData? modifiers, AnimatedData? animated, }) { return SelectMenuSpec( - container: container ?? _$this.container, - flex: flex ?? _$this.flex, + flexContainer: flexContainer ?? _$this.flexContainer, autoWidth: autoWidth ?? _$this.autoWidth, modifiers: modifiers ?? _$this.modifiers, animated: animated ?? _$this.animated, @@ -339,8 +337,7 @@ mixin _$SelectMenuSpec on Spec { /// The interpolation is performed on each property of the [SelectMenuSpec] using the appropriate /// interpolation method: /// - /// - [BoxSpec.lerp] for [container]. - /// - [FlexSpec.lerp] for [flex]. + /// - [FlexBoxSpec.lerp] for [flexContainer]. /// For [autoWidth] and [modifiers] and [animated], the interpolation is performed using a step function. /// If [t] is less than 0.5, the value from the current [SelectMenuSpec] is used. Otherwise, the value @@ -353,8 +350,7 @@ mixin _$SelectMenuSpec on Spec { if (other == null) return _$this; return SelectMenuSpec( - container: _$this.container.lerp(other.container, t), - flex: _$this.flex.lerp(other.flex, t), + flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), autoWidth: t < 0.5 ? _$this.autoWidth : other.autoWidth, modifiers: other.modifiers, animated: t < 0.5 ? _$this.animated : other.animated, @@ -367,8 +363,7 @@ mixin _$SelectMenuSpec on Spec { /// compare two [SelectMenuSpec] instances for equality. @override List get props => [ - _$this.container, - _$this.flex, + _$this.flexContainer, _$this.autoWidth, _$this.modifiers, _$this.animated, @@ -377,10 +372,8 @@ mixin _$SelectMenuSpec on Spec { SelectMenuSpec get _$this => this as SelectMenuSpec; void _debugFillProperties(DiagnosticPropertiesBuilder properties) { - properties.add( - DiagnosticsProperty('container', _$this.container, defaultValue: null)); - properties - .add(DiagnosticsProperty('flex', _$this.flex, defaultValue: null)); + properties.add(DiagnosticsProperty('flexContainer', _$this.flexContainer, + defaultValue: null)); properties.add( DiagnosticsProperty('autoWidth', _$this.autoWidth, defaultValue: null)); properties.add( @@ -399,13 +392,11 @@ mixin _$SelectMenuSpec on Spec { /// the [SelectMenuSpec] constructor. base class SelectMenuSpecAttribute extends SpecAttribute with Diagnosticable { - final BoxSpecAttribute? container; - final FlexSpecAttribute? flex; + final FlexBoxSpecAttribute? flexContainer; final bool? autoWidth; const SelectMenuSpecAttribute({ - this.container, - this.flex, + this.flexContainer, this.autoWidth, super.modifiers, super.animated, @@ -422,8 +413,7 @@ base class SelectMenuSpecAttribute extends SpecAttribute @override SelectMenuSpec resolve(MixData mix) { return SelectMenuSpec( - container: container?.resolve(mix), - flex: flex?.resolve(mix), + flexContainer: flexContainer?.resolve(mix), autoWidth: autoWidth, modifiers: modifiers?.resolve(mix), animated: animated?.resolve(mix) ?? mix.animation, @@ -443,8 +433,8 @@ base class SelectMenuSpecAttribute extends SpecAttribute if (other == null) return this; return SelectMenuSpecAttribute( - container: container?.merge(other.container) ?? other.container, - flex: flex?.merge(other.flex) ?? other.flex, + flexContainer: + flexContainer?.merge(other.flexContainer) ?? other.flexContainer, autoWidth: other.autoWidth ?? autoWidth, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, animated: animated?.merge(other.animated) ?? other.animated, @@ -457,8 +447,7 @@ base class SelectMenuSpecAttribute extends SpecAttribute /// compare two [SelectMenuSpecAttribute] instances for equality. @override List get props => [ - container, - flex, + flexContainer, autoWidth, modifiers, animated, @@ -467,9 +456,8 @@ base class SelectMenuSpecAttribute extends SpecAttribute @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); - properties - .add(DiagnosticsProperty('container', container, defaultValue: null)); - properties.add(DiagnosticsProperty('flex', flex, defaultValue: null)); + properties.add(DiagnosticsProperty('flexContainer', flexContainer, + defaultValue: null)); properties .add(DiagnosticsProperty('autoWidth', autoWidth, defaultValue: null)); properties @@ -485,11 +473,8 @@ base class SelectMenuSpecAttribute extends SpecAttribute /// Use the methods of this class to configure specific properties of a [SelectMenuSpec]. class SelectMenuSpecUtility extends SpecUtility { - /// Utility for defining [SelectMenuSpecAttribute.container] - late final container = BoxSpecUtility((v) => only(container: v)); - - /// Utility for defining [SelectMenuSpecAttribute.flex] - late final flex = FlexSpecUtility((v) => only(flex: v)); + /// Utility for defining [SelectMenuSpecAttribute.flexContainer] + late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); /// Utility for defining [SelectMenuSpecAttribute.autoWidth] late final autoWidth = BoolUtility((v) => only(autoWidth: v)); @@ -511,15 +496,13 @@ class SelectMenuSpecUtility /// Returns a new [SelectMenuSpecAttribute] with the specified properties. @override T only({ - BoxSpecAttribute? container, - FlexSpecAttribute? flex, + FlexBoxSpecAttribute? flexContainer, bool? autoWidth, WidgetModifiersDataDto? modifiers, AnimatedDataDto? animated, }) { return builder(SelectMenuSpecAttribute( - container: container, - flex: flex, + flexContainer: flexContainer, autoWidth: autoWidth, modifiers: modifiers, animated: animated, @@ -578,16 +561,14 @@ mixin _$SelectButtonSpec on Spec { /// replaced with the new values. @override SelectButtonSpec copyWith({ - BoxSpec? container, - FlexSpec? layout, + FlexBoxSpec? flexContainer, IconSpec? icon, TextSpec? label, WidgetModifiersData? modifiers, AnimatedData? animated, }) { return SelectButtonSpec( - container: container ?? _$this.container, - layout: layout ?? _$this.layout, + flexContainer: flexContainer ?? _$this.flexContainer, icon: icon ?? _$this.icon, label: label ?? _$this.label, modifiers: modifiers ?? _$this.modifiers, @@ -606,8 +587,7 @@ mixin _$SelectButtonSpec on Spec { /// The interpolation is performed on each property of the [SelectButtonSpec] using the appropriate /// interpolation method: /// - /// - [BoxSpec.lerp] for [container]. - /// - [FlexSpec.lerp] for [layout]. + /// - [FlexBoxSpec.lerp] for [flexContainer]. /// - [IconSpec.lerp] for [icon]. /// - [TextSpec.lerp] for [label]. @@ -622,8 +602,7 @@ mixin _$SelectButtonSpec on Spec { if (other == null) return _$this; return SelectButtonSpec( - container: _$this.container.lerp(other.container, t), - layout: _$this.layout.lerp(other.layout, t), + flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), icon: _$this.icon.lerp(other.icon, t), label: _$this.label.lerp(other.label, t), modifiers: other.modifiers, @@ -637,8 +616,7 @@ mixin _$SelectButtonSpec on Spec { /// compare two [SelectButtonSpec] instances for equality. @override List get props => [ - _$this.container, - _$this.layout, + _$this.flexContainer, _$this.icon, _$this.label, _$this.modifiers, @@ -648,10 +626,8 @@ mixin _$SelectButtonSpec on Spec { SelectButtonSpec get _$this => this as SelectButtonSpec; void _debugFillProperties(DiagnosticPropertiesBuilder properties) { - properties.add( - DiagnosticsProperty('container', _$this.container, defaultValue: null)); - properties - .add(DiagnosticsProperty('layout', _$this.layout, defaultValue: null)); + properties.add(DiagnosticsProperty('flexContainer', _$this.flexContainer, + defaultValue: null)); properties .add(DiagnosticsProperty('icon', _$this.icon, defaultValue: null)); properties @@ -672,14 +648,12 @@ mixin _$SelectButtonSpec on Spec { /// the [SelectButtonSpec] constructor. class SelectButtonSpecAttribute extends SpecAttribute with Diagnosticable { - final BoxSpecAttribute? container; - final FlexSpecAttribute? layout; + final FlexBoxSpecAttribute? flexContainer; final IconSpecAttribute? icon; final TextSpecAttribute? label; const SelectButtonSpecAttribute({ - this.container, - this.layout, + this.flexContainer, this.icon, this.label, super.modifiers, @@ -697,8 +671,7 @@ class SelectButtonSpecAttribute extends SpecAttribute @override SelectButtonSpec resolve(MixData mix) { return SelectButtonSpec( - container: container?.resolve(mix), - layout: layout?.resolve(mix), + flexContainer: flexContainer?.resolve(mix), icon: icon?.resolve(mix), label: label?.resolve(mix), modifiers: modifiers?.resolve(mix), @@ -719,8 +692,8 @@ class SelectButtonSpecAttribute extends SpecAttribute if (other == null) return this; return SelectButtonSpecAttribute( - container: container?.merge(other.container) ?? other.container, - layout: layout?.merge(other.layout) ?? other.layout, + flexContainer: + flexContainer?.merge(other.flexContainer) ?? other.flexContainer, icon: icon?.merge(other.icon) ?? other.icon, label: label?.merge(other.label) ?? other.label, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, @@ -734,8 +707,7 @@ class SelectButtonSpecAttribute extends SpecAttribute /// compare two [SelectButtonSpecAttribute] instances for equality. @override List get props => [ - container, - layout, + flexContainer, icon, label, modifiers, @@ -745,9 +717,8 @@ class SelectButtonSpecAttribute extends SpecAttribute @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); - properties - .add(DiagnosticsProperty('container', container, defaultValue: null)); - properties.add(DiagnosticsProperty('layout', layout, defaultValue: null)); + properties.add(DiagnosticsProperty('flexContainer', flexContainer, + defaultValue: null)); properties.add(DiagnosticsProperty('icon', icon, defaultValue: null)); properties.add(DiagnosticsProperty('label', label, defaultValue: null)); properties @@ -763,11 +734,8 @@ class SelectButtonSpecAttribute extends SpecAttribute /// Use the methods of this class to configure specific properties of a [SelectButtonSpec]. class SelectButtonSpecUtility extends SpecUtility { - /// Utility for defining [SelectButtonSpecAttribute.container] - late final container = BoxSpecUtility((v) => only(container: v)); - - /// Utility for defining [SelectButtonSpecAttribute.layout] - late final layout = FlexSpecUtility((v) => only(layout: v)); + /// Utility for defining [SelectButtonSpecAttribute.flexContainer] + late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); /// Utility for defining [SelectButtonSpecAttribute.icon] late final icon = IconSpecUtility((v) => only(icon: v)); @@ -792,16 +760,14 @@ class SelectButtonSpecUtility /// Returns a new [SelectButtonSpecAttribute] with the specified properties. @override T only({ - BoxSpecAttribute? container, - FlexSpecAttribute? layout, + FlexBoxSpecAttribute? flexContainer, IconSpecAttribute? icon, TextSpecAttribute? label, WidgetModifiersDataDto? modifiers, AnimatedDataDto? animated, }) { return builder(SelectButtonSpecAttribute( - container: container, - layout: layout, + flexContainer: flexContainer, icon: icon, label: label, modifiers: modifiers, @@ -863,16 +829,14 @@ mixin _$SelectMenuItemSpec on Spec { SelectMenuItemSpec copyWith({ IconSpec? icon, TextSpec? text, - BoxSpec? container, - FlexSpec? layout, + FlexBoxSpec? flexContainer, WidgetModifiersData? modifiers, AnimatedData? animated, }) { return SelectMenuItemSpec( icon: icon ?? _$this.icon, text: text ?? _$this.text, - container: container ?? _$this.container, - layout: layout ?? _$this.layout, + flexContainer: flexContainer ?? _$this.flexContainer, modifiers: modifiers ?? _$this.modifiers, animated: animated ?? _$this.animated, ); @@ -891,8 +855,7 @@ mixin _$SelectMenuItemSpec on Spec { /// /// - [IconSpec.lerp] for [icon]. /// - [TextSpec.lerp] for [text]. - /// - [BoxSpec.lerp] for [container]. - /// - [FlexSpec.lerp] for [layout]. + /// - [FlexBoxSpec.lerp] for [flexContainer]. /// For [modifiers] and [animated], the interpolation is performed using a step function. /// If [t] is less than 0.5, the value from the current [SelectMenuItemSpec] is used. Otherwise, the value @@ -907,8 +870,7 @@ mixin _$SelectMenuItemSpec on Spec { return SelectMenuItemSpec( icon: _$this.icon.lerp(other.icon, t), text: _$this.text.lerp(other.text, t), - container: _$this.container.lerp(other.container, t), - layout: _$this.layout.lerp(other.layout, t), + flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), modifiers: other.modifiers, animated: t < 0.5 ? _$this.animated : other.animated, ); @@ -922,8 +884,7 @@ mixin _$SelectMenuItemSpec on Spec { List get props => [ _$this.icon, _$this.text, - _$this.container, - _$this.layout, + _$this.flexContainer, _$this.modifiers, _$this.animated, ]; @@ -935,10 +896,8 @@ mixin _$SelectMenuItemSpec on Spec { .add(DiagnosticsProperty('icon', _$this.icon, defaultValue: null)); properties .add(DiagnosticsProperty('text', _$this.text, defaultValue: null)); - properties.add( - DiagnosticsProperty('container', _$this.container, defaultValue: null)); - properties - .add(DiagnosticsProperty('layout', _$this.layout, defaultValue: null)); + properties.add(DiagnosticsProperty('flexContainer', _$this.flexContainer, + defaultValue: null)); properties.add( DiagnosticsProperty('modifiers', _$this.modifiers, defaultValue: null)); properties.add( @@ -957,14 +916,12 @@ base class SelectMenuItemSpecAttribute extends SpecAttribute with Diagnosticable { final IconSpecAttribute? icon; final TextSpecAttribute? text; - final BoxSpecAttribute? container; - final FlexSpecAttribute? layout; + final FlexBoxSpecAttribute? flexContainer; const SelectMenuItemSpecAttribute({ this.icon, this.text, - this.container, - this.layout, + this.flexContainer, super.modifiers, super.animated, }); @@ -982,8 +939,7 @@ base class SelectMenuItemSpecAttribute extends SpecAttribute return SelectMenuItemSpec( icon: icon?.resolve(mix), text: text?.resolve(mix), - container: container?.resolve(mix), - layout: layout?.resolve(mix), + flexContainer: flexContainer?.resolve(mix), modifiers: modifiers?.resolve(mix), animated: animated?.resolve(mix) ?? mix.animation, ); @@ -1005,8 +961,8 @@ base class SelectMenuItemSpecAttribute extends SpecAttribute return SelectMenuItemSpecAttribute( icon: icon?.merge(other.icon) ?? other.icon, text: text?.merge(other.text) ?? other.text, - container: container?.merge(other.container) ?? other.container, - layout: layout?.merge(other.layout) ?? other.layout, + flexContainer: + flexContainer?.merge(other.flexContainer) ?? other.flexContainer, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, animated: animated?.merge(other.animated) ?? other.animated, ); @@ -1020,8 +976,7 @@ base class SelectMenuItemSpecAttribute extends SpecAttribute List get props => [ icon, text, - container, - layout, + flexContainer, modifiers, animated, ]; @@ -1031,9 +986,8 @@ base class SelectMenuItemSpecAttribute extends SpecAttribute super.debugFillProperties(properties); properties.add(DiagnosticsProperty('icon', icon, defaultValue: null)); properties.add(DiagnosticsProperty('text', text, defaultValue: null)); - properties - .add(DiagnosticsProperty('container', container, defaultValue: null)); - properties.add(DiagnosticsProperty('layout', layout, defaultValue: null)); + properties.add(DiagnosticsProperty('flexContainer', flexContainer, + defaultValue: null)); properties .add(DiagnosticsProperty('modifiers', modifiers, defaultValue: null)); properties @@ -1053,11 +1007,8 @@ class SelectMenuItemSpecUtility /// Utility for defining [SelectMenuItemSpecAttribute.text] late final text = TextSpecUtility((v) => only(text: v)); - /// Utility for defining [SelectMenuItemSpecAttribute.container] - late final container = BoxSpecUtility((v) => only(container: v)); - - /// Utility for defining [SelectMenuItemSpecAttribute.layout] - late final layout = FlexSpecUtility((v) => only(layout: v)); + /// Utility for defining [SelectMenuItemSpecAttribute.flexContainer] + late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); /// Utility for defining [SelectMenuItemSpecAttribute.modifiers] late final wrap = SpecModifierUtility((v) => only(modifiers: v)); @@ -1078,16 +1029,14 @@ class SelectMenuItemSpecUtility T only({ IconSpecAttribute? icon, TextSpecAttribute? text, - BoxSpecAttribute? container, - FlexSpecAttribute? layout, + FlexBoxSpecAttribute? flexContainer, WidgetModifiersDataDto? modifiers, AnimatedDataDto? animated, }) { return builder(SelectMenuItemSpecAttribute( icon: icon, text: text, - container: container, - layout: layout, + flexContainer: flexContainer, modifiers: modifiers, animated: animated, )); diff --git a/packages/remix/lib/src/components/select/select_style.dart b/packages/remix/lib/src/components/select/select_style.dart index 31bb17d75..b191f5d8e 100644 --- a/packages/remix/lib/src/components/select/select_style.dart +++ b/packages/remix/lib/src/components/select/select_style.dart @@ -14,8 +14,8 @@ class SelectStyle extends SpecStyle { ]; final buttonStyle = [ - $.button.layout.mainAxisAlignment.spaceBetween(), - $.button.container.chain + $.button.flexContainer.chain + ..flex.mainAxisAlignment.spaceBetween() ..color.white() ..padding.all(10) ..border.color.black12() @@ -27,12 +27,12 @@ class SelectStyle extends SpecStyle { ..style.fontSize(14) ..style.color.black(), spec.on.disabled( - $.button.container.color(Colors.black.withOpacity(0.05)), + $.button.flexContainer.color(Colors.black.withOpacity(0.05)), ), ]; final menuStyle = [ - $.menu.container.chain + $.menu.flexContainer.chain ..borderRadius(6) ..shadow.color(Colors.black.withOpacity(0.07)) ..shadow.blurRadius(5) @@ -42,14 +42,13 @@ class SelectStyle extends SpecStyle { ..wrap.intrinsicWidth() ..wrap.transform.scale(0.95) ..wrap.opacity(0) - ..wrap.padding.top(0), - $.menu.flex.chain - ..mainAxisSize.min() - ..crossAxisAlignment.start(), + ..wrap.padding.top(0) + ..flex.mainAxisSize.min() + ..flex.crossAxisAlignment.start(), $.menu.wrap.transform.scale(1.5), $.menu.autoWidth.on(), spec.on.selected( - $.menu.container.chain + $.menu.flexContainer.chain ..wrap.transform.scale(1) ..wrap.opacity(1) ..wrap.padding.top(4), @@ -57,17 +56,17 @@ class SelectStyle extends SpecStyle { ]; final itemStyle = [ - $.item.container.chain + $.item.flexContainer.chain ..borderRadius(6) ..padding.vertical(8) ..padding.horizontal(6) - ..width.infinity(), + ..width.infinity() + ..flex.gap(6), $.item.text.chain ..style.color.black() ..style.fontSize(14), $.item.icon.size(20), - $.item.layout.gap(6), - spec.on.hover($.item.container.color.black12()), + spec.on.hover($.item.flexContainer.color.black12()), ]; return Style.create([ @@ -87,12 +86,12 @@ class SelectDarkStyle extends SelectStyle { final $ = spec.utilities; final buttonStyle = $.button.chain - ..container.color.black() - ..container.border.color.white12() + ..flexContainer.color.black() + ..flexContainer.border.color.white12() ..icon.color.white54() ..label.style.color.white(); - final menuStyle = $.menu.container.chain + final menuStyle = $.menu.flexContainer.chain ..color.black() ..border.all.color.white12(); @@ -103,8 +102,8 @@ class SelectDarkStyle extends SelectStyle { buttonStyle, menuStyle, itemStyle, - spec.on.hover($.item.container.color.white12()), - spec.on.disabled($.button.container.color.white10()), + spec.on.hover($.item.flexContainer.color.white12()), + spec.on.disabled($.button.flexContainer.color.white10()), ]); } } diff --git a/packages/remix/lib/src/components/select/select_theme.dart b/packages/remix/lib/src/components/select/select_theme.dart index 248f51b13..ba18ab64e 100644 --- a/packages/remix/lib/src/components/select/select_theme.dart +++ b/packages/remix/lib/src/components/select/select_theme.dart @@ -16,59 +16,59 @@ class FortalezaSelectStyle extends SelectStyle { final baseThemeOverrides = Style( $.menu.autoWidth.on(), - $.menu.container.chain + $.menu.flexContainer.chain ..color.$neutral(1) ..border.all.color.$neutral(6) ..wrap.intrinsicWidth() ..padding.all.$space(2), $.button.chain - ..container.border.all.color.$neutral(6) - ..container.color.$neutral(1) + ..flexContainer.border.all.color.$neutral(6) + ..flexContainer.color.$neutral(1) ..icon.color.$accentAlpha(12) - ..layout.gap.$space(1) - ..layout.mainAxisSize.min(), - $.item.container.padding.horizontal.$space(3), + ..flexContainer.flex.gap.$space(1) + ..flexContainer.flex.mainAxisSize.min(), + $.item.flexContainer.padding.horizontal.$space(3), spec.on.disabled( $.button.chain - ..container.color.$neutral(2) - ..container.border.all.color.$neutral(8) + ..flexContainer.color.$neutral(2) + ..flexContainer.border.all.color.$neutral(8) ..label.style.color.$neutral(11) ..icon.color.$neutral(9), ), spec.on.hover( - $.button.container.border.all.color.$neutral(8), - $.item.container.color.$accent(9), + $.button.flexContainer.border.all.color.$neutral(8), + $.item.flexContainer.color.$accent(9), $.item.text.style.color.$white(), ), ); final softVariant = Style( - $.button.container.chain + $.button.flexContainer.chain ..color.$accent(3) ..border.none(), $.button.label.style.color.$accent(12), $.item.text.style.color.$accent(12), spec.on.hover( - $.button.container.color.$accent(4), + $.button.flexContainer.color.$accent(4), $.item.chain - ..container.color.$accent(4) + ..flexContainer.color.$accent(4) ..text.style.color.$accent(12), ), ); final ghostVariant = Style( - $.button.container.chain + $.button.flexContainer.chain ..color.transparent() ..border.none(), spec.on.hover( - $.button.container.color.$accent(4), + $.button.flexContainer.color.$accent(4), $.item.chain - ..container.color.$accent(4) + ..flexContainer.color.$accent(4) ..text.style.color.$accent(12), ), spec.on.disabled( $.button.chain - ..container.color.transparent() + ..flexContainer.color.transparent() ..label.style.color.$neutral(11) ..icon.color.$neutral(9), ), @@ -97,19 +97,19 @@ class FortalezaDarkSelectStyle extends FortalezaSelectStyle { final baseThemeOverrides = Style( $.button.chain ..label.style.color.$neutral(12) - ..container.color.$neutral(1) - ..container.border.all.color.$neutral(7), - $.menu.container.color.$neutral(1), + ..flexContainer.color.$neutral(1) + ..flexContainer.border.all.color.$neutral(7), + $.menu.flexContainer.color.$neutral(1), $.item.text.style.color.$neutral(12), - spec.on.hover($.button.container.border.all.color.$neutral(8)), + spec.on.hover($.button.flexContainer.border.all.color.$neutral(8)), ); final ghost = Style( $.button.chain ..label.style.color.$accent(12) ..icon.color.$accent(12) - ..container.color.transparent() - ..container.border.all.color.$neutral(7), + ..flexContainer.color.transparent() + ..flexContainer.border.all.color.$neutral(7), $.item.text.style.color.$neutral(12), ); diff --git a/packages/remix/lib/src/components/select/select_widget.dart b/packages/remix/lib/src/components/select/select_widget.dart index ec7285f15..7b267bacf 100644 --- a/packages/remix/lib/src/components/select/select_widget.dart +++ b/packages/remix/lib/src/components/select/select_widget.dart @@ -127,32 +127,33 @@ class SelectState extends State> builder: (context) { final select = SelectSpec.of(context); final menu = select.menu; - final Container = menu.container.copyWith( - width: menu.autoWidth ? _link.leaderSize!.width : null, + + final Container = menu.flexContainer.copyWith( + box: menu.flexContainer.box.copyWith( + width: + menu.autoWidth ? _link.leaderSize!.width : null, + ), ); - final Flex = menu.flex; return Container( - child: Flex( - direction: Axis.vertical, - children: widget.items.map((item) { - return Pressable( - onPress: () { - widget.onChanged(item.value); - hide(); - }, - child: SpecBuilder( - style: appliedStyle.animate( - duration: _baseAnimation.duration, - curve: _baseAnimation.curve, - ), - builder: (context) { - return item.child; - }, + direction: Axis.vertical, + children: widget.items.map((item) { + return Pressable( + onPress: () { + widget.onChanged(item.value); + hide(); + }, + child: SpecBuilder( + style: appliedStyle.animate( + duration: _baseAnimation.duration, + curve: _baseAnimation.curve, ), - ); - }).toList(), - ), + builder: (context) { + return item.child; + }, + ), + ); + }).toList(), ); }, ), diff --git a/packages/remix/test/components/radio/radio_widget_test.dart b/packages/remix/test/components/radio/radio_widget_test.dart index ddf72bc56..c3af513f0 100644 --- a/packages/remix/test/components/radio/radio_widget_test.dart +++ b/packages/remix/test/components/radio/radio_widget_test.dart @@ -110,7 +110,7 @@ class FakeRadioStyle extends RadioStyle { final baseStyle = super.makeStyle(spec); return Style.create([ baseStyle(), - $.container.color(color), + $.flexContainer.color(color), ]); } } From 6ffeb65850664c3524da063c92c24f7ea86684d0 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Thu, 14 Nov 2024 18:23:06 -0300 Subject: [PATCH 45/57] textfield --- .../src/components/textfield/textfield.dart | 15 +- .../src/components/textfield/textfield.g.dart | 90 ++++----- .../components/textfield/textfield_style.dart | 31 ++- .../components/textfield/textfield_theme.dart | 14 +- .../textfield/textfield_widget.dart | 191 +++++++++--------- 5 files changed, 154 insertions(+), 187 deletions(-) diff --git a/packages/remix/lib/src/components/textfield/textfield.dart b/packages/remix/lib/src/components/textfield/textfield.dart index ec2a8ca93..495f5b526 100644 --- a/packages/remix/lib/src/components/textfield/textfield.dart +++ b/packages/remix/lib/src/components/textfield/textfield.dart @@ -53,9 +53,8 @@ class TextFieldSpec extends Spec final Brightness keyboardAppearance; final Color? autocorrectionTextRectColor; - final BoxSpec container; - final FlexSpec containerLayout; - final FlexSpec contentLayout; + final FlexBoxSpec flexContainer; + final FlexSpec mainFlex; final TextStyle? hintTextStyle; final TextSpec helperText; final IconSpec icon; @@ -90,12 +89,11 @@ class TextFieldSpec extends Spec Brightness? keyboardAppearance, this.autocorrectionTextRectColor, bool? cursorOpacityAnimates, - BoxSpec? container, - FlexSpec? containerLayout, + FlexBoxSpec? flexContainer, + FlexSpec? mainFlex, this.hintTextStyle, TextSpec? helperText, IconSpec? icon, - FlexSpec? contentLayout, bool? floatingLabel, double? floatingLabelHeight, this.floatingLabelStyle, @@ -116,11 +114,10 @@ class TextFieldSpec extends Spec scrollPadding = scrollPadding ?? const EdgeInsets.all(20.0), clipBehavior = clipBehavior ?? Clip.hardEdge, keyboardAppearance = keyboardAppearance ?? Brightness.light, - container = container ?? const BoxSpec(), + flexContainer = flexContainer ?? const FlexBoxSpec(), helperText = helperText ?? const TextSpec(), - containerLayout = containerLayout ?? const FlexSpec(), + mainFlex = mainFlex ?? const FlexSpec(), icon = icon ?? const IconSpec(), - contentLayout = contentLayout ?? const FlexSpec(), floatingLabel = floatingLabel ?? false, floatingLabelHeight = floatingLabelHeight ?? 14; diff --git a/packages/remix/lib/src/components/textfield/textfield.g.dart b/packages/remix/lib/src/components/textfield/textfield.g.dart index 1449a1ec2..7534c26b6 100644 --- a/packages/remix/lib/src/components/textfield/textfield.g.dart +++ b/packages/remix/lib/src/components/textfield/textfield.g.dart @@ -53,12 +53,11 @@ mixin _$TextFieldSpec on Spec { Brightness? keyboardAppearance, Color? autocorrectionTextRectColor, bool? cursorOpacityAnimates, - BoxSpec? container, - FlexSpec? containerLayout, + FlexBoxSpec? flexContainer, + FlexSpec? mainFlex, TextStyle? hintTextStyle, TextSpec? helperText, IconSpec? icon, - FlexSpec? contentLayout, bool? floatingLabel, double? floatingLabelHeight, TextStyle? floatingLabelStyle, @@ -89,12 +88,11 @@ mixin _$TextFieldSpec on Spec { autocorrectionTextRectColor ?? _$this.autocorrectionTextRectColor, cursorOpacityAnimates: cursorOpacityAnimates ?? _$this.cursorOpacityAnimates, - container: container ?? _$this.container, - containerLayout: containerLayout ?? _$this.containerLayout, + flexContainer: flexContainer ?? _$this.flexContainer, + mainFlex: mainFlex ?? _$this.mainFlex, hintTextStyle: hintTextStyle ?? _$this.hintTextStyle, helperText: helperText ?? _$this.helperText, icon: icon ?? _$this.icon, - contentLayout: contentLayout ?? _$this.contentLayout, floatingLabel: floatingLabel ?? _$this.floatingLabel, floatingLabelHeight: floatingLabelHeight ?? _$this.floatingLabelHeight, floatingLabelStyle: floatingLabelStyle ?? _$this.floatingLabelStyle, @@ -121,8 +119,8 @@ mixin _$TextFieldSpec on Spec { /// - [Color.lerp] for [cursorColor] and [backgroundCursorColor] and [selectionColor] and [autocorrectionTextRectColor]. /// - [Offset.lerp] for [cursorOffset]. /// - [EdgeInsets.lerp] for [scrollPadding]. - /// - [BoxSpec.lerp] for [container]. - /// - [FlexSpec.lerp] for [containerLayout] and [contentLayout]. + /// - [FlexBoxSpec.lerp] for [flexContainer]. + /// - [FlexSpec.lerp] for [mainFlex]. /// - [TextSpec.lerp] for [helperText]. /// - [IconSpec.lerp] for [icon]. @@ -172,13 +170,12 @@ mixin _$TextFieldSpec on Spec { t), cursorOpacityAnimates: t < 0.5 ? _$this.cursorOpacityAnimates : other.cursorOpacityAnimates, - container: _$this.container.lerp(other.container, t), - containerLayout: _$this.containerLayout.lerp(other.containerLayout, t), + flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), + mainFlex: _$this.mainFlex.lerp(other.mainFlex, t), hintTextStyle: MixHelpers.lerpTextStyle( _$this.hintTextStyle, other.hintTextStyle, t), helperText: _$this.helperText.lerp(other.helperText, t), icon: _$this.icon.lerp(other.icon, t), - contentLayout: _$this.contentLayout.lerp(other.contentLayout, t), floatingLabel: t < 0.5 ? _$this.floatingLabel : other.floatingLabel, floatingLabelHeight: MixHelpers.lerpDouble( _$this.floatingLabelHeight, other.floatingLabelHeight, t)!, @@ -215,12 +212,11 @@ mixin _$TextFieldSpec on Spec { _$this.keyboardAppearance, _$this.autocorrectionTextRectColor, _$this.cursorOpacityAnimates, - _$this.container, - _$this.containerLayout, + _$this.flexContainer, + _$this.mainFlex, _$this.hintTextStyle, _$this.helperText, _$this.icon, - _$this.contentLayout, _$this.floatingLabel, _$this.floatingLabelHeight, _$this.floatingLabelStyle, @@ -279,19 +275,16 @@ mixin _$TextFieldSpec on Spec { properties.add(DiagnosticsProperty( 'cursorOpacityAnimates', _$this.cursorOpacityAnimates, defaultValue: null)); - properties.add( - DiagnosticsProperty('container', _$this.container, defaultValue: null)); - properties.add(DiagnosticsProperty( - 'containerLayout', _$this.containerLayout, + properties.add(DiagnosticsProperty('flexContainer', _$this.flexContainer, defaultValue: null)); + properties.add( + DiagnosticsProperty('mainFlex', _$this.mainFlex, defaultValue: null)); properties.add(DiagnosticsProperty('hintTextStyle', _$this.hintTextStyle, defaultValue: null)); properties.add(DiagnosticsProperty('helperText', _$this.helperText, defaultValue: null)); properties .add(DiagnosticsProperty('icon', _$this.icon, defaultValue: null)); - properties.add(DiagnosticsProperty('contentLayout', _$this.contentLayout, - defaultValue: null)); properties.add(DiagnosticsProperty('floatingLabel', _$this.floatingLabel, defaultValue: null)); properties.add(DiagnosticsProperty( @@ -336,12 +329,11 @@ class TextFieldSpecAttribute extends SpecAttribute final Brightness? keyboardAppearance; final ColorDto? autocorrectionTextRectColor; final bool? cursorOpacityAnimates; - final BoxSpecAttribute? container; - final FlexSpecAttribute? containerLayout; + final FlexBoxSpecAttribute? flexContainer; + final FlexSpecAttribute? mainFlex; final TextStyleDto? hintTextStyle; final TextSpecAttribute? helperText; final IconSpecAttribute? icon; - final FlexSpecAttribute? contentLayout; final bool? floatingLabel; final double? floatingLabelHeight; final TextStyleDto? floatingLabelStyle; @@ -367,12 +359,11 @@ class TextFieldSpecAttribute extends SpecAttribute this.keyboardAppearance, this.autocorrectionTextRectColor, this.cursorOpacityAnimates, - this.container, - this.containerLayout, + this.flexContainer, + this.mainFlex, this.hintTextStyle, this.helperText, this.icon, - this.contentLayout, this.floatingLabel, this.floatingLabelHeight, this.floatingLabelStyle, @@ -411,12 +402,11 @@ class TextFieldSpecAttribute extends SpecAttribute keyboardAppearance: keyboardAppearance, autocorrectionTextRectColor: autocorrectionTextRectColor?.resolve(mix), cursorOpacityAnimates: cursorOpacityAnimates, - container: container?.resolve(mix), - containerLayout: containerLayout?.resolve(mix), + flexContainer: flexContainer?.resolve(mix), + mainFlex: mainFlex?.resolve(mix), hintTextStyle: hintTextStyle?.resolve(mix), helperText: helperText?.resolve(mix), icon: icon?.resolve(mix), - contentLayout: contentLayout?.resolve(mix), floatingLabel: floatingLabel, floatingLabelHeight: floatingLabelHeight, floatingLabelStyle: floatingLabelStyle?.resolve(mix), @@ -466,15 +456,13 @@ class TextFieldSpecAttribute extends SpecAttribute other.autocorrectionTextRectColor, cursorOpacityAnimates: other.cursorOpacityAnimates ?? cursorOpacityAnimates, - container: container?.merge(other.container) ?? other.container, - containerLayout: containerLayout?.merge(other.containerLayout) ?? - other.containerLayout, + flexContainer: + flexContainer?.merge(other.flexContainer) ?? other.flexContainer, + mainFlex: mainFlex?.merge(other.mainFlex) ?? other.mainFlex, hintTextStyle: hintTextStyle?.merge(other.hintTextStyle) ?? other.hintTextStyle, helperText: helperText?.merge(other.helperText) ?? other.helperText, icon: icon?.merge(other.icon) ?? other.icon, - contentLayout: - contentLayout?.merge(other.contentLayout) ?? other.contentLayout, floatingLabel: other.floatingLabel ?? floatingLabel, floatingLabelHeight: other.floatingLabelHeight ?? floatingLabelHeight, floatingLabelStyle: floatingLabelStyle?.merge(other.floatingLabelStyle) ?? @@ -510,12 +498,11 @@ class TextFieldSpecAttribute extends SpecAttribute keyboardAppearance, autocorrectionTextRectColor, cursorOpacityAnimates, - container, - containerLayout, + flexContainer, + mainFlex, hintTextStyle, helperText, icon, - contentLayout, floatingLabel, floatingLabelHeight, floatingLabelStyle, @@ -572,17 +559,15 @@ class TextFieldSpecAttribute extends SpecAttribute properties.add(DiagnosticsProperty( 'cursorOpacityAnimates', cursorOpacityAnimates, defaultValue: null)); - properties - .add(DiagnosticsProperty('container', container, defaultValue: null)); - properties.add(DiagnosticsProperty('containerLayout', containerLayout, + properties.add(DiagnosticsProperty('flexContainer', flexContainer, defaultValue: null)); + properties + .add(DiagnosticsProperty('mainFlex', mainFlex, defaultValue: null)); properties.add(DiagnosticsProperty('hintTextStyle', hintTextStyle, defaultValue: null)); properties .add(DiagnosticsProperty('helperText', helperText, defaultValue: null)); properties.add(DiagnosticsProperty('icon', icon, defaultValue: null)); - properties.add(DiagnosticsProperty('contentLayout', contentLayout, - defaultValue: null)); properties.add(DiagnosticsProperty('floatingLabel', floatingLabel, defaultValue: null)); properties.add(DiagnosticsProperty( @@ -672,11 +657,11 @@ class TextFieldSpecUtility late final cursorOpacityAnimates = BoolUtility((v) => only(cursorOpacityAnimates: v)); - /// Utility for defining [TextFieldSpecAttribute.container] - late final container = BoxSpecUtility((v) => only(container: v)); + /// Utility for defining [TextFieldSpecAttribute.flexContainer] + late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); - /// Utility for defining [TextFieldSpecAttribute.containerLayout] - late final containerLayout = FlexSpecUtility((v) => only(containerLayout: v)); + /// Utility for defining [TextFieldSpecAttribute.mainFlex] + late final mainFlex = FlexSpecUtility((v) => only(mainFlex: v)); /// Utility for defining [TextFieldSpecAttribute.hintTextStyle] late final hintTextStyle = TextStyleUtility((v) => only(hintTextStyle: v)); @@ -687,9 +672,6 @@ class TextFieldSpecUtility /// Utility for defining [TextFieldSpecAttribute.icon] late final icon = IconSpecUtility((v) => only(icon: v)); - /// Utility for defining [TextFieldSpecAttribute.contentLayout] - late final contentLayout = FlexSpecUtility((v) => only(contentLayout: v)); - /// Utility for defining [TextFieldSpecAttribute.floatingLabel] late final floatingLabel = BoolUtility((v) => only(floatingLabel: v)); @@ -738,12 +720,11 @@ class TextFieldSpecUtility Brightness? keyboardAppearance, ColorDto? autocorrectionTextRectColor, bool? cursorOpacityAnimates, - BoxSpecAttribute? container, - FlexSpecAttribute? containerLayout, + FlexBoxSpecAttribute? flexContainer, + FlexSpecAttribute? mainFlex, TextStyleDto? hintTextStyle, TextSpecAttribute? helperText, IconSpecAttribute? icon, - FlexSpecAttribute? contentLayout, bool? floatingLabel, double? floatingLabelHeight, TextStyleDto? floatingLabelStyle, @@ -771,12 +752,11 @@ class TextFieldSpecUtility keyboardAppearance: keyboardAppearance, autocorrectionTextRectColor: autocorrectionTextRectColor, cursorOpacityAnimates: cursorOpacityAnimates, - container: container, - containerLayout: containerLayout, + flexContainer: flexContainer, + mainFlex: mainFlex, hintTextStyle: hintTextStyle, helperText: helperText, icon: icon, - contentLayout: contentLayout, floatingLabel: floatingLabel, floatingLabelHeight: floatingLabelHeight, floatingLabelStyle: floatingLabelStyle, diff --git a/packages/remix/lib/src/components/textfield/textfield_style.dart b/packages/remix/lib/src/components/textfield/textfield_style.dart index 837b72e26..76a8a8ff7 100644 --- a/packages/remix/lib/src/components/textfield/textfield_style.dart +++ b/packages/remix/lib/src/components/textfield/textfield_style.dart @@ -79,7 +79,7 @@ class TextFieldStyle extends SpecStyle { final $ = spec.utilities; - final containerStyle = $.container.chain + final flexContainerStyle = $.flexContainer.chain ..color.white() ..padding.horizontal(12) ..padding.vertical(8) @@ -88,22 +88,20 @@ class TextFieldStyle extends SpecStyle { ..shadow.spreadRadius(0) ..shadow.blurRadius(2) ..shadow.offset(-1, 1) - ..shadow.color.grey.shade200(); - - final layoutStyle = $.containerLayout.chain + ..shadow.color.grey.shade200() + ..flex.direction.horizontal() + ..flex.mainAxisSize.min() + ..flex.mainAxisAlignment.start() + ..flex.crossAxisAlignment.center() + ..flex.gap(8); + + final layoutStyle = $.mainFlex.chain ..direction.vertical() ..mainAxisSize.min() ..mainAxisAlignment.start() ..crossAxisAlignment.start() ..gap(6); - final contentLayoutStyle = $.contentLayout.chain - ..direction.horizontal() - ..mainAxisSize.min() - ..mainAxisAlignment.start() - ..crossAxisAlignment.center() - ..gap(8); - final textStyle = $.chain ..style.color.black87() ..style.fontSize(14); @@ -122,14 +120,13 @@ class TextFieldStyle extends SpecStyle { ..style.fontSize(12) ..wrap.padding.left(12); - final focus = spec.on.focus($.container.border.all.color.black()); + final focus = spec.on.focus($.flexContainer.border.all.color.black()); return Style.create([ platformSettings(spec).call(), - containerStyle, + flexContainerStyle, $.floatingLabel.off(), $.selectionColor.black12(), - contentLayoutStyle, layoutStyle, textStyle, helperStyle, @@ -148,7 +145,7 @@ class TextFieldDarkStyle extends TextFieldStyle { final $ = spec.utilities; final cursor = $.cursorColor.grey.shade100(); - final containerStyle = $.container.chain + final flexContainerStyle = $.flexContainer.chain ..color.black() ..border.all.color.grey.shade800() ..shadow.spreadRadius(0) @@ -166,12 +163,12 @@ class TextFieldDarkStyle extends TextFieldStyle { final helperStyle = $.helperText.style.color.grey.shade400(); final icon = $.icon.color.grey.shade300(); - final focus = spec.on.focus($.container.border.all.color.white()); + final focus = spec.on.focus($.flexContainer.border.all.color.white()); return Style.create([ super.makeStyle(spec).call(), cursor, - containerStyle, + flexContainerStyle, focus, textStyle, helperStyle, diff --git a/packages/remix/lib/src/components/textfield/textfield_theme.dart b/packages/remix/lib/src/components/textfield/textfield_theme.dart index f76a54ea6..4636c235f 100644 --- a/packages/remix/lib/src/components/textfield/textfield_theme.dart +++ b/packages/remix/lib/src/components/textfield/textfield_theme.dart @@ -7,20 +7,19 @@ class FortalezaTextFieldStyle extends TextFieldStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final containerStyle = $.container.chain + final flexContainerStyle = $.flexContainer.chain ..color.$neutral(1) ..padding.horizontal.$space(3) ..padding.vertical.$space(2) ..borderRadius.all.$radius(2) ..border.all.color.$neutral(6) ..border.all.strokeAlign.outside() - ..shadow.color.$neutral(4); + ..shadow.color.$neutral(4) + ..flex.gap.$space(2); final textStyle = [$.style.$text(2), $.style.color.$neutral(12)]; - final layoutStyle = $.containerLayout.gap.$space(2); - - final contentLayoutStyle = $.contentLayout.gap.$space(2); + final layoutStyle = $.mainFlex.gap.$space(2); final hintStyle = [ $.hintTextStyle.color.$neutral(9), @@ -39,7 +38,7 @@ class FortalezaTextFieldStyle extends TextFieldStyle { final icon = $.icon.color.$accent(); final focus = spec.on.focus( - $.container.chain + $.flexContainer.chain ..border.all.color.$accent() ..border.all.width(2), ); @@ -48,12 +47,11 @@ class FortalezaTextFieldStyle extends TextFieldStyle { super.makeStyle(spec).call(), $.floatingLabel.on(), $.cursorColor.$neutral(12), - containerStyle, + flexContainerStyle, layoutStyle, ...textStyle, ...hintStyle, ...floatingHintStyle, - contentLayoutStyle, ...helperStyle, icon, focus, diff --git a/packages/remix/lib/src/components/textfield/textfield_widget.dart b/packages/remix/lib/src/components/textfield/textfield_widget.dart index 86fced8ad..daa31d66d 100644 --- a/packages/remix/lib/src/components/textfield/textfield_widget.dart +++ b/packages/remix/lib/src/components/textfield/textfield_widget.dart @@ -519,109 +519,104 @@ class _TextFieldState extends State (_effectiveFocusNode.hasFocus || _effectiveController.value.text.isNotEmpty); - return spec.containerLayout( + return spec.mainFlex( direction: Axis.vertical, children: [ - spec.container( - child: spec.contentLayout( - direction: Axis.horizontal, - children: [ - if (widget.prefixBuilder != null) - widget.prefixBuilder!(spec.icon), - Expanded( - child: AnimatedBuilder( - animation: _effectiveController, - builder: (context, child) => _HintLabel( - text: widget.hintText ?? '', - style: spec.hintTextStyle ?? spec.style, - float: isFloating, - show: spec.floatingLabel - ? true - : _effectiveController.value.text.isEmpty, - floatingLabelHeight: - spec.floatingLabel ? spec.floatingLabelHeight : 0, - floatingLabelStyle: - spec.floatingLabelStyle ?? spec.style, - child: EditableText( - key: editableTextKey, - controller: _effectiveController, - focusNode: _effectiveFocusNode, - readOnly: widget.readOnly || !widget.enabled, - obscuringCharacter: widget.obscuringCharacter, - obscureText: widget.obscureText, - autocorrect: widget.autocorrect, - smartDashesType: widget.smartDashesType, - smartQuotesType: widget.smartQuotesType, - enableSuggestions: widget.enableSuggestions, - style: spec.style, - strutStyle: spec.strutStyle, - cursorColor: spec.cursorColor, - backgroundCursorColor: spec.backgroundCursorColor, - textAlign: spec.textAlign, - textDirection: widget.textDirection, - maxLines: widget.maxLines, - minLines: widget.minLines, - expands: widget.expands, - textHeightBehavior: spec.textHeightBehavior, - textWidthBasis: spec.textWidthBasis, - autofocus: widget.autofocus, - showCursor: widget.showCursor, - showSelectionHandles: _showSelectionHandles, - selectionColor: spec.selectionColor, - selectionControls: textSelectionControls, - keyboardType: widget.keyboardType, - textInputAction: widget.textInputAction, - textCapitalization: widget.textCapitalization, - onChanged: widget.onChanged, - onEditingComplete: widget.onEditingComplete, - onSubmitted: widget.onSubmitted, - onAppPrivateCommand: widget.onAppPrivateCommand, - onSelectionChanged: _handleSelectionChanged, - onSelectionHandleTapped: _handleSelectionHandleTapped, - onTapOutside: widget.onTapOutside, - inputFormatters: formatters, - mouseCursor: MouseCursor - .defer, // TextField will handle the cursor - rendererIgnoresPointer: true, - cursorWidth: spec.cursorWidth, - cursorHeight: spec.cursorHeight, - cursorRadius: spec.cursorRadius, - cursorOpacityAnimates: spec.cursorOpacityAnimates, - cursorOffset: spec.cursorOffset, - paintCursorAboveText: spec.paintCursorAboveText, - selectionHeightStyle: spec.selectionHeightStyle, - selectionWidthStyle: spec.selectionWidthStyle, - scrollPadding: spec.scrollPadding, - keyboardAppearance: spec.keyboardAppearance, - dragStartBehavior: widget.dragStartBehavior, - enableInteractiveSelection: - widget.enableInteractiveSelection, - scrollController: widget.scrollController, - scrollPhysics: widget.scrollPhysics, - autocorrectionTextRectColor: - spec.autocorrectionTextRectColor, - autofillClient: this, - clipBehavior: widget.clipBehavior, - restorationId: 'editable', - scribbleEnabled: widget.scribbleEnabled, - enableIMEPersonalizedLearning: - widget.enableIMEPersonalizedLearning, - contentInsertionConfiguration: - widget.contentInsertionConfiguration, - contextMenuBuilder: widget.contextMenuBuilder, - spellCheckConfiguration: - widget.spellCheckConfiguration, - magnifierConfiguration: widget - .magnifierConfiguration ?? - m.TextMagnifier.adaptiveMagnifierConfiguration, - undoController: widget.undoController, - ), + spec.flexContainer( + direction: Axis.horizontal, + children: [ + if (widget.prefixBuilder != null) + widget.prefixBuilder!(spec.icon), + Expanded( + child: AnimatedBuilder( + animation: _effectiveController, + builder: (context, child) => _HintLabel( + text: widget.hintText ?? '', + style: spec.hintTextStyle ?? spec.style, + float: isFloating, + show: spec.floatingLabel + ? true + : _effectiveController.value.text.isEmpty, + floatingLabelHeight: + spec.floatingLabel ? spec.floatingLabelHeight : 0, + floatingLabelStyle: spec.floatingLabelStyle ?? spec.style, + child: EditableText( + key: editableTextKey, + controller: _effectiveController, + focusNode: _effectiveFocusNode, + readOnly: widget.readOnly || !widget.enabled, + obscuringCharacter: widget.obscuringCharacter, + obscureText: widget.obscureText, + autocorrect: widget.autocorrect, + smartDashesType: widget.smartDashesType, + smartQuotesType: widget.smartQuotesType, + enableSuggestions: widget.enableSuggestions, + style: spec.style, + strutStyle: spec.strutStyle, + cursorColor: spec.cursorColor, + backgroundCursorColor: spec.backgroundCursorColor, + textAlign: spec.textAlign, + textDirection: widget.textDirection, + maxLines: widget.maxLines, + minLines: widget.minLines, + expands: widget.expands, + textHeightBehavior: spec.textHeightBehavior, + textWidthBasis: spec.textWidthBasis, + autofocus: widget.autofocus, + showCursor: widget.showCursor, + showSelectionHandles: _showSelectionHandles, + selectionColor: spec.selectionColor, + selectionControls: textSelectionControls, + keyboardType: widget.keyboardType, + textInputAction: widget.textInputAction, + textCapitalization: widget.textCapitalization, + onChanged: widget.onChanged, + onEditingComplete: widget.onEditingComplete, + onSubmitted: widget.onSubmitted, + onAppPrivateCommand: widget.onAppPrivateCommand, + onSelectionChanged: _handleSelectionChanged, + onSelectionHandleTapped: _handleSelectionHandleTapped, + onTapOutside: widget.onTapOutside, + inputFormatters: formatters, + mouseCursor: MouseCursor + .defer, // TextField will handle the cursor + rendererIgnoresPointer: true, + cursorWidth: spec.cursorWidth, + cursorHeight: spec.cursorHeight, + cursorRadius: spec.cursorRadius, + cursorOpacityAnimates: spec.cursorOpacityAnimates, + cursorOffset: spec.cursorOffset, + paintCursorAboveText: spec.paintCursorAboveText, + selectionHeightStyle: spec.selectionHeightStyle, + selectionWidthStyle: spec.selectionWidthStyle, + scrollPadding: spec.scrollPadding, + keyboardAppearance: spec.keyboardAppearance, + dragStartBehavior: widget.dragStartBehavior, + enableInteractiveSelection: + widget.enableInteractiveSelection, + scrollController: widget.scrollController, + scrollPhysics: widget.scrollPhysics, + autocorrectionTextRectColor: + spec.autocorrectionTextRectColor, + autofillClient: this, + clipBehavior: widget.clipBehavior, + restorationId: 'editable', + scribbleEnabled: widget.scribbleEnabled, + enableIMEPersonalizedLearning: + widget.enableIMEPersonalizedLearning, + contentInsertionConfiguration: + widget.contentInsertionConfiguration, + contextMenuBuilder: widget.contextMenuBuilder, + spellCheckConfiguration: widget.spellCheckConfiguration, + magnifierConfiguration: widget.magnifierConfiguration ?? + m.TextMagnifier.adaptiveMagnifierConfiguration, + undoController: widget.undoController, ), ), ), - if (widget.suffix != null) widget.suffix!, - ], - ), + ), + if (widget.suffix != null) widget.suffix!, + ], ), spec.helperText(widget.helperText ?? ''), ], From 9b607aea5720c11e3e925a4523dd586be8362310 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Thu, 14 Nov 2024 18:33:18 -0300 Subject: [PATCH 46/57] toast --- .../remix/lib/src/components/toast/toast.dart | 9 +-- .../lib/src/components/toast/toast.g.dart | 56 +++++++------------ .../lib/src/components/toast/toast_style.dart | 17 +++--- .../lib/src/components/toast/toast_theme.dart | 10 ++-- .../src/components/toast/toast_widget.dart | 28 +++++----- .../checkbox/checkbox_widget_test.dart | 38 ++++--------- 6 files changed, 58 insertions(+), 100 deletions(-) diff --git a/packages/remix/lib/src/components/toast/toast.dart b/packages/remix/lib/src/components/toast/toast.dart index afa11e8a5..5f745b53a 100644 --- a/packages/remix/lib/src/components/toast/toast.dart +++ b/packages/remix/lib/src/components/toast/toast.dart @@ -16,8 +16,7 @@ part 'toast_widget.dart'; @MixableSpec() base class ToastSpec extends Spec with _$ToastSpec, Diagnosticable { - final BoxSpec container; - final FlexSpec layout; + final FlexBoxSpec flexContainer; final FlexSpec textLayout; final TextSpec title; final TextSpec description; @@ -28,15 +27,13 @@ base class ToastSpec extends Spec with _$ToastSpec, Diagnosticable { static const from = _$ToastSpec.from; const ToastSpec({ - BoxSpec? container, - FlexSpec? layout, + FlexBoxSpec? flexContainer, FlexSpec? textLayout, TextSpec? title, TextSpec? description, super.modifiers, super.animated, - }) : container = container ?? const BoxSpec(), - layout = layout ?? const FlexSpec(), + }) : flexContainer = flexContainer ?? const FlexBoxSpec(), textLayout = textLayout ?? const FlexSpec(), title = title ?? const TextSpec(), description = description ?? const TextSpec(); diff --git a/packages/remix/lib/src/components/toast/toast.g.dart b/packages/remix/lib/src/components/toast/toast.g.dart index d0c7c36f1..612154d54 100644 --- a/packages/remix/lib/src/components/toast/toast.g.dart +++ b/packages/remix/lib/src/components/toast/toast.g.dart @@ -33,8 +33,7 @@ mixin _$ToastSpec on Spec { /// replaced with the new values. @override ToastSpec copyWith({ - BoxSpec? container, - FlexSpec? layout, + FlexBoxSpec? flexContainer, FlexSpec? textLayout, TextSpec? title, TextSpec? description, @@ -42,8 +41,7 @@ mixin _$ToastSpec on Spec { AnimatedData? animated, }) { return ToastSpec( - container: container ?? _$this.container, - layout: layout ?? _$this.layout, + flexContainer: flexContainer ?? _$this.flexContainer, textLayout: textLayout ?? _$this.textLayout, title: title ?? _$this.title, description: description ?? _$this.description, @@ -63,8 +61,8 @@ mixin _$ToastSpec on Spec { /// The interpolation is performed on each property of the [ToastSpec] using the appropriate /// interpolation method: /// - /// - [BoxSpec.lerp] for [container]. - /// - [FlexSpec.lerp] for [layout] and [textLayout]. + /// - [FlexBoxSpec.lerp] for [flexContainer]. + /// - [FlexSpec.lerp] for [textLayout]. /// - [TextSpec.lerp] for [title] and [description]. /// For [modifiers] and [animated], the interpolation is performed using a step function. @@ -78,8 +76,7 @@ mixin _$ToastSpec on Spec { if (other == null) return _$this; return ToastSpec( - container: _$this.container.lerp(other.container, t), - layout: _$this.layout.lerp(other.layout, t), + flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), textLayout: _$this.textLayout.lerp(other.textLayout, t), title: _$this.title.lerp(other.title, t), description: _$this.description.lerp(other.description, t), @@ -94,8 +91,7 @@ mixin _$ToastSpec on Spec { /// compare two [ToastSpec] instances for equality. @override List get props => [ - _$this.container, - _$this.layout, + _$this.flexContainer, _$this.textLayout, _$this.title, _$this.description, @@ -106,10 +102,8 @@ mixin _$ToastSpec on Spec { ToastSpec get _$this => this as ToastSpec; void _debugFillProperties(DiagnosticPropertiesBuilder properties) { - properties.add( - DiagnosticsProperty('container', _$this.container, defaultValue: null)); - properties - .add(DiagnosticsProperty('layout', _$this.layout, defaultValue: null)); + properties.add(DiagnosticsProperty('flexContainer', _$this.flexContainer, + defaultValue: null)); properties.add(DiagnosticsProperty('textLayout', _$this.textLayout, defaultValue: null)); properties @@ -132,15 +126,13 @@ mixin _$ToastSpec on Spec { /// the [ToastSpec] constructor. base class ToastSpecAttribute extends SpecAttribute with Diagnosticable { - final BoxSpecAttribute? container; - final FlexSpecAttribute? layout; + final FlexBoxSpecAttribute? flexContainer; final FlexSpecAttribute? textLayout; final TextSpecAttribute? title; final TextSpecAttribute? description; const ToastSpecAttribute({ - this.container, - this.layout, + this.flexContainer, this.textLayout, this.title, this.description, @@ -159,8 +151,7 @@ base class ToastSpecAttribute extends SpecAttribute @override ToastSpec resolve(MixData mix) { return ToastSpec( - container: container?.resolve(mix), - layout: layout?.resolve(mix), + flexContainer: flexContainer?.resolve(mix), textLayout: textLayout?.resolve(mix), title: title?.resolve(mix), description: description?.resolve(mix), @@ -182,8 +173,8 @@ base class ToastSpecAttribute extends SpecAttribute if (other == null) return this; return ToastSpecAttribute( - container: container?.merge(other.container) ?? other.container, - layout: layout?.merge(other.layout) ?? other.layout, + flexContainer: + flexContainer?.merge(other.flexContainer) ?? other.flexContainer, textLayout: textLayout?.merge(other.textLayout) ?? other.textLayout, title: title?.merge(other.title) ?? other.title, description: description?.merge(other.description) ?? other.description, @@ -198,8 +189,7 @@ base class ToastSpecAttribute extends SpecAttribute /// compare two [ToastSpecAttribute] instances for equality. @override List get props => [ - container, - layout, + flexContainer, textLayout, title, description, @@ -210,9 +200,8 @@ base class ToastSpecAttribute extends SpecAttribute @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); - properties - .add(DiagnosticsProperty('container', container, defaultValue: null)); - properties.add(DiagnosticsProperty('layout', layout, defaultValue: null)); + properties.add(DiagnosticsProperty('flexContainer', flexContainer, + defaultValue: null)); properties .add(DiagnosticsProperty('textLayout', textLayout, defaultValue: null)); properties.add(DiagnosticsProperty('title', title, defaultValue: null)); @@ -231,11 +220,8 @@ base class ToastSpecAttribute extends SpecAttribute /// Use the methods of this class to configure specific properties of a [ToastSpec]. class ToastSpecUtility extends SpecUtility { - /// Utility for defining [ToastSpecAttribute.container] - late final container = BoxSpecUtility((v) => only(container: v)); - - /// Utility for defining [ToastSpecAttribute.layout] - late final layout = FlexSpecUtility((v) => only(layout: v)); + /// Utility for defining [ToastSpecAttribute.flexContainer] + late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); /// Utility for defining [ToastSpecAttribute.textLayout] late final textLayout = FlexSpecUtility((v) => only(textLayout: v)); @@ -263,8 +249,7 @@ class ToastSpecUtility /// Returns a new [ToastSpecAttribute] with the specified properties. @override T only({ - BoxSpecAttribute? container, - FlexSpecAttribute? layout, + FlexBoxSpecAttribute? flexContainer, FlexSpecAttribute? textLayout, TextSpecAttribute? title, TextSpecAttribute? description, @@ -272,8 +257,7 @@ class ToastSpecUtility AnimatedDataDto? animated, }) { return builder(ToastSpecAttribute( - container: container, - layout: layout, + flexContainer: flexContainer, textLayout: textLayout, title: title, description: description, diff --git a/packages/remix/lib/src/components/toast/toast_style.dart b/packages/remix/lib/src/components/toast/toast_style.dart index dfda28030..61373916d 100644 --- a/packages/remix/lib/src/components/toast/toast_style.dart +++ b/packages/remix/lib/src/components/toast/toast_style.dart @@ -7,19 +7,17 @@ class ToastStyle extends SpecStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final containerStyle = $.container.chain + final flexContainerStyle = $.flexContainer.chain ..borderRadius(6) ..color.white() ..border.all.color.black12() ..padding.all(16) ..margin.all(20) - ..constraints.minWidth(300); - - final layoutFlexStyle = $.layout.chain - ..direction.horizontal() - ..mainAxisAlignment.spaceBetween() - ..mainAxisSize.min() - ..gap(16); + ..constraints.minWidth(300) + ..flex.direction.horizontal() + ..flex.mainAxisAlignment.spaceBetween() + ..flex.mainAxisSize.min() + ..flex.gap(16); final textLayoutFlexStyle = $.textLayout.chain ..direction.vertical() @@ -36,8 +34,7 @@ class ToastStyle extends SpecStyle { ..style.color.black54(); return Style.create([ - containerStyle, - layoutFlexStyle, + flexContainerStyle, textLayoutFlexStyle, titleStyle, descriptionStyle, diff --git a/packages/remix/lib/src/components/toast/toast_theme.dart b/packages/remix/lib/src/components/toast/toast_theme.dart index 1e71f7fd6..aecd3f75f 100644 --- a/packages/remix/lib/src/components/toast/toast_theme.dart +++ b/packages/remix/lib/src/components/toast/toast_theme.dart @@ -7,14 +7,13 @@ class FortalezaToastStyle extends ToastStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final containerStyle = $.container.chain + final flexContainerStyle = $.flexContainer.chain ..borderRadius.all.$radius(2) ..color.$neutral(2) ..border.all.color.$neutral(6) ..padding.all.$space(4) - ..margin.all.$space(4); - - final layoutStyle = $.layout.gap.$space(5); + ..margin.all.$space(4) + ..flex.gap.$space(5); final textLayoutStyle = $.textLayout.gap.$space(1); @@ -28,8 +27,7 @@ class FortalezaToastStyle extends ToastStyle { return Style.create([ super.makeStyle(spec).call(), - containerStyle, - layoutStyle, + flexContainerStyle, textLayoutStyle, titleStyle, descriptionStyle, diff --git a/packages/remix/lib/src/components/toast/toast_widget.dart b/packages/remix/lib/src/components/toast/toast_widget.dart index 6ed0879cb..3d44f6082 100644 --- a/packages/remix/lib/src/components/toast/toast_widget.dart +++ b/packages/remix/lib/src/components/toast/toast_widget.dart @@ -39,21 +39,19 @@ class Toast extends StatelessWidget { builder: (context) { final spec = ToastSpec.of(context); - return spec.container( - child: spec.layout( - direction: Axis.horizontal, - children: [ - if (leading != null) leading!, - spec.textLayout( - direction: Axis.vertical, - children: [ - spec.title(title), - if (description != null) spec.description(description!), - ], - ), - if (trailing != null) trailing!, - ], - ), + return spec.flexContainer( + direction: Axis.horizontal, + children: [ + if (leading != null) leading!, + spec.textLayout( + direction: Axis.vertical, + children: [ + spec.title(title), + if (description != null) spec.description(description!), + ], + ), + if (trailing != null) trailing!, + ], ); }, ); diff --git a/packages/remix/test/components/checkbox/checkbox_widget_test.dart b/packages/remix/test/components/checkbox/checkbox_widget_test.dart index eeb6f6db0..719504d1c 100644 --- a/packages/remix/test/components/checkbox/checkbox_widget_test.dart +++ b/packages/remix/test/components/checkbox/checkbox_widget_test.dart @@ -7,11 +7,7 @@ void main() { group('Checkbox', () { testWidgets('renders with default properties', (WidgetTester tester) async { await tester.pumpWidget( - const MaterialApp( - home: r.Checkbox( - style: r.CheckboxStyle(), - ), - ), + const MaterialApp(home: r.Checkbox(style: r.CheckboxStyle())), ); expect(find.byType(r.Checkbox), findsOneWidget); @@ -21,10 +17,7 @@ void main() { testWidgets('respects disabled state', (WidgetTester tester) async { await tester.pumpWidget( const MaterialApp( - home: r.Checkbox( - disabled: true, - style: r.CheckboxStyle(), - ), + home: r.Checkbox(disabled: true, style: r.CheckboxStyle()), ), ); @@ -36,10 +29,7 @@ void main() { testWidgets('respects value state', (WidgetTester tester) async { await tester.pumpWidget( const MaterialApp( - home: r.Checkbox( - value: true, - style: r.CheckboxStyle(), - ), + home: r.Checkbox(value: true, style: r.CheckboxStyle()), ), ); @@ -52,9 +42,9 @@ void main() { await tester.pumpWidget( const MaterialApp( home: r.Checkbox( - style: r.CheckboxStyle(), iconChecked: Icons.done, iconUnchecked: Icons.close, + style: r.CheckboxStyle(), ), ), ); @@ -69,9 +59,9 @@ void main() { await tester.pumpWidget( MaterialApp( home: r.Checkbox( - style: const r.CheckboxStyle(), value: false, onChanged: (value) => changedValue = value, + style: const r.CheckboxStyle(), ), ), ); @@ -84,14 +74,12 @@ void main() { const color = Colors.red; await tester.pumpWidget(const MaterialApp( - home: r.Checkbox( - value: false, - style: FakeCheckboxStyle(color), - ), + home: r.Checkbox(value: false, style: FakeCheckboxStyle(color)), )); await tester.pumpAndSettle(const Duration(milliseconds: 150)); - final Container container = tester.widget(find.byType(Container)); + final Container container = + tester.widgetList(find.byType(Container)).last as Container; expect((container.decoration as BoxDecoration).color, color); }); }); @@ -100,18 +88,14 @@ void main() { class FakeCheckboxStyle extends r.CheckboxStyle { final Color color; - const FakeCheckboxStyle( - this.color, - ); + const FakeCheckboxStyle(this.color); @override Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; final baseStyle = super.makeStyle(spec); - return Style.create([ - baseStyle(), - $.indicatorContainer.color(color), - ]); + + return Style.create([baseStyle(), $.indicatorContainer.color(color)]); } } From de2ffe5935a02c972a8fc7b741cf6bfa3be2026d Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Fri, 15 Nov 2024 14:17:07 -0300 Subject: [PATCH 47/57] accordion --- .../src/components/accordion/accordion.dart | 8 ++- .../src/components/accordion/accordion.g.dart | 60 +++++++++---------- .../components/accordion/accordion_style.dart | 6 +- .../components/accordion/accordion_theme.dart | 12 ++-- .../accordion/accordion_widget.dart | 2 +- .../accordion/header/accordion_header.dart | 6 +- .../header/accordion_header_spec_widget.dart | 4 +- 7 files changed, 49 insertions(+), 49 deletions(-) diff --git a/packages/remix/lib/src/components/accordion/accordion.dart b/packages/remix/lib/src/components/accordion/accordion.dart index c19383811..d2100db91 100644 --- a/packages/remix/lib/src/components/accordion/accordion.dart +++ b/packages/remix/lib/src/components/accordion/accordion.dart @@ -16,11 +16,13 @@ part 'header/accordion_header_spec_widget.dart'; @MixableSpec() base class AccordionSpec extends Spec with _$AccordionSpec { + final FlexBoxSpec container; + @MixableProperty(dto: MixableFieldDto(type: 'AccordionHeaderSpecAttribute')) final AccordionHeaderSpec header; + final BoxSpec contentContainer; final TextSpec textContent; - final FlexBoxSpec flexContainer; /// {@macro accordion_spec_of} static const of = _$AccordionSpec.of; @@ -28,12 +30,12 @@ base class AccordionSpec extends Spec with _$AccordionSpec { static const from = _$AccordionSpec.from; const AccordionSpec({ - FlexBoxSpec? flexContainer, AccordionHeaderSpec? header, + FlexBoxSpec? container, BoxSpec? contentContainer, TextSpec? textContent, super.animated, - }) : flexContainer = flexContainer ?? const FlexBoxSpec(), + }) : container = container ?? const FlexBoxSpec(), header = header ?? const AccordionHeaderSpec(), contentContainer = contentContainer ?? const BoxSpec(), textContent = textContent ?? const TextSpec(); diff --git a/packages/remix/lib/src/components/accordion/accordion.g.dart b/packages/remix/lib/src/components/accordion/accordion.g.dart index 7e162eaf8..00e917355 100644 --- a/packages/remix/lib/src/components/accordion/accordion.g.dart +++ b/packages/remix/lib/src/components/accordion/accordion.g.dart @@ -33,15 +33,15 @@ mixin _$AccordionSpec on Spec { /// replaced with the new values. @override AccordionSpec copyWith({ - FlexBoxSpec? flexContainer, AccordionHeaderSpec? header, + FlexBoxSpec? container, BoxSpec? contentContainer, TextSpec? textContent, AnimatedData? animated, }) { return AccordionSpec( - flexContainer: flexContainer ?? _$this.flexContainer, header: header ?? _$this.header, + container: container ?? _$this.container, contentContainer: contentContainer ?? _$this.contentContainer, textContent: textContent ?? _$this.textContent, animated: animated ?? _$this.animated, @@ -59,7 +59,7 @@ mixin _$AccordionSpec on Spec { /// The interpolation is performed on each property of the [AccordionSpec] using the appropriate /// interpolation method: /// - /// - [FlexBoxSpec.lerp] for [flexContainer]. + /// - [FlexBoxSpec.lerp] for [container]. /// - [BoxSpec.lerp] for [contentContainer]. /// - [TextSpec.lerp] for [textContent]. @@ -74,8 +74,8 @@ mixin _$AccordionSpec on Spec { if (other == null) return _$this; return AccordionSpec( - flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), header: _$this.header.lerp(other.header, t), + container: _$this.container.lerp(other.container, t), contentContainer: _$this.contentContainer.lerp(other.contentContainer, t), textContent: _$this.textContent.lerp(other.textContent, t), animated: t < 0.5 ? _$this.animated : other.animated, @@ -88,8 +88,8 @@ mixin _$AccordionSpec on Spec { /// compare two [AccordionSpec] instances for equality. @override List get props => [ - _$this.flexContainer, _$this.header, + _$this.container, _$this.contentContainer, _$this.textContent, _$this.animated, @@ -106,14 +106,14 @@ mixin _$AccordionSpec on Spec { /// Use this class to configure the attributes of a [AccordionSpec] and pass it to /// the [AccordionSpec] constructor. base class AccordionSpecAttribute extends SpecAttribute { - final FlexBoxSpecAttribute? flexContainer; final AccordionHeaderSpecAttribute? header; + final FlexBoxSpecAttribute? container; final BoxSpecAttribute? contentContainer; final TextSpecAttribute? textContent; const AccordionSpecAttribute({ - this.flexContainer, this.header, + this.container, this.contentContainer, this.textContent, super.animated, @@ -130,8 +130,8 @@ base class AccordionSpecAttribute extends SpecAttribute { @override AccordionSpec resolve(MixData mix) { return AccordionSpec( - flexContainer: flexContainer?.resolve(mix), header: header?.resolve(mix), + container: container?.resolve(mix), contentContainer: contentContainer?.resolve(mix), textContent: textContent?.resolve(mix), animated: animated?.resolve(mix) ?? mix.animation, @@ -151,9 +151,8 @@ base class AccordionSpecAttribute extends SpecAttribute { if (other == null) return this; return AccordionSpecAttribute( - flexContainer: - flexContainer?.merge(other.flexContainer) ?? other.flexContainer, header: header?.merge(other.header) ?? other.header, + container: container?.merge(other.container) ?? other.container, contentContainer: contentContainer?.merge(other.contentContainer) ?? other.contentContainer, textContent: textContent?.merge(other.textContent) ?? other.textContent, @@ -167,8 +166,8 @@ base class AccordionSpecAttribute extends SpecAttribute { /// compare two [AccordionSpecAttribute] instances for equality. @override List get props => [ - flexContainer, header, + container, contentContainer, textContent, animated, @@ -181,12 +180,12 @@ base class AccordionSpecAttribute extends SpecAttribute { /// Use the methods of this class to configure specific properties of a [AccordionSpec]. class AccordionSpecUtility extends SpecUtility { - /// Utility for defining [AccordionSpecAttribute.flexContainer] - late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); - /// Utility for defining [AccordionSpecAttribute.header] late final header = AccordionHeaderSpecUtility((v) => only(header: v)); + /// Utility for defining [AccordionSpecAttribute.container] + late final container = FlexBoxSpecUtility((v) => only(container: v)); + /// Utility for defining [AccordionSpecAttribute.contentContainer] late final contentContainer = BoxSpecUtility((v) => only(contentContainer: v)); @@ -208,15 +207,15 @@ class AccordionSpecUtility /// Returns a new [AccordionSpecAttribute] with the specified properties. @override T only({ - FlexBoxSpecAttribute? flexContainer, AccordionHeaderSpecAttribute? header, + FlexBoxSpecAttribute? container, BoxSpecAttribute? contentContainer, TextSpecAttribute? textContent, AnimatedDataDto? animated, }) { return builder(AccordionSpecAttribute( - flexContainer: flexContainer, header: header, + container: container, contentContainer: contentContainer, textContent: textContent, animated: animated, @@ -275,14 +274,14 @@ mixin _$AccordionHeaderSpec on Spec { /// replaced with the new values. @override AccordionHeaderSpec copyWith({ - FlexBoxSpec? flexContainer, + FlexBoxSpec? container, IconSpec? leadingIcon, TextSpec? text, IconSpec? trailingIcon, AnimatedData? animated, }) { return AccordionHeaderSpec( - flexContainer: flexContainer ?? _$this.flexContainer, + container: container ?? _$this.container, leadingIcon: leadingIcon ?? _$this.leadingIcon, text: text ?? _$this.text, trailingIcon: trailingIcon ?? _$this.trailingIcon, @@ -301,7 +300,7 @@ mixin _$AccordionHeaderSpec on Spec { /// The interpolation is performed on each property of the [AccordionHeaderSpec] using the appropriate /// interpolation method: /// - /// - [FlexBoxSpec.lerp] for [flexContainer]. + /// - [FlexBoxSpec.lerp] for [container]. /// - [IconSpec.lerp] for [leadingIcon] and [trailingIcon]. /// - [TextSpec.lerp] for [text]. @@ -316,7 +315,7 @@ mixin _$AccordionHeaderSpec on Spec { if (other == null) return _$this; return AccordionHeaderSpec( - flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), + container: _$this.container.lerp(other.container, t), leadingIcon: _$this.leadingIcon.lerp(other.leadingIcon, t), text: _$this.text.lerp(other.text, t), trailingIcon: _$this.trailingIcon.lerp(other.trailingIcon, t), @@ -330,7 +329,7 @@ mixin _$AccordionHeaderSpec on Spec { /// compare two [AccordionHeaderSpec] instances for equality. @override List get props => [ - _$this.flexContainer, + _$this.container, _$this.leadingIcon, _$this.text, _$this.trailingIcon, @@ -349,13 +348,13 @@ mixin _$AccordionHeaderSpec on Spec { /// the [AccordionHeaderSpec] constructor. base class AccordionHeaderSpecAttribute extends SpecAttribute { - final FlexBoxSpecAttribute? flexContainer; + final FlexBoxSpecAttribute? container; final IconSpecAttribute? leadingIcon; final TextSpecAttribute? text; final IconSpecAttribute? trailingIcon; const AccordionHeaderSpecAttribute({ - this.flexContainer, + this.container, this.leadingIcon, this.text, this.trailingIcon, @@ -373,7 +372,7 @@ base class AccordionHeaderSpecAttribute @override AccordionHeaderSpec resolve(MixData mix) { return AccordionHeaderSpec( - flexContainer: flexContainer?.resolve(mix), + container: container?.resolve(mix), leadingIcon: leadingIcon?.resolve(mix), text: text?.resolve(mix), trailingIcon: trailingIcon?.resolve(mix), @@ -395,8 +394,7 @@ base class AccordionHeaderSpecAttribute if (other == null) return this; return AccordionHeaderSpecAttribute( - flexContainer: - flexContainer?.merge(other.flexContainer) ?? other.flexContainer, + container: container?.merge(other.container) ?? other.container, leadingIcon: leadingIcon?.merge(other.leadingIcon) ?? other.leadingIcon, text: text?.merge(other.text) ?? other.text, trailingIcon: @@ -411,7 +409,7 @@ base class AccordionHeaderSpecAttribute /// compare two [AccordionHeaderSpecAttribute] instances for equality. @override List get props => [ - flexContainer, + container, leadingIcon, text, trailingIcon, @@ -425,8 +423,8 @@ base class AccordionHeaderSpecAttribute /// Use the methods of this class to configure specific properties of a [AccordionHeaderSpec]. class AccordionHeaderSpecUtility extends SpecUtility { - /// Utility for defining [AccordionHeaderSpecAttribute.flexContainer] - late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); + /// Utility for defining [AccordionHeaderSpecAttribute.container] + late final container = FlexBoxSpecUtility((v) => only(container: v)); /// Utility for defining [AccordionHeaderSpecAttribute.leadingIcon] late final leadingIcon = IconSpecUtility((v) => only(leadingIcon: v)); @@ -451,14 +449,14 @@ class AccordionHeaderSpecUtility /// Returns a new [AccordionHeaderSpecAttribute] with the specified properties. @override T only({ - FlexBoxSpecAttribute? flexContainer, + FlexBoxSpecAttribute? container, IconSpecAttribute? leadingIcon, TextSpecAttribute? text, IconSpecAttribute? trailingIcon, AnimatedDataDto? animated, }) { return builder(AccordionHeaderSpecAttribute( - flexContainer: flexContainer, + container: container, leadingIcon: leadingIcon, text: text, trailingIcon: trailingIcon, diff --git a/packages/remix/lib/src/components/accordion/accordion_style.dart b/packages/remix/lib/src/components/accordion/accordion_style.dart index 37f98fd7a..cce240072 100644 --- a/packages/remix/lib/src/components/accordion/accordion_style.dart +++ b/packages/remix/lib/src/components/accordion/accordion_style.dart @@ -8,7 +8,7 @@ class AccordionStyle extends SpecStyle { final $ = spec.utilities; final flexContainerStyle = [ - $.flexContainer.chain + $.container.chain ..flex.mainAxisSize.min() ..clipBehavior.antiAlias() ..border.bottom.color.grey.shade400(), @@ -31,7 +31,7 @@ class AccordionStyle extends SpecStyle { ]; final headerStyle = [ - $.header.flexContainer.chain + $.header.container.chain ..flex.gap(6) ..width.infinity() ..padding.vertical(16) @@ -67,7 +67,7 @@ class AccordionDarkStyle extends AccordionStyle { return Style.create([ super.makeStyle(spec).call(), - $.flexContainer.border.bottom.color.grey.shade700(), + $.container.border.bottom.color.grey.shade700(), $.header.text.style.color.white(), $.header.trailingIcon.color.white(), $.textContent.style.color.white(), diff --git a/packages/remix/lib/src/components/accordion/accordion_theme.dart b/packages/remix/lib/src/components/accordion/accordion_theme.dart index 073bd6d9d..51d474c20 100644 --- a/packages/remix/lib/src/components/accordion/accordion_theme.dart +++ b/packages/remix/lib/src/components/accordion/accordion_theme.dart @@ -11,7 +11,7 @@ class FortalezaAccordionStyle extends AccordionStyle { final style = Style( // Container - $.flexContainer.chain + $.container.chain ..border.all.color.$neutral(2) ..shape.roundedRectangle.borderRadius(6) ..shape.roundedRectangle.side.width(1) @@ -24,13 +24,13 @@ class FortalezaAccordionStyle extends AccordionStyle { // Header $.header.chain - ..flexContainer.padding.horizontal.$space(4) + ..container.padding.horizontal.$space(4) ..text.style.fontWeight.w400() ..text.style.color.$neutral(12) ..trailingIcon.color.$neutral(10) - ..flexContainer.color.$neutral(1) - ..flexContainer.animated.curve.easeInCubic() - ..flexContainer.animated.duration(const Duration(milliseconds: 100)), + ..container.color.$neutral(1) + ..container.animated.curve.easeInCubic() + ..container.animated.duration(const Duration(milliseconds: 100)), $.contentContainer.chain ..padding.all.$space(3) @@ -47,7 +47,7 @@ class FortalezaAccordionStyle extends AccordionStyle { // Variants spec.on.selected($.contentContainer.border.top.style.solid()), spec.on.hover( - $.header.flexContainer.color.$neutral(3), + $.header.container.color.$neutral(3), $.header.text.style.decoration.none(), ), ); diff --git a/packages/remix/lib/src/components/accordion/accordion_widget.dart b/packages/remix/lib/src/components/accordion/accordion_widget.dart index 9e35baa60..d68f180c2 100644 --- a/packages/remix/lib/src/components/accordion/accordion_widget.dart +++ b/packages/remix/lib/src/components/accordion/accordion_widget.dart @@ -64,7 +64,7 @@ class _AccordionState extends State with TickerProviderStateMixin { child: widget.content(spec.textContent), ); - return spec.flexContainer( + return spec.container( direction: Axis.vertical, children: [ Pressable( diff --git a/packages/remix/lib/src/components/accordion/header/accordion_header.dart b/packages/remix/lib/src/components/accordion/header/accordion_header.dart index ee4d4d90b..c0f764c62 100644 --- a/packages/remix/lib/src/components/accordion/header/accordion_header.dart +++ b/packages/remix/lib/src/components/accordion/header/accordion_header.dart @@ -3,7 +3,7 @@ part of '../accordion.dart'; @MixableSpec() base class AccordionHeaderSpec extends Spec with _$AccordionHeaderSpec { - final FlexBoxSpec flexContainer; + final FlexBoxSpec container; final IconSpec leadingIcon; final TextSpec text; final IconSpec trailingIcon; @@ -14,12 +14,12 @@ base class AccordionHeaderSpec extends Spec static const from = _$AccordionHeaderSpec.from; const AccordionHeaderSpec({ - FlexBoxSpec? flexContainer, + FlexBoxSpec? container, IconSpec? leadingIcon, TextSpec? text, IconSpec? trailingIcon, super.animated, - }) : flexContainer = flexContainer ?? const FlexBoxSpec(), + }) : container = container ?? const FlexBoxSpec(), leadingIcon = leadingIcon ?? const IconSpec(), text = text ?? const TextSpec(), trailingIcon = trailingIcon ?? const IconSpec(); diff --git a/packages/remix/lib/src/components/accordion/header/accordion_header_spec_widget.dart b/packages/remix/lib/src/components/accordion/header/accordion_header_spec_widget.dart index 5ac09404b..7f8d3eca3 100644 --- a/packages/remix/lib/src/components/accordion/header/accordion_header_spec_widget.dart +++ b/packages/remix/lib/src/components/accordion/header/accordion_header_spec_widget.dart @@ -16,12 +16,12 @@ class AccordionHeaderSpecWidget extends StatelessWidget { @override Widget build(BuildContext context) { - final FlexContainerWidget = spec.flexContainer; + final ContainerWidget = spec.container; final LeadingIconWidget = spec.leadingIcon; final TrailingIconWidget = spec.trailingIcon; final TitleWidget = spec.text; - return FlexContainerWidget( + return ContainerWidget( direction: Axis.horizontal, children: [ if (leadingIcon != null) LeadingIconWidget(leadingIcon), From fe9c9c4ad73a1315dcccb03655fdeb9cb53d6ba1 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Fri, 15 Nov 2024 14:18:51 -0300 Subject: [PATCH 48/57] button --- .../lib/src/components/button/button.dart | 6 +-- .../lib/src/components/button/button.g.dart | 33 ++++++++-------- .../src/components/button/button_style.dart | 6 +-- .../src/components/button/button_theme.dart | 38 +++++++++---------- .../src/components/button/button_widget.dart | 2 +- 5 files changed, 43 insertions(+), 42 deletions(-) diff --git a/packages/remix/lib/src/components/button/button.dart b/packages/remix/lib/src/components/button/button.dart index 1b4e633c2..1475de9f0 100644 --- a/packages/remix/lib/src/components/button/button.dart +++ b/packages/remix/lib/src/components/button/button.dart @@ -16,7 +16,7 @@ part 'button_widget.dart'; @MixableSpec() class ButtonSpec extends Spec with _$ButtonSpec, Diagnosticable { - final FlexBoxSpec flexbox; + final FlexBoxSpec container; final IconSpec icon; final TextSpec label; @@ -29,13 +29,13 @@ class ButtonSpec extends Spec with _$ButtonSpec, Diagnosticable { static const from = _$ButtonSpec.from; const ButtonSpec({ - FlexBoxSpec? flexbox, + FlexBoxSpec? container, IconSpec? icon, TextSpec? label, super.modifiers, SpinnerSpec? spinner, super.animated, - }) : flexbox = flexbox ?? const FlexBoxSpec(), + }) : container = container ?? const FlexBoxSpec(), icon = icon ?? const IconSpec(), label = label ?? const TextSpec(), spinner = spinner ?? const SpinnerSpec(); diff --git a/packages/remix/lib/src/components/button/button.g.dart b/packages/remix/lib/src/components/button/button.g.dart index c6b475596..ee63e796a 100644 --- a/packages/remix/lib/src/components/button/button.g.dart +++ b/packages/remix/lib/src/components/button/button.g.dart @@ -33,7 +33,7 @@ mixin _$ButtonSpec on Spec { /// replaced with the new values. @override ButtonSpec copyWith({ - FlexBoxSpec? flexbox, + FlexBoxSpec? container, IconSpec? icon, TextSpec? label, WidgetModifiersData? modifiers, @@ -41,7 +41,7 @@ mixin _$ButtonSpec on Spec { AnimatedData? animated, }) { return ButtonSpec( - flexbox: flexbox ?? _$this.flexbox, + container: container ?? _$this.container, icon: icon ?? _$this.icon, label: label ?? _$this.label, modifiers: modifiers ?? _$this.modifiers, @@ -61,7 +61,7 @@ mixin _$ButtonSpec on Spec { /// The interpolation is performed on each property of the [ButtonSpec] using the appropriate /// interpolation method: /// - /// - [FlexBoxSpec.lerp] for [flexbox]. + /// - [FlexBoxSpec.lerp] for [container]. /// - [IconSpec.lerp] for [icon]. /// - [TextSpec.lerp] for [label]. @@ -76,7 +76,7 @@ mixin _$ButtonSpec on Spec { if (other == null) return _$this; return ButtonSpec( - flexbox: _$this.flexbox.lerp(other.flexbox, t), + container: _$this.container.lerp(other.container, t), icon: _$this.icon.lerp(other.icon, t), label: _$this.label.lerp(other.label, t), modifiers: other.modifiers, @@ -91,7 +91,7 @@ mixin _$ButtonSpec on Spec { /// compare two [ButtonSpec] instances for equality. @override List get props => [ - _$this.flexbox, + _$this.container, _$this.icon, _$this.label, _$this.modifiers, @@ -103,7 +103,7 @@ mixin _$ButtonSpec on Spec { void _debugFillProperties(DiagnosticPropertiesBuilder properties) { properties.add( - DiagnosticsProperty('flexbox', _$this.flexbox, defaultValue: null)); + DiagnosticsProperty('container', _$this.container, defaultValue: null)); properties .add(DiagnosticsProperty('icon', _$this.icon, defaultValue: null)); properties @@ -126,13 +126,13 @@ mixin _$ButtonSpec on Spec { /// the [ButtonSpec] constructor. class ButtonSpecAttribute extends SpecAttribute with Diagnosticable { - final FlexBoxSpecAttribute? flexbox; + final FlexBoxSpecAttribute? container; final IconSpecAttribute? icon; final TextSpecAttribute? label; final SpinnerSpecAttribute? spinner; const ButtonSpecAttribute({ - this.flexbox, + this.container, this.icon, this.label, super.modifiers, @@ -151,7 +151,7 @@ class ButtonSpecAttribute extends SpecAttribute @override ButtonSpec resolve(MixData mix) { return ButtonSpec( - flexbox: flexbox?.resolve(mix), + container: container?.resolve(mix), icon: icon?.resolve(mix), label: label?.resolve(mix), modifiers: modifiers?.resolve(mix), @@ -173,7 +173,7 @@ class ButtonSpecAttribute extends SpecAttribute if (other == null) return this; return ButtonSpecAttribute( - flexbox: flexbox?.merge(other.flexbox) ?? other.flexbox, + container: container?.merge(other.container) ?? other.container, icon: icon?.merge(other.icon) ?? other.icon, label: label?.merge(other.label) ?? other.label, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, @@ -188,7 +188,7 @@ class ButtonSpecAttribute extends SpecAttribute /// compare two [ButtonSpecAttribute] instances for equality. @override List get props => [ - flexbox, + container, icon, label, modifiers, @@ -199,7 +199,8 @@ class ButtonSpecAttribute extends SpecAttribute @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); - properties.add(DiagnosticsProperty('flexbox', flexbox, defaultValue: null)); + properties + .add(DiagnosticsProperty('container', container, defaultValue: null)); properties.add(DiagnosticsProperty('icon', icon, defaultValue: null)); properties.add(DiagnosticsProperty('label', label, defaultValue: null)); properties @@ -216,8 +217,8 @@ class ButtonSpecAttribute extends SpecAttribute /// Use the methods of this class to configure specific properties of a [ButtonSpec]. class ButtonSpecUtility extends SpecUtility { - /// Utility for defining [ButtonSpecAttribute.flexbox] - late final flexbox = FlexBoxSpecUtility((v) => only(flexbox: v)); + /// Utility for defining [ButtonSpecAttribute.container] + late final container = FlexBoxSpecUtility((v) => only(container: v)); /// Utility for defining [ButtonSpecAttribute.icon] late final icon = IconSpecUtility((v) => only(icon: v)); @@ -245,7 +246,7 @@ class ButtonSpecUtility /// Returns a new [ButtonSpecAttribute] with the specified properties. @override T only({ - FlexBoxSpecAttribute? flexbox, + FlexBoxSpecAttribute? container, IconSpecAttribute? icon, TextSpecAttribute? label, WidgetModifiersDataDto? modifiers, @@ -253,7 +254,7 @@ class ButtonSpecUtility AnimatedDataDto? animated, }) { return builder(ButtonSpecAttribute( - flexbox: flexbox, + container: container, icon: icon, label: label, modifiers: modifiers, diff --git a/packages/remix/lib/src/components/button/button_style.dart b/packages/remix/lib/src/components/button/button_style.dart index 68b2cfb6f..9a44e57e6 100644 --- a/packages/remix/lib/src/components/button/button_style.dart +++ b/packages/remix/lib/src/components/button/button_style.dart @@ -31,7 +31,7 @@ class ButtonStyle extends SpecStyle { ]; final flexboxStyle = [ - $.flexbox.chain + $.container.chain ..borderRadius(6) ..color.black() ..padding.vertical(8) @@ -40,7 +40,7 @@ class ButtonStyle extends SpecStyle { ..flex.crossAxisAlignment.center() ..flex.mainAxisSize.min() ..flex.gap(8), - spec.on.disabled($.flexbox.color.grey.shade400()), + spec.on.disabled($.container.color.grey.shade400()), ]; return Style.create([ @@ -61,7 +61,7 @@ class ButtonDarkStyle extends ButtonStyle { return Style.create([ super.makeStyle(spec).call(), - $.flexbox.color.white(), + $.container.color.white(), $.label.style.color.black(), ]); } diff --git a/packages/remix/lib/src/components/button/button_theme.dart b/packages/remix/lib/src/components/button/button_theme.dart index 25ba09924..1dde4cf16 100644 --- a/packages/remix/lib/src/components/button/button_theme.dart +++ b/packages/remix/lib/src/components/button/button_theme.dart @@ -17,7 +17,7 @@ class FortalezaButtonStyle extends ButtonStyle { final baseStyle = super.makeStyle(spec); final baseOverrides = Style( baseStyle(), - $.flexbox.chain + $.container.chain ..padding.vertical.$space(2) ..padding.horizontal.$space(3) ..flex.gap.$space(2), @@ -27,7 +27,7 @@ class FortalezaButtonStyle extends ButtonStyle { ); final onDisabledForeground = $on.disabled( - $.flexbox.color.$neutral(7), + $.container.color.$neutral(7), $.label.style.color.$neutral(8), $.icon.color.$neutral(8), $.spinner.color.$neutral(7), @@ -36,25 +36,25 @@ class FortalezaButtonStyle extends ButtonStyle { final spinnerDisabled = $.spinner.color.$neutralAlpha(7); final solidVariant = Style( - $.flexbox.color.$accent(), + $.container.color.$accent(), $.label.style.color.white(), $.spinner.color.white(), $.icon.color.white(), - spec.on.hover($.flexbox.color.$accent(10)), - spec.on.disabled($.flexbox.color.$neutralAlpha(3), spinnerDisabled), + spec.on.hover($.container.color.$accent(10)), + spec.on.disabled($.container.color.$neutralAlpha(3), spinnerDisabled), ); final softVariant = Style( - $.flexbox.color.$accentAlpha(3), + $.container.color.$accentAlpha(3), $.label.style.color.$accentAlpha(11), $.spinner.color.$accentAlpha(11), $.icon.color.$accentAlpha(11), - spec.on.hover($.flexbox.color.$accentAlpha(4)), - spec.on.disabled($.flexbox.color.$neutralAlpha(3)), + spec.on.hover($.container.color.$accentAlpha(4)), + spec.on.disabled($.container.color.$neutralAlpha(3)), ); final outlineVariant = Style( - $.flexbox.chain + $.container.chain ..color.transparent() ..border.width(1) ..border.strokeAlign(0) @@ -62,9 +62,9 @@ class FortalezaButtonStyle extends ButtonStyle { $.spinner.color.$accentAlpha(11), $.icon.color.$accentAlpha(11), $.label.style.color.$accentAlpha(11), - spec.on.hover($.flexbox.color.$accentAlpha(2)), + spec.on.hover($.container.color.$accentAlpha(2)), spec.on.disabled( - $.flexbox.chain + $.container.chain ..border.color.$neutralAlpha(8) ..color.transparent(), ), @@ -72,22 +72,22 @@ class FortalezaButtonStyle extends ButtonStyle { final surfaceVariant = Style( outlineVariant(), - $.flexbox.color.$accentAlpha(3), + $.container.color.$accentAlpha(3), spec.on.hover( - $.flexbox.color.$accentAlpha(4), - $.flexbox.border.color.$accentAlpha(8), + $.container.color.$accentAlpha(4), + $.container.border.color.$accentAlpha(8), ), - spec.on.disabled($.flexbox.color.$neutral(1)), + spec.on.disabled($.container.color.$neutral(1)), ); final ghostVariant = Style( - $.flexbox.border.style.none(), - $.flexbox.color.transparent(), + $.container.border.style.none(), + $.container.color.transparent(), $.spinner.color.$accentAlpha(11), $.icon.color.$accentAlpha(11), $.label.style.color.$accentAlpha(11), - spec.on.hover($.flexbox.color.$accentAlpha(3)), - spec.on.disabled($.flexbox.color.transparent()), + spec.on.hover($.container.color.$accentAlpha(3)), + spec.on.disabled($.container.color.transparent()), ); return Style.create( diff --git a/packages/remix/lib/src/components/button/button_widget.dart b/packages/remix/lib/src/components/button/button_widget.dart index dd71910de..b7b33d48e 100644 --- a/packages/remix/lib/src/components/button/button_widget.dart +++ b/packages/remix/lib/src/components/button/button_widget.dart @@ -129,7 +129,7 @@ class ButtonSpecWidget extends StatelessWidget { } Widget _buildChildren(ButtonSpec spec) { - final flexboxWidget = spec.flexbox( + final flexboxWidget = spec.container( direction: Axis.horizontal, children: [ if (iconLeft != null) spec.icon(iconLeft), From 61d18027b4b1fca437b630634f628954afe9379e Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Fri, 15 Nov 2024 14:20:26 -0300 Subject: [PATCH 49/57] callout --- .../lib/src/components/callout/callout.dart | 6 ++-- .../lib/src/components/callout/callout.g.dart | 29 +++++++++---------- .../src/components/callout/callout_style.dart | 4 +-- .../src/components/callout/callout_theme.dart | 6 ++-- .../components/callout/callout_widget.dart | 2 +- 5 files changed, 23 insertions(+), 24 deletions(-) diff --git a/packages/remix/lib/src/components/callout/callout.dart b/packages/remix/lib/src/components/callout/callout.dart index fd99cfa12..ee525c2b7 100644 --- a/packages/remix/lib/src/components/callout/callout.dart +++ b/packages/remix/lib/src/components/callout/callout.dart @@ -12,7 +12,7 @@ part 'callout_widget.dart'; @MixableSpec() base class CalloutSpec extends Spec with _$CalloutSpec { - final FlexBoxSpec flexContainer; + final FlexBoxSpec container; final IconSpec icon; final TextSpec text; @@ -22,12 +22,12 @@ base class CalloutSpec extends Spec with _$CalloutSpec { static const from = _$CalloutSpec.from; const CalloutSpec({ - FlexBoxSpec? flexContainer, + FlexBoxSpec? container, IconSpec? icon, TextSpec? text, super.modifiers, super.animated, - }) : flexContainer = flexContainer ?? const FlexBoxSpec(), + }) : container = container ?? const FlexBoxSpec(), icon = icon ?? const IconSpec(), text = text ?? const TextSpec(); } diff --git a/packages/remix/lib/src/components/callout/callout.g.dart b/packages/remix/lib/src/components/callout/callout.g.dart index 2c6b56c5d..8e1786e75 100644 --- a/packages/remix/lib/src/components/callout/callout.g.dart +++ b/packages/remix/lib/src/components/callout/callout.g.dart @@ -33,14 +33,14 @@ mixin _$CalloutSpec on Spec { /// replaced with the new values. @override CalloutSpec copyWith({ - FlexBoxSpec? flexContainer, + FlexBoxSpec? container, IconSpec? icon, TextSpec? text, WidgetModifiersData? modifiers, AnimatedData? animated, }) { return CalloutSpec( - flexContainer: flexContainer ?? _$this.flexContainer, + container: container ?? _$this.container, icon: icon ?? _$this.icon, text: text ?? _$this.text, modifiers: modifiers ?? _$this.modifiers, @@ -59,7 +59,7 @@ mixin _$CalloutSpec on Spec { /// The interpolation is performed on each property of the [CalloutSpec] using the appropriate /// interpolation method: /// - /// - [FlexBoxSpec.lerp] for [flexContainer]. + /// - [FlexBoxSpec.lerp] for [container]. /// - [IconSpec.lerp] for [icon]. /// - [TextSpec.lerp] for [text]. @@ -74,7 +74,7 @@ mixin _$CalloutSpec on Spec { if (other == null) return _$this; return CalloutSpec( - flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), + container: _$this.container.lerp(other.container, t), icon: _$this.icon.lerp(other.icon, t), text: _$this.text.lerp(other.text, t), modifiers: other.modifiers, @@ -88,7 +88,7 @@ mixin _$CalloutSpec on Spec { /// compare two [CalloutSpec] instances for equality. @override List get props => [ - _$this.flexContainer, + _$this.container, _$this.icon, _$this.text, _$this.modifiers, @@ -106,12 +106,12 @@ mixin _$CalloutSpec on Spec { /// Use this class to configure the attributes of a [CalloutSpec] and pass it to /// the [CalloutSpec] constructor. base class CalloutSpecAttribute extends SpecAttribute { - final FlexBoxSpecAttribute? flexContainer; + final FlexBoxSpecAttribute? container; final IconSpecAttribute? icon; final TextSpecAttribute? text; const CalloutSpecAttribute({ - this.flexContainer, + this.container, this.icon, this.text, super.modifiers, @@ -129,7 +129,7 @@ base class CalloutSpecAttribute extends SpecAttribute { @override CalloutSpec resolve(MixData mix) { return CalloutSpec( - flexContainer: flexContainer?.resolve(mix), + container: container?.resolve(mix), icon: icon?.resolve(mix), text: text?.resolve(mix), modifiers: modifiers?.resolve(mix), @@ -150,8 +150,7 @@ base class CalloutSpecAttribute extends SpecAttribute { if (other == null) return this; return CalloutSpecAttribute( - flexContainer: - flexContainer?.merge(other.flexContainer) ?? other.flexContainer, + container: container?.merge(other.container) ?? other.container, icon: icon?.merge(other.icon) ?? other.icon, text: text?.merge(other.text) ?? other.text, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, @@ -165,7 +164,7 @@ base class CalloutSpecAttribute extends SpecAttribute { /// compare two [CalloutSpecAttribute] instances for equality. @override List get props => [ - flexContainer, + container, icon, text, modifiers, @@ -179,8 +178,8 @@ base class CalloutSpecAttribute extends SpecAttribute { /// Use the methods of this class to configure specific properties of a [CalloutSpec]. class CalloutSpecUtility extends SpecUtility { - /// Utility for defining [CalloutSpecAttribute.flexContainer] - late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); + /// Utility for defining [CalloutSpecAttribute.container] + late final container = FlexBoxSpecUtility((v) => only(container: v)); /// Utility for defining [CalloutSpecAttribute.icon] late final icon = IconSpecUtility((v) => only(icon: v)); @@ -205,14 +204,14 @@ class CalloutSpecUtility /// Returns a new [CalloutSpecAttribute] with the specified properties. @override T only({ - FlexBoxSpecAttribute? flexContainer, + FlexBoxSpecAttribute? container, IconSpecAttribute? icon, TextSpecAttribute? text, WidgetModifiersDataDto? modifiers, AnimatedDataDto? animated, }) { return builder(CalloutSpecAttribute( - flexContainer: flexContainer, + container: container, icon: icon, text: text, modifiers: modifiers, diff --git a/packages/remix/lib/src/components/callout/callout_style.dart b/packages/remix/lib/src/components/callout/callout_style.dart index aaefa14ef..76e3fe04e 100644 --- a/packages/remix/lib/src/components/callout/callout_style.dart +++ b/packages/remix/lib/src/components/callout/callout_style.dart @@ -10,7 +10,7 @@ class CalloutStyle extends SpecStyle { final $ = spec.utilities; final flexContainerStyle = [ - $.flexContainer.chain + $.container.chain ..borderRadius(6) ..color.white() ..padding(12) @@ -40,7 +40,7 @@ class CalloutDarkStyle extends CalloutStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; final flexContainerStyle = [ - $.flexContainer.chain + $.container.chain ..color.black() ..border.all.color.white30(), ]; diff --git a/packages/remix/lib/src/components/callout/callout_theme.dart b/packages/remix/lib/src/components/callout/callout_theme.dart index 240ea751c..4acf4b753 100644 --- a/packages/remix/lib/src/components/callout/callout_theme.dart +++ b/packages/remix/lib/src/components/callout/callout_theme.dart @@ -15,7 +15,7 @@ class FortalezaCalloutStyle extends CalloutStyle { final baseStyle = super.makeStyle(spec); final baseOverrides = Style( baseStyle(), - $.flexContainer.chain + $.container.chain ..borderRadius(8) ..color.$accent(3) ..border.all.width(0) @@ -33,7 +33,7 @@ class FortalezaCalloutStyle extends CalloutStyle { ); final surfaceVariant = Style( - $.flexContainer.chain + $.container.chain ..border.all.style.solid() ..color.$accentAlpha(3) ..border.width(1) @@ -41,7 +41,7 @@ class FortalezaCalloutStyle extends CalloutStyle { ); final outlineVariant = Style( - $.flexContainer.chain + $.container.chain ..border.all.style.solid() ..color.transparent() ..border.width(1) diff --git a/packages/remix/lib/src/components/callout/callout_widget.dart b/packages/remix/lib/src/components/callout/callout_widget.dart index 1bb3db8e5..afb6456df 100644 --- a/packages/remix/lib/src/components/callout/callout_widget.dart +++ b/packages/remix/lib/src/components/callout/callout_widget.dart @@ -32,7 +32,7 @@ class Callout extends StatelessWidget { builder: (context) { final spec = CalloutSpec.of(context); - return spec.flexContainer( + return spec.container( direction: Axis.horizontal, children: [if (icon != null) spec.icon(icon!), spec.text(text)], ); From 9c06175679397d0d8e3c77e2eb5ca5cbbc189d4b Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Fri, 15 Nov 2024 14:23:43 -0300 Subject: [PATCH 50/57] checkbox --- .../lib/src/components/checkbox/checkbox.dart | 12 +-- .../src/components/checkbox/checkbox.g.dart | 74 +++++++++---------- .../components/checkbox/checkbox_style.dart | 18 ++--- .../components/checkbox/checkbox_theme.dart | 14 ++-- .../components/checkbox/checkbox_widget.dart | 6 +- 5 files changed, 61 insertions(+), 63 deletions(-) diff --git a/packages/remix/lib/src/components/checkbox/checkbox.dart b/packages/remix/lib/src/components/checkbox/checkbox.dart index a69460a66..668a62357 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox.dart @@ -14,9 +14,9 @@ part 'checkbox_widget.dart'; @MixableSpec() base class CheckboxSpec extends Spec with _$CheckboxSpec, Diagnosticable { - final FlexBoxSpec flexContainer; + final FlexBoxSpec container; final BoxSpec indicatorContainer; - final IconSpec indicatorIcon; + final IconSpec indicator; final TextSpec label; /// {@macro checkbox_spec_of} @@ -26,14 +26,14 @@ base class CheckboxSpec extends Spec const CheckboxSpec({ BoxSpec? indicatorContainer, - IconSpec? indicatorIcon, - FlexBoxSpec? flexContainer, + IconSpec? indicator, + FlexBoxSpec? container, TextSpec? label, super.modifiers, super.animated, }) : indicatorContainer = indicatorContainer ?? const BoxSpec(), - indicatorIcon = indicatorIcon ?? const IconSpec(), - flexContainer = flexContainer ?? const FlexBoxSpec(), + indicator = indicator ?? const IconSpec(), + container = container ?? const FlexBoxSpec(), label = label ?? const TextSpec(); @override diff --git a/packages/remix/lib/src/components/checkbox/checkbox.g.dart b/packages/remix/lib/src/components/checkbox/checkbox.g.dart index b8fab4cbc..e25b673c4 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox.g.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox.g.dart @@ -34,16 +34,16 @@ mixin _$CheckboxSpec on Spec { @override CheckboxSpec copyWith({ BoxSpec? indicatorContainer, - IconSpec? indicatorIcon, - FlexBoxSpec? flexContainer, + IconSpec? indicator, + FlexBoxSpec? container, TextSpec? label, WidgetModifiersData? modifiers, AnimatedData? animated, }) { return CheckboxSpec( indicatorContainer: indicatorContainer ?? _$this.indicatorContainer, - indicatorIcon: indicatorIcon ?? _$this.indicatorIcon, - flexContainer: flexContainer ?? _$this.flexContainer, + indicator: indicator ?? _$this.indicator, + container: container ?? _$this.container, label: label ?? _$this.label, modifiers: modifiers ?? _$this.modifiers, animated: animated ?? _$this.animated, @@ -62,8 +62,8 @@ mixin _$CheckboxSpec on Spec { /// interpolation method: /// /// - [BoxSpec.lerp] for [indicatorContainer]. - /// - [IconSpec.lerp] for [indicatorIcon]. - /// - [FlexBoxSpec.lerp] for [flexContainer]. + /// - [IconSpec.lerp] for [indicator]. + /// - [FlexBoxSpec.lerp] for [container]. /// - [TextSpec.lerp] for [label]. /// For [modifiers] and [animated], the interpolation is performed using a step function. @@ -79,8 +79,8 @@ mixin _$CheckboxSpec on Spec { return CheckboxSpec( indicatorContainer: _$this.indicatorContainer.lerp(other.indicatorContainer, t), - indicatorIcon: _$this.indicatorIcon.lerp(other.indicatorIcon, t), - flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), + indicator: _$this.indicator.lerp(other.indicator, t), + container: _$this.container.lerp(other.container, t), label: _$this.label.lerp(other.label, t), modifiers: other.modifiers, animated: t < 0.5 ? _$this.animated : other.animated, @@ -94,8 +94,8 @@ mixin _$CheckboxSpec on Spec { @override List get props => [ _$this.indicatorContainer, - _$this.indicatorIcon, - _$this.flexContainer, + _$this.indicator, + _$this.container, _$this.label, _$this.modifiers, _$this.animated, @@ -107,10 +107,10 @@ mixin _$CheckboxSpec on Spec { properties.add(DiagnosticsProperty( 'indicatorContainer', _$this.indicatorContainer, defaultValue: null)); - properties.add(DiagnosticsProperty('indicatorIcon', _$this.indicatorIcon, - defaultValue: null)); - properties.add(DiagnosticsProperty('flexContainer', _$this.flexContainer, - defaultValue: null)); + properties.add( + DiagnosticsProperty('indicator', _$this.indicator, defaultValue: null)); + properties.add( + DiagnosticsProperty('container', _$this.container, defaultValue: null)); properties .add(DiagnosticsProperty('label', _$this.label, defaultValue: null)); properties.add( @@ -130,14 +130,14 @@ mixin _$CheckboxSpec on Spec { base class CheckboxSpecAttribute extends SpecAttribute with Diagnosticable { final BoxSpecAttribute? indicatorContainer; - final IconSpecAttribute? indicatorIcon; - final FlexBoxSpecAttribute? flexContainer; + final IconSpecAttribute? indicator; + final FlexBoxSpecAttribute? container; final TextSpecAttribute? label; const CheckboxSpecAttribute({ this.indicatorContainer, - this.indicatorIcon, - this.flexContainer, + this.indicator, + this.container, this.label, super.modifiers, super.animated, @@ -155,8 +155,8 @@ base class CheckboxSpecAttribute extends SpecAttribute CheckboxSpec resolve(MixData mix) { return CheckboxSpec( indicatorContainer: indicatorContainer?.resolve(mix), - indicatorIcon: indicatorIcon?.resolve(mix), - flexContainer: flexContainer?.resolve(mix), + indicator: indicator?.resolve(mix), + container: container?.resolve(mix), label: label?.resolve(mix), modifiers: modifiers?.resolve(mix), animated: animated?.resolve(mix) ?? mix.animation, @@ -178,10 +178,8 @@ base class CheckboxSpecAttribute extends SpecAttribute return CheckboxSpecAttribute( indicatorContainer: indicatorContainer?.merge(other.indicatorContainer) ?? other.indicatorContainer, - indicatorIcon: - indicatorIcon?.merge(other.indicatorIcon) ?? other.indicatorIcon, - flexContainer: - flexContainer?.merge(other.flexContainer) ?? other.flexContainer, + indicator: indicator?.merge(other.indicator) ?? other.indicator, + container: container?.merge(other.container) ?? other.container, label: label?.merge(other.label) ?? other.label, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, animated: animated?.merge(other.animated) ?? other.animated, @@ -195,8 +193,8 @@ base class CheckboxSpecAttribute extends SpecAttribute @override List get props => [ indicatorContainer, - indicatorIcon, - flexContainer, + indicator, + container, label, modifiers, animated, @@ -207,10 +205,10 @@ base class CheckboxSpecAttribute extends SpecAttribute super.debugFillProperties(properties); properties.add(DiagnosticsProperty('indicatorContainer', indicatorContainer, defaultValue: null)); - properties.add(DiagnosticsProperty('indicatorIcon', indicatorIcon, - defaultValue: null)); - properties.add(DiagnosticsProperty('flexContainer', flexContainer, - defaultValue: null)); + properties + .add(DiagnosticsProperty('indicator', indicator, defaultValue: null)); + properties + .add(DiagnosticsProperty('container', container, defaultValue: null)); properties.add(DiagnosticsProperty('label', label, defaultValue: null)); properties .add(DiagnosticsProperty('modifiers', modifiers, defaultValue: null)); @@ -229,11 +227,11 @@ class CheckboxSpecUtility late final indicatorContainer = BoxSpecUtility((v) => only(indicatorContainer: v)); - /// Utility for defining [CheckboxSpecAttribute.indicatorIcon] - late final indicatorIcon = IconSpecUtility((v) => only(indicatorIcon: v)); + /// Utility for defining [CheckboxSpecAttribute.indicator] + late final indicator = IconSpecUtility((v) => only(indicator: v)); - /// Utility for defining [CheckboxSpecAttribute.flexContainer] - late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); + /// Utility for defining [CheckboxSpecAttribute.container] + late final container = FlexBoxSpecUtility((v) => only(container: v)); /// Utility for defining [CheckboxSpecAttribute.label] late final label = TextSpecUtility((v) => only(label: v)); @@ -256,16 +254,16 @@ class CheckboxSpecUtility @override T only({ BoxSpecAttribute? indicatorContainer, - IconSpecAttribute? indicatorIcon, - FlexBoxSpecAttribute? flexContainer, + IconSpecAttribute? indicator, + FlexBoxSpecAttribute? container, TextSpecAttribute? label, WidgetModifiersDataDto? modifiers, AnimatedDataDto? animated, }) { return builder(CheckboxSpecAttribute( indicatorContainer: indicatorContainer, - indicatorIcon: indicatorIcon, - flexContainer: flexContainer, + indicator: indicator, + container: container, label: label, modifiers: modifiers, animated: animated, diff --git a/packages/remix/lib/src/components/checkbox/checkbox_style.dart b/packages/remix/lib/src/components/checkbox/checkbox_style.dart index 3b54b61f5..a66ef9eb2 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox_style.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox_style.dart @@ -7,7 +7,7 @@ class CheckboxStyle extends SpecStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final containerStyle = [ + final indicatorContainerStyle = [ $.indicatorContainer.chain ..borderRadius(4) ..border.all.color.black(), @@ -15,13 +15,13 @@ class CheckboxStyle extends SpecStyle { ]; final indicatorStyle = [ - $.indicatorIcon.chain + $.indicator.chain ..size(16) ..color.white() ..wrap.opacity(0), spec.on.selected( - $.indicatorIcon.wrap.opacity(1), - $.indicatorIcon.color.white(), + $.indicator.wrap.opacity(1), + $.indicator.color.white(), ), ]; @@ -31,7 +31,7 @@ class CheckboxStyle extends SpecStyle { ..style.fontWeight.w500() ..textHeightBehavior.heightToFirstAscent.off(); - final flexContainerStyle = $.flexContainer.flex.chain + final containerStyle = $.container.flex.chain ..crossAxisAlignment.center() ..mainAxisAlignment.start() ..mainAxisSize.min() @@ -44,10 +44,10 @@ class CheckboxStyle extends SpecStyle { ); return Style.create([ - ...containerStyle, + ...indicatorContainerStyle, ...indicatorStyle, labelStyle, - flexContainerStyle, + containerStyle, disabledStyle, ]); } @@ -63,11 +63,11 @@ class CheckboxDarkStyle extends CheckboxStyle { return Style.create([ super.makeStyle(spec).call(), $.indicatorContainer.border.all.color.white(), - $.indicatorIcon.color.black(), + $.indicator.color.black(), $.label.style.color.white(), spec.on.selected( $.indicatorContainer.color.white(), - $.indicatorIcon.color.black(), + $.indicator.color.black(), ), ]); } diff --git a/packages/remix/lib/src/components/checkbox/checkbox_theme.dart b/packages/remix/lib/src/components/checkbox/checkbox_theme.dart index 338fe6090..b03320642 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox_theme.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox_theme.dart @@ -13,12 +13,12 @@ class FortalezaCheckboxStyle extends CheckboxStyle { final baseStyle = super.makeStyle(spec); final baseOverrides = Style( - $.indicatorIcon.wrap.scale(0.5), + $.indicator.wrap.scale(0.5), $.indicatorContainer.chain ..border.all.width(0) ..border.all.style.none(), $.label.style.color.$neutral(12), - spec.on.selected($.indicatorIcon.wrap.scale(0.9)), + spec.on.selected($.indicator.wrap.scale(0.9)), ); final surfaceVariant = Style( @@ -26,7 +26,7 @@ class FortalezaCheckboxStyle extends CheckboxStyle { ..border.strokeAlign(BorderSide.strokeAlignInside) ..border.color.$neutral(9) ..border.style.solid(), - $.indicatorIcon.color.$white(), + $.indicator.color.$white(), spec.on.hover($.indicatorContainer.color.$neutral(3)), spec.on.selected( $.indicatorContainer.chain @@ -41,7 +41,7 @@ class FortalezaCheckboxStyle extends CheckboxStyle { $.indicatorContainer.color.$neutral(3), $.indicatorContainer.border.all.color.$neutral(9), spec.on.selected( - $.indicatorIcon.color.$neutral(8), + $.indicator.color.$neutral(8), $.indicatorContainer.chain ..color.$neutral(3) ..border.width(1) @@ -54,13 +54,13 @@ class FortalezaCheckboxStyle extends CheckboxStyle { final softVariant = Style( $.indicatorContainer.border.style.none(), $.indicatorContainer.color.$accentAlpha(6), - $.indicatorIcon.color.$accentAlpha(11), + $.indicator.color.$accentAlpha(11), spec.on.hover($.indicatorContainer.color.$accentAlpha(5)), (spec.on.hover & spec.on.selected)($.indicatorContainer.color.$accentAlpha(5)), spec.on.selected( $.indicatorContainer.color.$accentAlpha(6), - $.indicatorIcon.color.$accentAlpha(11), + $.indicator.color.$accentAlpha(11), ), spec.on.disabled( $.indicatorContainer.color.$neutral(4), @@ -73,7 +73,7 @@ class FortalezaCheckboxStyle extends CheckboxStyle { $.indicatorContainer.chain ..color.$neutral(3) ..border.color.$neutral(5), - $.indicatorIcon.color.$neutral(7), + $.indicator.color.$neutral(7), $.label.style.color.$neutral(9), ); diff --git a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart index ca8d6a668..bcb22927c 100644 --- a/packages/remix/lib/src/components/checkbox/checkbox_widget.dart +++ b/packages/remix/lib/src/components/checkbox/checkbox_widget.dart @@ -93,11 +93,11 @@ class _CheckboxState extends State { builder: (context) { final spec = CheckboxSpec.of(context); - final FlexContainerLayout = spec.flexContainer; + final ContainerLayout = spec.container; final ContainerWidget = spec.indicatorContainer; - final IconWidget = spec.indicatorIcon; + final IconWidget = spec.indicator; - return FlexContainerLayout( + return ContainerLayout( direction: Axis.horizontal, children: [ ContainerWidget( From 6e9d2dabec7358ed67d7378fb6ebaedf435b70e3 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Fri, 15 Nov 2024 14:26:06 -0300 Subject: [PATCH 51/57] chip --- .../remix/lib/src/components/chip/chip.dart | 6 +-- .../remix/lib/src/components/chip/chip.g.dart | 37 +++++++++---------- .../lib/src/components/chip/chip_style.dart | 23 ++++++------ .../lib/src/components/chip/chip_theme.dart | 27 +++++++------- .../lib/src/components/chip/chip_widget.dart | 2 +- 5 files changed, 46 insertions(+), 49 deletions(-) diff --git a/packages/remix/lib/src/components/chip/chip.dart b/packages/remix/lib/src/components/chip/chip.dart index 6d6bb11ba..952545166 100644 --- a/packages/remix/lib/src/components/chip/chip.dart +++ b/packages/remix/lib/src/components/chip/chip.dart @@ -14,7 +14,7 @@ part 'chip_widget.dart'; @MixableSpec() class ChipSpec extends Spec with _$ChipSpec, Diagnosticable { - final FlexBoxSpec flexContainer; + final FlexBoxSpec container; final IconSpec icon; final TextSpec label; @@ -24,12 +24,12 @@ class ChipSpec extends Spec with _$ChipSpec, Diagnosticable { static const from = _$ChipSpec.from; const ChipSpec({ - FlexBoxSpec? flexContainer, + FlexBoxSpec? container, IconSpec? icon, TextSpec? label, super.modifiers, super.animated, - }) : flexContainer = flexContainer ?? const FlexBoxSpec(), + }) : container = container ?? const FlexBoxSpec(), icon = icon ?? const IconSpec(), label = label ?? const TextSpec(); diff --git a/packages/remix/lib/src/components/chip/chip.g.dart b/packages/remix/lib/src/components/chip/chip.g.dart index bf311701c..15fc124fb 100644 --- a/packages/remix/lib/src/components/chip/chip.g.dart +++ b/packages/remix/lib/src/components/chip/chip.g.dart @@ -33,14 +33,14 @@ mixin _$ChipSpec on Spec { /// replaced with the new values. @override ChipSpec copyWith({ - FlexBoxSpec? flexContainer, + FlexBoxSpec? container, IconSpec? icon, TextSpec? label, WidgetModifiersData? modifiers, AnimatedData? animated, }) { return ChipSpec( - flexContainer: flexContainer ?? _$this.flexContainer, + container: container ?? _$this.container, icon: icon ?? _$this.icon, label: label ?? _$this.label, modifiers: modifiers ?? _$this.modifiers, @@ -59,7 +59,7 @@ mixin _$ChipSpec on Spec { /// The interpolation is performed on each property of the [ChipSpec] using the appropriate /// interpolation method: /// - /// - [FlexBoxSpec.lerp] for [flexContainer]. + /// - [FlexBoxSpec.lerp] for [container]. /// - [IconSpec.lerp] for [icon]. /// - [TextSpec.lerp] for [label]. @@ -74,7 +74,7 @@ mixin _$ChipSpec on Spec { if (other == null) return _$this; return ChipSpec( - flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), + container: _$this.container.lerp(other.container, t), icon: _$this.icon.lerp(other.icon, t), label: _$this.label.lerp(other.label, t), modifiers: other.modifiers, @@ -88,7 +88,7 @@ mixin _$ChipSpec on Spec { /// compare two [ChipSpec] instances for equality. @override List get props => [ - _$this.flexContainer, + _$this.container, _$this.icon, _$this.label, _$this.modifiers, @@ -98,8 +98,8 @@ mixin _$ChipSpec on Spec { ChipSpec get _$this => this as ChipSpec; void _debugFillProperties(DiagnosticPropertiesBuilder properties) { - properties.add(DiagnosticsProperty('flexContainer', _$this.flexContainer, - defaultValue: null)); + properties.add( + DiagnosticsProperty('container', _$this.container, defaultValue: null)); properties .add(DiagnosticsProperty('icon', _$this.icon, defaultValue: null)); properties @@ -119,12 +119,12 @@ mixin _$ChipSpec on Spec { /// Use this class to configure the attributes of a [ChipSpec] and pass it to /// the [ChipSpec] constructor. class ChipSpecAttribute extends SpecAttribute with Diagnosticable { - final FlexBoxSpecAttribute? flexContainer; + final FlexBoxSpecAttribute? container; final IconSpecAttribute? icon; final TextSpecAttribute? label; const ChipSpecAttribute({ - this.flexContainer, + this.container, this.icon, this.label, super.modifiers, @@ -142,7 +142,7 @@ class ChipSpecAttribute extends SpecAttribute with Diagnosticable { @override ChipSpec resolve(MixData mix) { return ChipSpec( - flexContainer: flexContainer?.resolve(mix), + container: container?.resolve(mix), icon: icon?.resolve(mix), label: label?.resolve(mix), modifiers: modifiers?.resolve(mix), @@ -163,8 +163,7 @@ class ChipSpecAttribute extends SpecAttribute with Diagnosticable { if (other == null) return this; return ChipSpecAttribute( - flexContainer: - flexContainer?.merge(other.flexContainer) ?? other.flexContainer, + container: container?.merge(other.container) ?? other.container, icon: icon?.merge(other.icon) ?? other.icon, label: label?.merge(other.label) ?? other.label, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, @@ -178,7 +177,7 @@ class ChipSpecAttribute extends SpecAttribute with Diagnosticable { /// compare two [ChipSpecAttribute] instances for equality. @override List get props => [ - flexContainer, + container, icon, label, modifiers, @@ -188,8 +187,8 @@ class ChipSpecAttribute extends SpecAttribute with Diagnosticable { @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); - properties.add(DiagnosticsProperty('flexContainer', flexContainer, - defaultValue: null)); + properties + .add(DiagnosticsProperty('container', container, defaultValue: null)); properties.add(DiagnosticsProperty('icon', icon, defaultValue: null)); properties.add(DiagnosticsProperty('label', label, defaultValue: null)); properties @@ -205,8 +204,8 @@ class ChipSpecAttribute extends SpecAttribute with Diagnosticable { /// Use the methods of this class to configure specific properties of a [ChipSpec]. class ChipSpecUtility extends SpecUtility { - /// Utility for defining [ChipSpecAttribute.flexContainer] - late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); + /// Utility for defining [ChipSpecAttribute.container] + late final container = FlexBoxSpecUtility((v) => only(container: v)); /// Utility for defining [ChipSpecAttribute.icon] late final icon = IconSpecUtility((v) => only(icon: v)); @@ -231,14 +230,14 @@ class ChipSpecUtility /// Returns a new [ChipSpecAttribute] with the specified properties. @override T only({ - FlexBoxSpecAttribute? flexContainer, + FlexBoxSpecAttribute? container, IconSpecAttribute? icon, TextSpecAttribute? label, WidgetModifiersDataDto? modifiers, AnimatedDataDto? animated, }) { return builder(ChipSpecAttribute( - flexContainer: flexContainer, + container: container, icon: icon, label: label, modifiers: modifiers, diff --git a/packages/remix/lib/src/components/chip/chip_style.dart b/packages/remix/lib/src/components/chip/chip_style.dart index 5cb095699..47de4d9b5 100644 --- a/packages/remix/lib/src/components/chip/chip_style.dart +++ b/packages/remix/lib/src/components/chip/chip_style.dart @@ -23,8 +23,8 @@ class ChipStyle extends SpecStyle { ..style.fontWeight.w600(), ]; - final flexContainerStyle = [ - $.flexContainer.chain + final containerStyle = [ + $.container.chain ..borderRadius(6) ..color.white() ..border.all.width(1) @@ -35,20 +35,19 @@ class ChipStyle extends SpecStyle { ..flex.crossAxisAlignment.center() ..flex.mainAxisSize.min() ..flex.gap(8), - spec.on.selected($.flexContainer.color.grey.shade200()), + spec.on.selected($.container.color.grey.shade200()), ]; final disabledStyle = spec.on.disabled( $.label.style.color.grey.shade600(), $.icon.color.grey.shade600(), - spec.on.selected($.flexContainer.color.grey.shade300()), + spec.on.selected($.container.color.grey.shade300()), ); return Style.create([ - ...flexContainerStyle, + ...containerStyle, ...iconStyle, ...labelStyle, - ...flexContainerStyle, disabledStyle, ]); } @@ -61,17 +60,17 @@ class ChipDarkStyle extends ChipStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final flexContainerStyle = [ - $.flexContainer.chain + final containerStyle = [ + $.container.chain ..border.all.color.grey.shade900() ..color.black(), $.icon.color.white(), - spec.on.selected($.flexContainer.color.grey.shade900()), + spec.on.selected($.container.color.grey.shade900()), spec.on.disabled( $.label.style.color.grey.shade600(), $.icon.color.grey.shade600(), - $.flexContainer.color.black(), - spec.on.selected($.flexContainer.color.grey.shade900()), + $.container.color.black(), + spec.on.selected($.container.color.grey.shade900()), ), ]; @@ -79,7 +78,7 @@ class ChipDarkStyle extends ChipStyle { return Style.create([ super.makeStyle(spec).call(), - ...flexContainerStyle, + ...containerStyle, labelStyle, ]); } diff --git a/packages/remix/lib/src/components/chip/chip_theme.dart b/packages/remix/lib/src/components/chip/chip_theme.dart index bb57d21f3..a460e8ac8 100644 --- a/packages/remix/lib/src/components/chip/chip_theme.dart +++ b/packages/remix/lib/src/components/chip/chip_theme.dart @@ -19,50 +19,49 @@ class FortalezaChipStyle extends ChipStyle { ..style.color.$accent(), ]; - final flexContainerStyle = [ - $.flexContainer.chain + final containerStyle = [ + $.container.chain ..flex.gap.$space(2) ..borderRadius(20) ..color.$accent(2) ..border.color.$accent(6) ..padding.vertical(8) ..padding.horizontal(12), - (spec.on.hover & spec.on.unselected)($.flexContainer.color.$accent(3)), - spec.on.selected($.flexContainer.color.$accent(4)), + (spec.on.hover & spec.on.unselected)($.container.color.$accent(3)), + spec.on.selected($.container.color.$accent(4)), ]; final disabledStyle = [ spec.on.disabled( - $.flexContainer.border.color.$neutral(4), - $.flexContainer.color.$neutral(2), + $.container.border.color.$neutral(4), + $.container.color.$neutral(2), $.label.style.color.$neutral(8), $.icon.color.$neutral(8), - spec.on.selected($.flexContainer.color.$neutral(4)), + spec.on.selected($.container.color.$neutral(4)), ), ]; final ghostStyle = Style.create([ - $.flexContainer.chain + $.container.chain ..borderRadius(6) ..color.$accent(1) ..border.style.none() ..padding.vertical(8) ..padding.horizontal(12), - (spec.on.hover & spec.on.unselected)($.flexContainer.color.$accent(3)), - spec.on.selected($.flexContainer.color.$accent(4)), + (spec.on.hover & spec.on.unselected)($.container.color.$accent(3)), + spec.on.selected($.container.color.$accent(4)), spec.on.disabled( - $.flexContainer.color.$neutral(2), + $.container.color.$neutral(2), $.icon.color.$neutral(8), - (spec.on.selected)($.flexContainer.color.$neutral(4)), + (spec.on.selected)($.container.color.$neutral(4)), ), ]); return Style.create([ super.makeStyle(spec).call(), - ...flexContainerStyle, + ...containerStyle, ...iconStyle, ...labelStyle, - ...flexContainerStyle, ...disabledStyle, ghost(ghostStyle()), ]).animate(duration: const Duration(milliseconds: 150)); diff --git a/packages/remix/lib/src/components/chip/chip_widget.dart b/packages/remix/lib/src/components/chip/chip_widget.dart index 880bfa951..928c87fd6 100644 --- a/packages/remix/lib/src/components/chip/chip_widget.dart +++ b/packages/remix/lib/src/components/chip/chip_widget.dart @@ -92,7 +92,7 @@ class _ChipState extends State { builder: (context) { final spec = ChipSpec.of(context); - return spec.flexContainer( + return spec.container( direction: Axis.horizontal, children: [ if (widget.iconLeft != null) spec.icon(widget.iconLeft), From f81d7f95b247b76ced8824ad0f0f035e828f9b7b Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Fri, 15 Nov 2024 14:29:12 -0300 Subject: [PATCH 52/57] dialog --- .../lib/src/components/dialog/dialog.dart | 12 +-- .../lib/src/components/dialog/dialog.g.dart | 74 ++++++++++--------- .../src/components/dialog/dialog_style.dart | 10 +-- .../src/components/dialog/dialog_theme.dart | 4 +- .../src/components/dialog/dialog_widget.dart | 4 +- 5 files changed, 53 insertions(+), 51 deletions(-) diff --git a/packages/remix/lib/src/components/dialog/dialog.dart b/packages/remix/lib/src/components/dialog/dialog.dart index 4ea465498..7a1e75127 100644 --- a/packages/remix/lib/src/components/dialog/dialog.dart +++ b/packages/remix/lib/src/components/dialog/dialog.dart @@ -83,10 +83,10 @@ Future showDialog({ @MixableSpec() class DialogSpec extends Spec with _$DialogSpec, Diagnosticable { - final FlexBoxSpec flexContainer; + final FlexBoxSpec container; final TextSpec title; final TextSpec description; - final FlexSpec flexActions; + final FlexSpec actionsContainer; /// {@macro dialog_spec_of} static const of = _$DialogSpec.of; @@ -94,16 +94,16 @@ class DialogSpec extends Spec with _$DialogSpec, Diagnosticable { static const from = _$DialogSpec.from; const DialogSpec({ - FlexBoxSpec? flexContainer, + FlexBoxSpec? container, TextSpec? title, TextSpec? description, - FlexSpec? flexActions, + FlexSpec? actionsContainer, super.modifiers, super.animated, - }) : flexContainer = flexContainer ?? const FlexBoxSpec(), + }) : container = container ?? const FlexBoxSpec(), title = title ?? const TextSpec(), description = description ?? const TextSpec(), - flexActions = flexActions ?? const FlexSpec(); + actionsContainer = actionsContainer ?? const FlexSpec(); @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { diff --git a/packages/remix/lib/src/components/dialog/dialog.g.dart b/packages/remix/lib/src/components/dialog/dialog.g.dart index f49d61967..8f130ffd9 100644 --- a/packages/remix/lib/src/components/dialog/dialog.g.dart +++ b/packages/remix/lib/src/components/dialog/dialog.g.dart @@ -33,18 +33,18 @@ mixin _$DialogSpec on Spec { /// replaced with the new values. @override DialogSpec copyWith({ - FlexBoxSpec? flexContainer, + FlexBoxSpec? container, TextSpec? title, TextSpec? description, - FlexSpec? flexActions, + FlexSpec? actionsContainer, WidgetModifiersData? modifiers, AnimatedData? animated, }) { return DialogSpec( - flexContainer: flexContainer ?? _$this.flexContainer, + container: container ?? _$this.container, title: title ?? _$this.title, description: description ?? _$this.description, - flexActions: flexActions ?? _$this.flexActions, + actionsContainer: actionsContainer ?? _$this.actionsContainer, modifiers: modifiers ?? _$this.modifiers, animated: animated ?? _$this.animated, ); @@ -61,9 +61,9 @@ mixin _$DialogSpec on Spec { /// The interpolation is performed on each property of the [DialogSpec] using the appropriate /// interpolation method: /// - /// - [FlexBoxSpec.lerp] for [flexContainer]. + /// - [FlexBoxSpec.lerp] for [container]. /// - [TextSpec.lerp] for [title] and [description]. - /// - [FlexSpec.lerp] for [flexActions]. + /// - [FlexSpec.lerp] for [actionsContainer]. /// For [modifiers] and [animated], the interpolation is performed using a step function. /// If [t] is less than 0.5, the value from the current [DialogSpec] is used. Otherwise, the value @@ -76,10 +76,10 @@ mixin _$DialogSpec on Spec { if (other == null) return _$this; return DialogSpec( - flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), + container: _$this.container.lerp(other.container, t), title: _$this.title.lerp(other.title, t), description: _$this.description.lerp(other.description, t), - flexActions: _$this.flexActions.lerp(other.flexActions, t), + actionsContainer: _$this.actionsContainer.lerp(other.actionsContainer, t), modifiers: other.modifiers, animated: t < 0.5 ? _$this.animated : other.animated, ); @@ -91,10 +91,10 @@ mixin _$DialogSpec on Spec { /// compare two [DialogSpec] instances for equality. @override List get props => [ - _$this.flexContainer, + _$this.container, _$this.title, _$this.description, - _$this.flexActions, + _$this.actionsContainer, _$this.modifiers, _$this.animated, ]; @@ -102,13 +102,14 @@ mixin _$DialogSpec on Spec { DialogSpec get _$this => this as DialogSpec; void _debugFillProperties(DiagnosticPropertiesBuilder properties) { - properties.add(DiagnosticsProperty('flexContainer', _$this.flexContainer, - defaultValue: null)); + properties.add( + DiagnosticsProperty('container', _$this.container, defaultValue: null)); properties .add(DiagnosticsProperty('title', _$this.title, defaultValue: null)); properties.add(DiagnosticsProperty('description', _$this.description, defaultValue: null)); - properties.add(DiagnosticsProperty('flexActions', _$this.flexActions, + properties.add(DiagnosticsProperty( + 'actionsContainer', _$this.actionsContainer, defaultValue: null)); properties.add( DiagnosticsProperty('modifiers', _$this.modifiers, defaultValue: null)); @@ -126,16 +127,16 @@ mixin _$DialogSpec on Spec { /// the [DialogSpec] constructor. class DialogSpecAttribute extends SpecAttribute with Diagnosticable { - final FlexBoxSpecAttribute? flexContainer; + final FlexBoxSpecAttribute? container; final TextSpecAttribute? title; final TextSpecAttribute? description; - final FlexSpecAttribute? flexActions; + final FlexSpecAttribute? actionsContainer; const DialogSpecAttribute({ - this.flexContainer, + this.container, this.title, this.description, - this.flexActions, + this.actionsContainer, super.modifiers, super.animated, }); @@ -151,10 +152,10 @@ class DialogSpecAttribute extends SpecAttribute @override DialogSpec resolve(MixData mix) { return DialogSpec( - flexContainer: flexContainer?.resolve(mix), + container: container?.resolve(mix), title: title?.resolve(mix), description: description?.resolve(mix), - flexActions: flexActions?.resolve(mix), + actionsContainer: actionsContainer?.resolve(mix), modifiers: modifiers?.resolve(mix), animated: animated?.resolve(mix) ?? mix.animation, ); @@ -173,11 +174,11 @@ class DialogSpecAttribute extends SpecAttribute if (other == null) return this; return DialogSpecAttribute( - flexContainer: - flexContainer?.merge(other.flexContainer) ?? other.flexContainer, + container: container?.merge(other.container) ?? other.container, title: title?.merge(other.title) ?? other.title, description: description?.merge(other.description) ?? other.description, - flexActions: flexActions?.merge(other.flexActions) ?? other.flexActions, + actionsContainer: actionsContainer?.merge(other.actionsContainer) ?? + other.actionsContainer, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, animated: animated?.merge(other.animated) ?? other.animated, ); @@ -189,10 +190,10 @@ class DialogSpecAttribute extends SpecAttribute /// compare two [DialogSpecAttribute] instances for equality. @override List get props => [ - flexContainer, + container, title, description, - flexActions, + actionsContainer, modifiers, animated, ]; @@ -200,13 +201,13 @@ class DialogSpecAttribute extends SpecAttribute @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); - properties.add(DiagnosticsProperty('flexContainer', flexContainer, - defaultValue: null)); + properties + .add(DiagnosticsProperty('container', container, defaultValue: null)); properties.add(DiagnosticsProperty('title', title, defaultValue: null)); properties.add( DiagnosticsProperty('description', description, defaultValue: null)); - properties.add( - DiagnosticsProperty('flexActions', flexActions, defaultValue: null)); + properties.add(DiagnosticsProperty('actionsContainer', actionsContainer, + defaultValue: null)); properties .add(DiagnosticsProperty('modifiers', modifiers, defaultValue: null)); properties @@ -220,8 +221,8 @@ class DialogSpecAttribute extends SpecAttribute /// Use the methods of this class to configure specific properties of a [DialogSpec]. class DialogSpecUtility extends SpecUtility { - /// Utility for defining [DialogSpecAttribute.flexContainer] - late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); + /// Utility for defining [DialogSpecAttribute.container] + late final container = FlexBoxSpecUtility((v) => only(container: v)); /// Utility for defining [DialogSpecAttribute.title] late final title = TextSpecUtility((v) => only(title: v)); @@ -229,8 +230,9 @@ class DialogSpecUtility /// Utility for defining [DialogSpecAttribute.description] late final description = TextSpecUtility((v) => only(description: v)); - /// Utility for defining [DialogSpecAttribute.flexActions] - late final flexActions = FlexSpecUtility((v) => only(flexActions: v)); + /// Utility for defining [DialogSpecAttribute.actionsContainer] + late final actionsContainer = + FlexSpecUtility((v) => only(actionsContainer: v)); /// Utility for defining [DialogSpecAttribute.modifiers] late final wrap = SpecModifierUtility((v) => only(modifiers: v)); @@ -249,18 +251,18 @@ class DialogSpecUtility /// Returns a new [DialogSpecAttribute] with the specified properties. @override T only({ - FlexBoxSpecAttribute? flexContainer, + FlexBoxSpecAttribute? container, TextSpecAttribute? title, TextSpecAttribute? description, - FlexSpecAttribute? flexActions, + FlexSpecAttribute? actionsContainer, WidgetModifiersDataDto? modifiers, AnimatedDataDto? animated, }) { return builder(DialogSpecAttribute( - flexContainer: flexContainer, + container: container, title: title, description: description, - flexActions: flexActions, + actionsContainer: actionsContainer, modifiers: modifiers, animated: animated, )); diff --git a/packages/remix/lib/src/components/dialog/dialog_style.dart b/packages/remix/lib/src/components/dialog/dialog_style.dart index c48a23c32..bb1d5fca2 100644 --- a/packages/remix/lib/src/components/dialog/dialog_style.dart +++ b/packages/remix/lib/src/components/dialog/dialog_style.dart @@ -7,7 +7,7 @@ class DialogStyle extends SpecStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final flexContainerStyle = $.flexContainer.chain + final containerStyle = $.container.chain ..padding.all(16) ..borderRadius.all(8) ..color.white() @@ -18,7 +18,7 @@ class DialogStyle extends SpecStyle { ..flex.crossAxisAlignment.start() ..flex.direction.vertical(); - final actionsLayout = $.flexActions.chain + final actionsContainer = $.actionsContainer.chain ..mainAxisSize.max() ..mainAxisAlignment.end() ..gap(12) @@ -37,10 +37,10 @@ class DialogStyle extends SpecStyle { return Style.create( [ $with.align(alignment: Alignment.center), - flexContainerStyle, + containerStyle, titleStyle, descriptionStyle, - actionsLayout, + actionsContainer, ], ); } @@ -55,7 +55,7 @@ class DialogDarkStyle extends DialogStyle { return Style.create([ super.makeStyle(spec).call(), - $.flexContainer.chain + $.container.chain ..color.black() ..border.all.width(1) ..border.color.grey.shade900(), diff --git a/packages/remix/lib/src/components/dialog/dialog_theme.dart b/packages/remix/lib/src/components/dialog/dialog_theme.dart index ce8a61a7f..7426150b4 100644 --- a/packages/remix/lib/src/components/dialog/dialog_theme.dart +++ b/packages/remix/lib/src/components/dialog/dialog_theme.dart @@ -7,7 +7,7 @@ class FortalezaDialogStyle extends DialogStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final flexContainerStyle = $.flexContainer.chain + final containerStyle = $.container.chain ..padding.all.$space(4) ..borderRadius.all.$radius(2) ..border.all.color.$neutral(6) @@ -24,7 +24,7 @@ class FortalezaDialogStyle extends DialogStyle { return Style.create( [ super.makeStyle(spec).call(), - flexContainerStyle, + containerStyle, titleStyle, descriptionStyle, ], diff --git a/packages/remix/lib/src/components/dialog/dialog_widget.dart b/packages/remix/lib/src/components/dialog/dialog_widget.dart index 06ef4a7ae..50971bd63 100644 --- a/packages/remix/lib/src/components/dialog/dialog_widget.dart +++ b/packages/remix/lib/src/components/dialog/dialog_widget.dart @@ -76,7 +76,7 @@ class Dialog extends StatelessWidget { builder: (context) { final spec = DialogSpec.of(context); - return spec.flexContainer( + return spec.container( direction: Axis.vertical, children: [ if (titleBuilder != null) titleBuilder!(spec.title), @@ -84,7 +84,7 @@ class Dialog extends StatelessWidget { descriptionBuilder!(spec.description), content ?? const SizedBox.shrink(), if (actions != null) - spec.flexActions( + spec.actionsContainer( direction: Axis.horizontal, children: actions!, ), From 9da20a7af8520fa145440f4585c56484db88e511 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Fri, 15 Nov 2024 14:33:16 -0300 Subject: [PATCH 53/57] menu item --- .../src/components/menu_item/menu_item.dart | 12 +-- .../src/components/menu_item/menu_item.g.dart | 78 ++++++++++--------- .../components/menu_item/menu_item_style.dart | 8 +- .../components/menu_item/menu_item_theme.dart | 8 +- .../menu_item/menu_item_widget.dart | 4 +- 5 files changed, 56 insertions(+), 54 deletions(-) diff --git a/packages/remix/lib/src/components/menu_item/menu_item.dart b/packages/remix/lib/src/components/menu_item/menu_item.dart index ab623d3c8..273c5e3d7 100644 --- a/packages/remix/lib/src/components/menu_item/menu_item.dart +++ b/packages/remix/lib/src/components/menu_item/menu_item.dart @@ -15,8 +15,8 @@ part 'menu_item_widget.dart'; @MixableSpec() class MenuItemSpec extends Spec with _$MenuItemSpec, Diagnosticable { - final FlexBoxSpec flexContainer; - final FlexSpec titleSubtitleFlex; + final FlexBoxSpec container; + final FlexSpec titleSubtitleContainer; final IconSpec icon; final TextSpec title; final TextSpec subtitle; @@ -27,15 +27,15 @@ class MenuItemSpec extends Spec static const from = _$MenuItemSpec.from; const MenuItemSpec({ - FlexBoxSpec? flexContainer, - FlexSpec? titleSubtitleFlex, + FlexBoxSpec? container, + FlexSpec? titleSubtitleContainer, IconSpec? icon, TextSpec? title, TextSpec? subtitle, super.modifiers, super.animated, - }) : flexContainer = flexContainer ?? const FlexBoxSpec(), - titleSubtitleFlex = titleSubtitleFlex ?? const FlexSpec(), + }) : container = container ?? const FlexBoxSpec(), + titleSubtitleContainer = titleSubtitleContainer ?? const FlexSpec(), icon = icon ?? const IconSpec(), title = title ?? const TextSpec(), subtitle = subtitle ?? const TextSpec(); diff --git a/packages/remix/lib/src/components/menu_item/menu_item.g.dart b/packages/remix/lib/src/components/menu_item/menu_item.g.dart index 1b30696b2..89733cb60 100644 --- a/packages/remix/lib/src/components/menu_item/menu_item.g.dart +++ b/packages/remix/lib/src/components/menu_item/menu_item.g.dart @@ -33,8 +33,8 @@ mixin _$MenuItemSpec on Spec { /// replaced with the new values. @override MenuItemSpec copyWith({ - FlexBoxSpec? flexContainer, - FlexSpec? titleSubtitleFlex, + FlexBoxSpec? container, + FlexSpec? titleSubtitleContainer, IconSpec? icon, TextSpec? title, TextSpec? subtitle, @@ -42,8 +42,9 @@ mixin _$MenuItemSpec on Spec { AnimatedData? animated, }) { return MenuItemSpec( - flexContainer: flexContainer ?? _$this.flexContainer, - titleSubtitleFlex: titleSubtitleFlex ?? _$this.titleSubtitleFlex, + container: container ?? _$this.container, + titleSubtitleContainer: + titleSubtitleContainer ?? _$this.titleSubtitleContainer, icon: icon ?? _$this.icon, title: title ?? _$this.title, subtitle: subtitle ?? _$this.subtitle, @@ -63,8 +64,8 @@ mixin _$MenuItemSpec on Spec { /// The interpolation is performed on each property of the [MenuItemSpec] using the appropriate /// interpolation method: /// - /// - [FlexBoxSpec.lerp] for [flexContainer]. - /// - [FlexSpec.lerp] for [titleSubtitleFlex]. + /// - [FlexBoxSpec.lerp] for [container]. + /// - [FlexSpec.lerp] for [titleSubtitleContainer]. /// - [IconSpec.lerp] for [icon]. /// - [TextSpec.lerp] for [title] and [subtitle]. @@ -79,9 +80,9 @@ mixin _$MenuItemSpec on Spec { if (other == null) return _$this; return MenuItemSpec( - flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), - titleSubtitleFlex: - _$this.titleSubtitleFlex.lerp(other.titleSubtitleFlex, t), + container: _$this.container.lerp(other.container, t), + titleSubtitleContainer: + _$this.titleSubtitleContainer.lerp(other.titleSubtitleContainer, t), icon: _$this.icon.lerp(other.icon, t), title: _$this.title.lerp(other.title, t), subtitle: _$this.subtitle.lerp(other.subtitle, t), @@ -96,8 +97,8 @@ mixin _$MenuItemSpec on Spec { /// compare two [MenuItemSpec] instances for equality. @override List get props => [ - _$this.flexContainer, - _$this.titleSubtitleFlex, + _$this.container, + _$this.titleSubtitleContainer, _$this.icon, _$this.title, _$this.subtitle, @@ -108,10 +109,10 @@ mixin _$MenuItemSpec on Spec { MenuItemSpec get _$this => this as MenuItemSpec; void _debugFillProperties(DiagnosticPropertiesBuilder properties) { - properties.add(DiagnosticsProperty('flexContainer', _$this.flexContainer, - defaultValue: null)); + properties.add( + DiagnosticsProperty('container', _$this.container, defaultValue: null)); properties.add(DiagnosticsProperty( - 'titleSubtitleFlex', _$this.titleSubtitleFlex, + 'titleSubtitleContainer', _$this.titleSubtitleContainer, defaultValue: null)); properties .add(DiagnosticsProperty('icon', _$this.icon, defaultValue: null)); @@ -135,15 +136,15 @@ mixin _$MenuItemSpec on Spec { /// the [MenuItemSpec] constructor. class MenuItemSpecAttribute extends SpecAttribute with Diagnosticable { - final FlexBoxSpecAttribute? flexContainer; - final FlexSpecAttribute? titleSubtitleFlex; + final FlexBoxSpecAttribute? container; + final FlexSpecAttribute? titleSubtitleContainer; final IconSpecAttribute? icon; final TextSpecAttribute? title; final TextSpecAttribute? subtitle; const MenuItemSpecAttribute({ - this.flexContainer, - this.titleSubtitleFlex, + this.container, + this.titleSubtitleContainer, this.icon, this.title, this.subtitle, @@ -162,8 +163,8 @@ class MenuItemSpecAttribute extends SpecAttribute @override MenuItemSpec resolve(MixData mix) { return MenuItemSpec( - flexContainer: flexContainer?.resolve(mix), - titleSubtitleFlex: titleSubtitleFlex?.resolve(mix), + container: container?.resolve(mix), + titleSubtitleContainer: titleSubtitleContainer?.resolve(mix), icon: icon?.resolve(mix), title: title?.resolve(mix), subtitle: subtitle?.resolve(mix), @@ -185,10 +186,10 @@ class MenuItemSpecAttribute extends SpecAttribute if (other == null) return this; return MenuItemSpecAttribute( - flexContainer: - flexContainer?.merge(other.flexContainer) ?? other.flexContainer, - titleSubtitleFlex: titleSubtitleFlex?.merge(other.titleSubtitleFlex) ?? - other.titleSubtitleFlex, + container: container?.merge(other.container) ?? other.container, + titleSubtitleContainer: + titleSubtitleContainer?.merge(other.titleSubtitleContainer) ?? + other.titleSubtitleContainer, icon: icon?.merge(other.icon) ?? other.icon, title: title?.merge(other.title) ?? other.title, subtitle: subtitle?.merge(other.subtitle) ?? other.subtitle, @@ -203,8 +204,8 @@ class MenuItemSpecAttribute extends SpecAttribute /// compare two [MenuItemSpecAttribute] instances for equality. @override List get props => [ - flexContainer, - titleSubtitleFlex, + container, + titleSubtitleContainer, icon, title, subtitle, @@ -215,9 +216,10 @@ class MenuItemSpecAttribute extends SpecAttribute @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); - properties.add(DiagnosticsProperty('flexContainer', flexContainer, - defaultValue: null)); - properties.add(DiagnosticsProperty('titleSubtitleFlex', titleSubtitleFlex, + properties + .add(DiagnosticsProperty('container', container, defaultValue: null)); + properties.add(DiagnosticsProperty( + 'titleSubtitleContainer', titleSubtitleContainer, defaultValue: null)); properties.add(DiagnosticsProperty('icon', icon, defaultValue: null)); properties.add(DiagnosticsProperty('title', title, defaultValue: null)); @@ -236,12 +238,12 @@ class MenuItemSpecAttribute extends SpecAttribute /// Use the methods of this class to configure specific properties of a [MenuItemSpec]. class MenuItemSpecUtility extends SpecUtility { - /// Utility for defining [MenuItemSpecAttribute.flexContainer] - late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); + /// Utility for defining [MenuItemSpecAttribute.container] + late final container = FlexBoxSpecUtility((v) => only(container: v)); - /// Utility for defining [MenuItemSpecAttribute.titleSubtitleFlex] - late final titleSubtitleFlex = - FlexSpecUtility((v) => only(titleSubtitleFlex: v)); + /// Utility for defining [MenuItemSpecAttribute.titleSubtitleContainer] + late final titleSubtitleContainer = + FlexSpecUtility((v) => only(titleSubtitleContainer: v)); /// Utility for defining [MenuItemSpecAttribute.icon] late final icon = IconSpecUtility((v) => only(icon: v)); @@ -269,8 +271,8 @@ class MenuItemSpecUtility /// Returns a new [MenuItemSpecAttribute] with the specified properties. @override T only({ - FlexBoxSpecAttribute? flexContainer, - FlexSpecAttribute? titleSubtitleFlex, + FlexBoxSpecAttribute? container, + FlexSpecAttribute? titleSubtitleContainer, IconSpecAttribute? icon, TextSpecAttribute? title, TextSpecAttribute? subtitle, @@ -278,8 +280,8 @@ class MenuItemSpecUtility AnimatedDataDto? animated, }) { return builder(MenuItemSpecAttribute( - flexContainer: flexContainer, - titleSubtitleFlex: titleSubtitleFlex, + container: container, + titleSubtitleContainer: titleSubtitleContainer, icon: icon, title: title, subtitle: subtitle, diff --git a/packages/remix/lib/src/components/menu_item/menu_item_style.dart b/packages/remix/lib/src/components/menu_item/menu_item_style.dart index 20d65c9e3..80f01a850 100644 --- a/packages/remix/lib/src/components/menu_item/menu_item_style.dart +++ b/packages/remix/lib/src/components/menu_item/menu_item_style.dart @@ -7,7 +7,7 @@ class MenuItemStyle extends SpecStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final titleSubtitleFlex = $.titleSubtitleFlex.chain + final titleSubtitleContainer = $.titleSubtitleContainer.chain ..mainAxisAlignment.start() ..crossAxisAlignment.start() ..mainAxisSize.min() @@ -21,7 +21,7 @@ class MenuItemStyle extends SpecStyle { ..style.color.grey.shade600() ..maxLines(2); - final flexContainer = $.flexContainer.chain + final container = $.container.chain ..flex.gap(12) ..padding(12) ..borderRadius(12); @@ -36,8 +36,8 @@ class MenuItemStyle extends SpecStyle { ); return Style.create([ - titleSubtitleFlex, - flexContainer, + titleSubtitleContainer, + container, title, subtitle, icon, diff --git a/packages/remix/lib/src/components/menu_item/menu_item_theme.dart b/packages/remix/lib/src/components/menu_item/menu_item_theme.dart index 9e290ed10..26cb4ed49 100644 --- a/packages/remix/lib/src/components/menu_item/menu_item_theme.dart +++ b/packages/remix/lib/src/components/menu_item/menu_item_theme.dart @@ -8,7 +8,7 @@ class FortalezaMenuItemStyle extends MenuItemStyle { final $ = spec.utilities; final baseStyle = super.makeStyle(spec); - final titleSubtitleLayout = $.titleSubtitleFlex.chain..gap.$space(1); + final titleSubtitleLayout = $.titleSubtitleContainer.chain..gap.$space(1); final title = $.title.chain ..style.$text(2) @@ -20,7 +20,7 @@ class FortalezaMenuItemStyle extends MenuItemStyle { ..style.color.resetDirectives() ..style.color.$neutral(9); - final flexContainer = $.flexContainer.chain + final container = $.container.chain ..padding.all.$space(3) ..padding.right.$space(4) ..borderRadius.all.$radius(2) @@ -28,7 +28,7 @@ class FortalezaMenuItemStyle extends MenuItemStyle { final icon = $.icon.color.$neutral(11); - final hovered = $.flexContainer.color.$accent(3); + final hovered = $.container.color.$accent(3); final disabled = $.chain ..title.style.color.$neutral(9) @@ -38,7 +38,7 @@ class FortalezaMenuItemStyle extends MenuItemStyle { return Style.create([ baseStyle(), titleSubtitleLayout, - flexContainer, + container, title, subtitle, icon, diff --git a/packages/remix/lib/src/components/menu_item/menu_item_widget.dart b/packages/remix/lib/src/components/menu_item/menu_item_widget.dart index 0b2cdc072..29250f659 100644 --- a/packages/remix/lib/src/components/menu_item/menu_item_widget.dart +++ b/packages/remix/lib/src/components/menu_item/menu_item_widget.dart @@ -72,12 +72,12 @@ class MenuItem extends StatelessWidget { builder: (context) { final spec = MenuItemSpec.of(context); - return spec.flexContainer( + return spec.container( direction: Axis.horizontal, children: [ if (leadingWidgetBuilder != null) leadingWidgetBuilder!(spec.icon), - spec.titleSubtitleFlex( + spec.titleSubtitleContainer( direction: Axis.vertical, children: [ spec.title(title), From 2ca725ba8f262e9068472e0599f42407ed24d1f0 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Fri, 15 Nov 2024 14:35:08 -0300 Subject: [PATCH 54/57] radio --- .../remix/lib/src/components/radio/radio.dart | 6 +-- .../lib/src/components/radio/radio.g.dart | 37 +++++++++---------- .../lib/src/components/radio/radio_style.dart | 4 +- .../src/components/radio/radio_widget.dart | 2 +- 4 files changed, 24 insertions(+), 25 deletions(-) diff --git a/packages/remix/lib/src/components/radio/radio.dart b/packages/remix/lib/src/components/radio/radio.dart index 8be467577..12ad979d0 100644 --- a/packages/remix/lib/src/components/radio/radio.dart +++ b/packages/remix/lib/src/components/radio/radio.dart @@ -16,7 +16,7 @@ part 'radio_widget.dart'; base class RadioSpec extends Spec with _$RadioSpec, Diagnosticable { final BoxSpec indicatorContainer; final BoxSpec indicator; - final FlexBoxSpec flexContainer; + final FlexBoxSpec container; final TextSpec text; /// {@macro radio_spec_of} @@ -27,14 +27,14 @@ base class RadioSpec extends Spec with _$RadioSpec, Diagnosticable { const RadioSpec({ BoxSpec? indicatorContainer, BoxSpec? indicator, - FlexBoxSpec? flexContainer, + FlexBoxSpec? container, TextSpec? text, super.modifiers, super.animated, }) : indicatorContainer = indicatorContainer ?? const BoxSpec(), indicator = indicator ?? const BoxSpec(), text = text ?? const TextSpec(), - flexContainer = flexContainer ?? const FlexBoxSpec(); + container = container ?? const FlexBoxSpec(); @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { diff --git a/packages/remix/lib/src/components/radio/radio.g.dart b/packages/remix/lib/src/components/radio/radio.g.dart index f02ad9fcd..411bfa5d1 100644 --- a/packages/remix/lib/src/components/radio/radio.g.dart +++ b/packages/remix/lib/src/components/radio/radio.g.dart @@ -35,7 +35,7 @@ mixin _$RadioSpec on Spec { RadioSpec copyWith({ BoxSpec? indicatorContainer, BoxSpec? indicator, - FlexBoxSpec? flexContainer, + FlexBoxSpec? container, TextSpec? text, WidgetModifiersData? modifiers, AnimatedData? animated, @@ -43,7 +43,7 @@ mixin _$RadioSpec on Spec { return RadioSpec( indicatorContainer: indicatorContainer ?? _$this.indicatorContainer, indicator: indicator ?? _$this.indicator, - flexContainer: flexContainer ?? _$this.flexContainer, + container: container ?? _$this.container, text: text ?? _$this.text, modifiers: modifiers ?? _$this.modifiers, animated: animated ?? _$this.animated, @@ -62,7 +62,7 @@ mixin _$RadioSpec on Spec { /// interpolation method: /// /// - [BoxSpec.lerp] for [indicatorContainer] and [indicator]. - /// - [FlexBoxSpec.lerp] for [flexContainer]. + /// - [FlexBoxSpec.lerp] for [container]. /// - [TextSpec.lerp] for [text]. /// For [modifiers] and [animated], the interpolation is performed using a step function. @@ -79,7 +79,7 @@ mixin _$RadioSpec on Spec { indicatorContainer: _$this.indicatorContainer.lerp(other.indicatorContainer, t), indicator: _$this.indicator.lerp(other.indicator, t), - flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), + container: _$this.container.lerp(other.container, t), text: _$this.text.lerp(other.text, t), modifiers: other.modifiers, animated: t < 0.5 ? _$this.animated : other.animated, @@ -94,7 +94,7 @@ mixin _$RadioSpec on Spec { List get props => [ _$this.indicatorContainer, _$this.indicator, - _$this.flexContainer, + _$this.container, _$this.text, _$this.modifiers, _$this.animated, @@ -108,8 +108,8 @@ mixin _$RadioSpec on Spec { defaultValue: null)); properties.add( DiagnosticsProperty('indicator', _$this.indicator, defaultValue: null)); - properties.add(DiagnosticsProperty('flexContainer', _$this.flexContainer, - defaultValue: null)); + properties.add( + DiagnosticsProperty('container', _$this.container, defaultValue: null)); properties .add(DiagnosticsProperty('text', _$this.text, defaultValue: null)); properties.add( @@ -130,13 +130,13 @@ base class RadioSpecAttribute extends SpecAttribute with Diagnosticable { final BoxSpecAttribute? indicatorContainer; final BoxSpecAttribute? indicator; - final FlexBoxSpecAttribute? flexContainer; + final FlexBoxSpecAttribute? container; final TextSpecAttribute? text; const RadioSpecAttribute({ this.indicatorContainer, this.indicator, - this.flexContainer, + this.container, this.text, super.modifiers, super.animated, @@ -155,7 +155,7 @@ base class RadioSpecAttribute extends SpecAttribute return RadioSpec( indicatorContainer: indicatorContainer?.resolve(mix), indicator: indicator?.resolve(mix), - flexContainer: flexContainer?.resolve(mix), + container: container?.resolve(mix), text: text?.resolve(mix), modifiers: modifiers?.resolve(mix), animated: animated?.resolve(mix) ?? mix.animation, @@ -178,8 +178,7 @@ base class RadioSpecAttribute extends SpecAttribute indicatorContainer: indicatorContainer?.merge(other.indicatorContainer) ?? other.indicatorContainer, indicator: indicator?.merge(other.indicator) ?? other.indicator, - flexContainer: - flexContainer?.merge(other.flexContainer) ?? other.flexContainer, + container: container?.merge(other.container) ?? other.container, text: text?.merge(other.text) ?? other.text, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, animated: animated?.merge(other.animated) ?? other.animated, @@ -194,7 +193,7 @@ base class RadioSpecAttribute extends SpecAttribute List get props => [ indicatorContainer, indicator, - flexContainer, + container, text, modifiers, animated, @@ -207,8 +206,8 @@ base class RadioSpecAttribute extends SpecAttribute defaultValue: null)); properties .add(DiagnosticsProperty('indicator', indicator, defaultValue: null)); - properties.add(DiagnosticsProperty('flexContainer', flexContainer, - defaultValue: null)); + properties + .add(DiagnosticsProperty('container', container, defaultValue: null)); properties.add(DiagnosticsProperty('text', text, defaultValue: null)); properties .add(DiagnosticsProperty('modifiers', modifiers, defaultValue: null)); @@ -230,8 +229,8 @@ class RadioSpecUtility /// Utility for defining [RadioSpecAttribute.indicator] late final indicator = BoxSpecUtility((v) => only(indicator: v)); - /// Utility for defining [RadioSpecAttribute.flexContainer] - late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); + /// Utility for defining [RadioSpecAttribute.container] + late final container = FlexBoxSpecUtility((v) => only(container: v)); /// Utility for defining [RadioSpecAttribute.text] late final text = TextSpecUtility((v) => only(text: v)); @@ -255,7 +254,7 @@ class RadioSpecUtility T only({ BoxSpecAttribute? indicatorContainer, BoxSpecAttribute? indicator, - FlexBoxSpecAttribute? flexContainer, + FlexBoxSpecAttribute? container, TextSpecAttribute? text, WidgetModifiersDataDto? modifiers, AnimatedDataDto? animated, @@ -263,7 +262,7 @@ class RadioSpecUtility return builder(RadioSpecAttribute( indicatorContainer: indicatorContainer, indicator: indicator, - flexContainer: flexContainer, + container: container, text: text, modifiers: modifiers, animated: animated, diff --git a/packages/remix/lib/src/components/radio/radio_style.dart b/packages/remix/lib/src/components/radio/radio_style.dart index 18f8cc8db..0a02782e1 100644 --- a/packages/remix/lib/src/components/radio/radio_style.dart +++ b/packages/remix/lib/src/components/radio/radio_style.dart @@ -34,7 +34,7 @@ class RadioStyle extends SpecStyle { ..style.fontWeight.w500() ..textHeightBehavior.heightToFirstAscent.off(); - final layoutStyle = $.flexContainer.chain + final containerStyle = $.container.chain ..flex.row() ..flex.mainAxisSize.min() ..flex.mainAxisAlignment.start() @@ -47,7 +47,7 @@ class RadioStyle extends SpecStyle { ...indicatorContainerStyle, ...indicatorStyle, textStyle, - layoutStyle, + containerStyle, disabledStyle, ]); } diff --git a/packages/remix/lib/src/components/radio/radio_widget.dart b/packages/remix/lib/src/components/radio/radio_widget.dart index 3d047a34a..19c4495fc 100644 --- a/packages/remix/lib/src/components/radio/radio_widget.dart +++ b/packages/remix/lib/src/components/radio/radio_widget.dart @@ -94,7 +94,7 @@ class _RadioState extends State> { final ContainerWidget = spec.indicatorContainer; final IndicatorWidget = spec.indicator; - final FlexWidget = spec.flexContainer; + final FlexWidget = spec.container; final TextWidget = spec.text; return FlexWidget( From d8cf401d5f92776bc69a1e39cecb3b756eabb747 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Fri, 15 Nov 2024 14:38:21 -0300 Subject: [PATCH 55/57] segmentedControl --- .../segmented_control/segmented_control.dart | 6 ++-- .../segmented_control.g.dart | 32 +++++++++---------- .../segmented_control_style.dart | 6 ++-- .../segmented_control_widget.dart | 3 +- 4 files changed, 24 insertions(+), 23 deletions(-) diff --git a/packages/remix/lib/src/components/segmented_control/segmented_control.dart b/packages/remix/lib/src/components/segmented_control/segmented_control.dart index d6ec17429..a176f4ea0 100644 --- a/packages/remix/lib/src/components/segmented_control/segmented_control.dart +++ b/packages/remix/lib/src/components/segmented_control/segmented_control.dart @@ -19,7 +19,7 @@ final $segmentedControl = SegmentedControlSpecUtility.self; class SegmentedControlSpec extends Spec with _$SegmentedControlSpec, Diagnosticable { final BoxSpec container; - final FlexSpec layout; + final FlexSpec flex; final BoxSpec divider; final bool showDivider; @@ -33,13 +33,13 @@ class SegmentedControlSpec extends Spec const SegmentedControlSpec({ BoxSpec? container, - FlexSpec? layout, + FlexSpec? flex, bool? showDivider, BoxSpec? divider, SegmentButtonSpec? item, super.modifiers, super.animated, - }) : layout = layout ?? const FlexSpec(), + }) : flex = flex ?? const FlexSpec(), container = container ?? const BoxSpec(), showDivider = showDivider ?? false, item = item ?? const SegmentButtonSpec(), diff --git a/packages/remix/lib/src/components/segmented_control/segmented_control.g.dart b/packages/remix/lib/src/components/segmented_control/segmented_control.g.dart index 17c27c0eb..b24f591a1 100644 --- a/packages/remix/lib/src/components/segmented_control/segmented_control.g.dart +++ b/packages/remix/lib/src/components/segmented_control/segmented_control.g.dart @@ -34,7 +34,7 @@ mixin _$SegmentedControlSpec on Spec { @override SegmentedControlSpec copyWith({ BoxSpec? container, - FlexSpec? layout, + FlexSpec? flex, bool? showDivider, BoxSpec? divider, SegmentButtonSpec? item, @@ -43,7 +43,7 @@ mixin _$SegmentedControlSpec on Spec { }) { return SegmentedControlSpec( container: container ?? _$this.container, - layout: layout ?? _$this.layout, + flex: flex ?? _$this.flex, showDivider: showDivider ?? _$this.showDivider, divider: divider ?? _$this.divider, item: item ?? _$this.item, @@ -64,7 +64,7 @@ mixin _$SegmentedControlSpec on Spec { /// interpolation method: /// /// - [BoxSpec.lerp] for [container] and [divider]. - /// - [FlexSpec.lerp] for [layout]. + /// - [FlexSpec.lerp] for [flex]. /// For [showDivider] and [item] and [modifiers] and [animated], the interpolation is performed using a step function. /// If [t] is less than 0.5, the value from the current [SegmentedControlSpec] is used. Otherwise, the value @@ -78,7 +78,7 @@ mixin _$SegmentedControlSpec on Spec { return SegmentedControlSpec( container: _$this.container.lerp(other.container, t), - layout: _$this.layout.lerp(other.layout, t), + flex: _$this.flex.lerp(other.flex, t), showDivider: t < 0.5 ? _$this.showDivider : other.showDivider, divider: _$this.divider.lerp(other.divider, t), item: _$this.item.lerp(other.item, t), @@ -94,7 +94,7 @@ mixin _$SegmentedControlSpec on Spec { @override List get props => [ _$this.container, - _$this.layout, + _$this.flex, _$this.showDivider, _$this.divider, _$this.item, @@ -108,7 +108,7 @@ mixin _$SegmentedControlSpec on Spec { properties.add( DiagnosticsProperty('container', _$this.container, defaultValue: null)); properties - .add(DiagnosticsProperty('layout', _$this.layout, defaultValue: null)); + .add(DiagnosticsProperty('flex', _$this.flex, defaultValue: null)); properties.add(DiagnosticsProperty('showDivider', _$this.showDivider, defaultValue: null)); properties.add( @@ -132,14 +132,14 @@ mixin _$SegmentedControlSpec on Spec { class SegmentedControlSpecAttribute extends SpecAttribute with Diagnosticable { final BoxSpecAttribute? container; - final FlexSpecAttribute? layout; + final FlexSpecAttribute? flex; final bool? showDivider; final BoxSpecAttribute? divider; final SegmentButtonSpecAttribute? item; const SegmentedControlSpecAttribute({ this.container, - this.layout, + this.flex, this.showDivider, this.divider, this.item, @@ -159,7 +159,7 @@ class SegmentedControlSpecAttribute extends SpecAttribute SegmentedControlSpec resolve(MixData mix) { return SegmentedControlSpec( container: container?.resolve(mix), - layout: layout?.resolve(mix), + flex: flex?.resolve(mix), showDivider: showDivider, divider: divider?.resolve(mix), item: item?.resolve(mix), @@ -183,7 +183,7 @@ class SegmentedControlSpecAttribute extends SpecAttribute return SegmentedControlSpecAttribute( container: container?.merge(other.container) ?? other.container, - layout: layout?.merge(other.layout) ?? other.layout, + flex: flex?.merge(other.flex) ?? other.flex, showDivider: other.showDivider ?? showDivider, divider: divider?.merge(other.divider) ?? other.divider, item: item?.merge(other.item) ?? other.item, @@ -199,7 +199,7 @@ class SegmentedControlSpecAttribute extends SpecAttribute @override List get props => [ container, - layout, + flex, showDivider, divider, item, @@ -212,7 +212,7 @@ class SegmentedControlSpecAttribute extends SpecAttribute super.debugFillProperties(properties); properties .add(DiagnosticsProperty('container', container, defaultValue: null)); - properties.add(DiagnosticsProperty('layout', layout, defaultValue: null)); + properties.add(DiagnosticsProperty('flex', flex, defaultValue: null)); properties.add( DiagnosticsProperty('showDivider', showDivider, defaultValue: null)); properties.add(DiagnosticsProperty('divider', divider, defaultValue: null)); @@ -233,8 +233,8 @@ class SegmentedControlSpecUtility /// Utility for defining [SegmentedControlSpecAttribute.container] late final container = BoxSpecUtility((v) => only(container: v)); - /// Utility for defining [SegmentedControlSpecAttribute.layout] - late final layout = FlexSpecUtility((v) => only(layout: v)); + /// Utility for defining [SegmentedControlSpecAttribute.flex] + late final flex = FlexSpecUtility((v) => only(flex: v)); /// Utility for defining [SegmentedControlSpecAttribute.showDivider] late final showDivider = BoolUtility((v) => only(showDivider: v)); @@ -263,7 +263,7 @@ class SegmentedControlSpecUtility @override T only({ BoxSpecAttribute? container, - FlexSpecAttribute? layout, + FlexSpecAttribute? flex, bool? showDivider, BoxSpecAttribute? divider, SegmentButtonSpecAttribute? item, @@ -272,7 +272,7 @@ class SegmentedControlSpecUtility }) { return builder(SegmentedControlSpecAttribute( container: container, - layout: layout, + flex: flex, showDivider: showDivider, divider: divider, item: item, diff --git a/packages/remix/lib/src/components/segmented_control/segmented_control_style.dart b/packages/remix/lib/src/components/segmented_control/segmented_control_style.dart index 066ffa52e..0e66e528f 100644 --- a/packages/remix/lib/src/components/segmented_control/segmented_control_style.dart +++ b/packages/remix/lib/src/components/segmented_control/segmented_control_style.dart @@ -25,8 +25,8 @@ class SegmentedControlStyle extends SpecStyle { $.showDivider.off(), ]; - final layoutStyle = [ - $.layout.chain + final flexStyle = [ + $.flex.chain ..row() ..mainAxisSize.min(), ]; @@ -58,7 +58,7 @@ class SegmentedControlStyle extends SpecStyle { return Style.create([ ...containerStyle, ...dividerStyle, - ...layoutStyle, + ...flexStyle, ...itemStyle, ]); } diff --git a/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart b/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart index ae7e9575b..7ce970961 100644 --- a/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart +++ b/packages/remix/lib/src/components/segmented_control/segmented_control_widget.dart @@ -2,6 +2,7 @@ part of 'segmented_control.dart'; const selectedItem = Variant('selectedItem'); +// TODO: Try out the divider using CustomPainter class SegmentedControl extends StatefulWidget { const SegmentedControl({ super.key, @@ -66,7 +67,7 @@ class _SegmentedControlState extends State { child: Stack( alignment: Alignment.centerLeft, children: [ - spec.layout( + spec.flex( direction: Axis.vertical, children: [ for (int i = 0; i < widget.buttons.length; i++) From 3faac274d834a578c36da820e313de3738441029 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Fri, 15 Nov 2024 14:40:52 -0300 Subject: [PATCH 56/57] select --- .../select/button/select_button.dart | 6 +- .../select/button/select_button_widget.dart | 4 +- .../components/select/item/select_menu.dart | 6 +- .../select/item/select_menu_widget.dart | 4 +- .../lib/src/components/select/select.dart | 6 +- .../lib/src/components/select/select.g.dart | 111 +++++++++--------- .../src/components/select/select_style.dart | 22 ++-- .../src/components/select/select_theme.dart | 46 ++++---- .../src/components/select/select_widget.dart | 4 +- 9 files changed, 103 insertions(+), 106 deletions(-) diff --git a/packages/remix/lib/src/components/select/button/select_button.dart b/packages/remix/lib/src/components/select/button/select_button.dart index b85805e88..0cb5e861a 100644 --- a/packages/remix/lib/src/components/select/button/select_button.dart +++ b/packages/remix/lib/src/components/select/button/select_button.dart @@ -3,7 +3,7 @@ part of '../select.dart'; @MixableSpec() class SelectButtonSpec extends Spec with _$SelectButtonSpec, Diagnosticable { - final FlexBoxSpec flexContainer; + final FlexBoxSpec container; final TextSpec label; final IconSpec icon; @@ -13,12 +13,12 @@ class SelectButtonSpec extends Spec static const from = _$SelectButtonSpec.from; const SelectButtonSpec({ - FlexBoxSpec? flexContainer, + FlexBoxSpec? container, IconSpec? icon, TextSpec? label, super.modifiers, super.animated, - }) : flexContainer = flexContainer ?? const FlexBoxSpec(), + }) : container = container ?? const FlexBoxSpec(), icon = icon ?? const IconSpec(), label = label ?? const TextSpec(); diff --git a/packages/remix/lib/src/components/select/button/select_button_widget.dart b/packages/remix/lib/src/components/select/button/select_button_widget.dart index dc8a814e0..4e617a4fc 100644 --- a/packages/remix/lib/src/components/select/button/select_button_widget.dart +++ b/packages/remix/lib/src/components/select/button/select_button_widget.dart @@ -19,11 +19,11 @@ class SelectButtonSpecWidget extends StatelessWidget { builder: (context) { final button = SelectSpec.of(context).button; - final flexContainer = button.flexContainer; + final container = button.container; final label = button.label; final icon = button.icon; - return flexContainer( + return container( direction: Axis.horizontal, children: [label(text), icon(trailingIcon)], ); diff --git a/packages/remix/lib/src/components/select/item/select_menu.dart b/packages/remix/lib/src/components/select/item/select_menu.dart index f3cc6b6b6..b3c122c9a 100644 --- a/packages/remix/lib/src/components/select/item/select_menu.dart +++ b/packages/remix/lib/src/components/select/item/select_menu.dart @@ -5,7 +5,7 @@ base class SelectMenuItemSpec extends Spec with _$SelectMenuItemSpec, Diagnosticable { final IconSpec icon; final TextSpec text; - final FlexBoxSpec flexContainer; + final FlexBoxSpec container; static const of = _$SelectMenuItemSpec.of; @@ -14,12 +14,12 @@ base class SelectMenuItemSpec extends Spec const SelectMenuItemSpec({ IconSpec? icon, TextSpec? text, - FlexBoxSpec? flexContainer, + FlexBoxSpec? container, super.modifiers, super.animated, }) : icon = icon ?? const IconSpec(), text = text ?? const TextSpec(), - flexContainer = flexContainer ?? const FlexBoxSpec(); + container = container ?? const FlexBoxSpec(); @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { diff --git a/packages/remix/lib/src/components/select/item/select_menu_widget.dart b/packages/remix/lib/src/components/select/item/select_menu_widget.dart index 82701985f..c839a3387 100644 --- a/packages/remix/lib/src/components/select/item/select_menu_widget.dart +++ b/packages/remix/lib/src/components/select/item/select_menu_widget.dart @@ -41,11 +41,11 @@ class SelectMenuItemWidget extends StatelessWidget { builder: (context) { final item = SelectSpec.of(context).item; - final flexContainer = item.flexContainer; + final container = item.container; final icon = item.icon; final text = item.text; - return flexContainer( + return container( direction: Axis.horizontal, children: [if (iconData != null) icon(iconData), text(this.text)], ); diff --git a/packages/remix/lib/src/components/select/select.dart b/packages/remix/lib/src/components/select/select.dart index 996514607..3025337de 100644 --- a/packages/remix/lib/src/components/select/select.dart +++ b/packages/remix/lib/src/components/select/select.dart @@ -62,7 +62,7 @@ class SelectSpec extends Spec with _$SelectSpec, Diagnosticable { @MixableSpec() base class SelectMenuSpec extends Spec with _$SelectMenuSpec, Diagnosticable { - final FlexBoxSpec flexContainer; + final FlexBoxSpec container; final bool autoWidth; /// {@macro select_menu_spec_of} @@ -71,11 +71,11 @@ base class SelectMenuSpec extends Spec static const from = _$SelectMenuSpec.from; const SelectMenuSpec({ - FlexBoxSpec? flexContainer, + FlexBoxSpec? container, bool? autoWidth, super.modifiers, super.animated, - }) : flexContainer = flexContainer ?? const FlexBoxSpec(), + }) : container = container ?? const FlexBoxSpec(), autoWidth = autoWidth ?? true; @override diff --git a/packages/remix/lib/src/components/select/select.g.dart b/packages/remix/lib/src/components/select/select.g.dart index 985f31e97..ebfb688ce 100644 --- a/packages/remix/lib/src/components/select/select.g.dart +++ b/packages/remix/lib/src/components/select/select.g.dart @@ -313,13 +313,13 @@ mixin _$SelectMenuSpec on Spec { /// replaced with the new values. @override SelectMenuSpec copyWith({ - FlexBoxSpec? flexContainer, + FlexBoxSpec? container, bool? autoWidth, WidgetModifiersData? modifiers, AnimatedData? animated, }) { return SelectMenuSpec( - flexContainer: flexContainer ?? _$this.flexContainer, + container: container ?? _$this.container, autoWidth: autoWidth ?? _$this.autoWidth, modifiers: modifiers ?? _$this.modifiers, animated: animated ?? _$this.animated, @@ -337,7 +337,7 @@ mixin _$SelectMenuSpec on Spec { /// The interpolation is performed on each property of the [SelectMenuSpec] using the appropriate /// interpolation method: /// - /// - [FlexBoxSpec.lerp] for [flexContainer]. + /// - [FlexBoxSpec.lerp] for [container]. /// For [autoWidth] and [modifiers] and [animated], the interpolation is performed using a step function. /// If [t] is less than 0.5, the value from the current [SelectMenuSpec] is used. Otherwise, the value @@ -350,7 +350,7 @@ mixin _$SelectMenuSpec on Spec { if (other == null) return _$this; return SelectMenuSpec( - flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), + container: _$this.container.lerp(other.container, t), autoWidth: t < 0.5 ? _$this.autoWidth : other.autoWidth, modifiers: other.modifiers, animated: t < 0.5 ? _$this.animated : other.animated, @@ -363,7 +363,7 @@ mixin _$SelectMenuSpec on Spec { /// compare two [SelectMenuSpec] instances for equality. @override List get props => [ - _$this.flexContainer, + _$this.container, _$this.autoWidth, _$this.modifiers, _$this.animated, @@ -372,8 +372,8 @@ mixin _$SelectMenuSpec on Spec { SelectMenuSpec get _$this => this as SelectMenuSpec; void _debugFillProperties(DiagnosticPropertiesBuilder properties) { - properties.add(DiagnosticsProperty('flexContainer', _$this.flexContainer, - defaultValue: null)); + properties.add( + DiagnosticsProperty('container', _$this.container, defaultValue: null)); properties.add( DiagnosticsProperty('autoWidth', _$this.autoWidth, defaultValue: null)); properties.add( @@ -392,11 +392,11 @@ mixin _$SelectMenuSpec on Spec { /// the [SelectMenuSpec] constructor. base class SelectMenuSpecAttribute extends SpecAttribute with Diagnosticable { - final FlexBoxSpecAttribute? flexContainer; + final FlexBoxSpecAttribute? container; final bool? autoWidth; const SelectMenuSpecAttribute({ - this.flexContainer, + this.container, this.autoWidth, super.modifiers, super.animated, @@ -413,7 +413,7 @@ base class SelectMenuSpecAttribute extends SpecAttribute @override SelectMenuSpec resolve(MixData mix) { return SelectMenuSpec( - flexContainer: flexContainer?.resolve(mix), + container: container?.resolve(mix), autoWidth: autoWidth, modifiers: modifiers?.resolve(mix), animated: animated?.resolve(mix) ?? mix.animation, @@ -433,8 +433,7 @@ base class SelectMenuSpecAttribute extends SpecAttribute if (other == null) return this; return SelectMenuSpecAttribute( - flexContainer: - flexContainer?.merge(other.flexContainer) ?? other.flexContainer, + container: container?.merge(other.container) ?? other.container, autoWidth: other.autoWidth ?? autoWidth, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, animated: animated?.merge(other.animated) ?? other.animated, @@ -447,7 +446,7 @@ base class SelectMenuSpecAttribute extends SpecAttribute /// compare two [SelectMenuSpecAttribute] instances for equality. @override List get props => [ - flexContainer, + container, autoWidth, modifiers, animated, @@ -456,8 +455,8 @@ base class SelectMenuSpecAttribute extends SpecAttribute @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); - properties.add(DiagnosticsProperty('flexContainer', flexContainer, - defaultValue: null)); + properties + .add(DiagnosticsProperty('container', container, defaultValue: null)); properties .add(DiagnosticsProperty('autoWidth', autoWidth, defaultValue: null)); properties @@ -473,8 +472,8 @@ base class SelectMenuSpecAttribute extends SpecAttribute /// Use the methods of this class to configure specific properties of a [SelectMenuSpec]. class SelectMenuSpecUtility extends SpecUtility { - /// Utility for defining [SelectMenuSpecAttribute.flexContainer] - late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); + /// Utility for defining [SelectMenuSpecAttribute.container] + late final container = FlexBoxSpecUtility((v) => only(container: v)); /// Utility for defining [SelectMenuSpecAttribute.autoWidth] late final autoWidth = BoolUtility((v) => only(autoWidth: v)); @@ -496,13 +495,13 @@ class SelectMenuSpecUtility /// Returns a new [SelectMenuSpecAttribute] with the specified properties. @override T only({ - FlexBoxSpecAttribute? flexContainer, + FlexBoxSpecAttribute? container, bool? autoWidth, WidgetModifiersDataDto? modifiers, AnimatedDataDto? animated, }) { return builder(SelectMenuSpecAttribute( - flexContainer: flexContainer, + container: container, autoWidth: autoWidth, modifiers: modifiers, animated: animated, @@ -561,14 +560,14 @@ mixin _$SelectButtonSpec on Spec { /// replaced with the new values. @override SelectButtonSpec copyWith({ - FlexBoxSpec? flexContainer, + FlexBoxSpec? container, IconSpec? icon, TextSpec? label, WidgetModifiersData? modifiers, AnimatedData? animated, }) { return SelectButtonSpec( - flexContainer: flexContainer ?? _$this.flexContainer, + container: container ?? _$this.container, icon: icon ?? _$this.icon, label: label ?? _$this.label, modifiers: modifiers ?? _$this.modifiers, @@ -587,7 +586,7 @@ mixin _$SelectButtonSpec on Spec { /// The interpolation is performed on each property of the [SelectButtonSpec] using the appropriate /// interpolation method: /// - /// - [FlexBoxSpec.lerp] for [flexContainer]. + /// - [FlexBoxSpec.lerp] for [container]. /// - [IconSpec.lerp] for [icon]. /// - [TextSpec.lerp] for [label]. @@ -602,7 +601,7 @@ mixin _$SelectButtonSpec on Spec { if (other == null) return _$this; return SelectButtonSpec( - flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), + container: _$this.container.lerp(other.container, t), icon: _$this.icon.lerp(other.icon, t), label: _$this.label.lerp(other.label, t), modifiers: other.modifiers, @@ -616,7 +615,7 @@ mixin _$SelectButtonSpec on Spec { /// compare two [SelectButtonSpec] instances for equality. @override List get props => [ - _$this.flexContainer, + _$this.container, _$this.icon, _$this.label, _$this.modifiers, @@ -626,8 +625,8 @@ mixin _$SelectButtonSpec on Spec { SelectButtonSpec get _$this => this as SelectButtonSpec; void _debugFillProperties(DiagnosticPropertiesBuilder properties) { - properties.add(DiagnosticsProperty('flexContainer', _$this.flexContainer, - defaultValue: null)); + properties.add( + DiagnosticsProperty('container', _$this.container, defaultValue: null)); properties .add(DiagnosticsProperty('icon', _$this.icon, defaultValue: null)); properties @@ -648,12 +647,12 @@ mixin _$SelectButtonSpec on Spec { /// the [SelectButtonSpec] constructor. class SelectButtonSpecAttribute extends SpecAttribute with Diagnosticable { - final FlexBoxSpecAttribute? flexContainer; + final FlexBoxSpecAttribute? container; final IconSpecAttribute? icon; final TextSpecAttribute? label; const SelectButtonSpecAttribute({ - this.flexContainer, + this.container, this.icon, this.label, super.modifiers, @@ -671,7 +670,7 @@ class SelectButtonSpecAttribute extends SpecAttribute @override SelectButtonSpec resolve(MixData mix) { return SelectButtonSpec( - flexContainer: flexContainer?.resolve(mix), + container: container?.resolve(mix), icon: icon?.resolve(mix), label: label?.resolve(mix), modifiers: modifiers?.resolve(mix), @@ -692,8 +691,7 @@ class SelectButtonSpecAttribute extends SpecAttribute if (other == null) return this; return SelectButtonSpecAttribute( - flexContainer: - flexContainer?.merge(other.flexContainer) ?? other.flexContainer, + container: container?.merge(other.container) ?? other.container, icon: icon?.merge(other.icon) ?? other.icon, label: label?.merge(other.label) ?? other.label, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, @@ -707,7 +705,7 @@ class SelectButtonSpecAttribute extends SpecAttribute /// compare two [SelectButtonSpecAttribute] instances for equality. @override List get props => [ - flexContainer, + container, icon, label, modifiers, @@ -717,8 +715,8 @@ class SelectButtonSpecAttribute extends SpecAttribute @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); - properties.add(DiagnosticsProperty('flexContainer', flexContainer, - defaultValue: null)); + properties + .add(DiagnosticsProperty('container', container, defaultValue: null)); properties.add(DiagnosticsProperty('icon', icon, defaultValue: null)); properties.add(DiagnosticsProperty('label', label, defaultValue: null)); properties @@ -734,8 +732,8 @@ class SelectButtonSpecAttribute extends SpecAttribute /// Use the methods of this class to configure specific properties of a [SelectButtonSpec]. class SelectButtonSpecUtility extends SpecUtility { - /// Utility for defining [SelectButtonSpecAttribute.flexContainer] - late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); + /// Utility for defining [SelectButtonSpecAttribute.container] + late final container = FlexBoxSpecUtility((v) => only(container: v)); /// Utility for defining [SelectButtonSpecAttribute.icon] late final icon = IconSpecUtility((v) => only(icon: v)); @@ -760,14 +758,14 @@ class SelectButtonSpecUtility /// Returns a new [SelectButtonSpecAttribute] with the specified properties. @override T only({ - FlexBoxSpecAttribute? flexContainer, + FlexBoxSpecAttribute? container, IconSpecAttribute? icon, TextSpecAttribute? label, WidgetModifiersDataDto? modifiers, AnimatedDataDto? animated, }) { return builder(SelectButtonSpecAttribute( - flexContainer: flexContainer, + container: container, icon: icon, label: label, modifiers: modifiers, @@ -829,14 +827,14 @@ mixin _$SelectMenuItemSpec on Spec { SelectMenuItemSpec copyWith({ IconSpec? icon, TextSpec? text, - FlexBoxSpec? flexContainer, + FlexBoxSpec? container, WidgetModifiersData? modifiers, AnimatedData? animated, }) { return SelectMenuItemSpec( icon: icon ?? _$this.icon, text: text ?? _$this.text, - flexContainer: flexContainer ?? _$this.flexContainer, + container: container ?? _$this.container, modifiers: modifiers ?? _$this.modifiers, animated: animated ?? _$this.animated, ); @@ -855,7 +853,7 @@ mixin _$SelectMenuItemSpec on Spec { /// /// - [IconSpec.lerp] for [icon]. /// - [TextSpec.lerp] for [text]. - /// - [FlexBoxSpec.lerp] for [flexContainer]. + /// - [FlexBoxSpec.lerp] for [container]. /// For [modifiers] and [animated], the interpolation is performed using a step function. /// If [t] is less than 0.5, the value from the current [SelectMenuItemSpec] is used. Otherwise, the value @@ -870,7 +868,7 @@ mixin _$SelectMenuItemSpec on Spec { return SelectMenuItemSpec( icon: _$this.icon.lerp(other.icon, t), text: _$this.text.lerp(other.text, t), - flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), + container: _$this.container.lerp(other.container, t), modifiers: other.modifiers, animated: t < 0.5 ? _$this.animated : other.animated, ); @@ -884,7 +882,7 @@ mixin _$SelectMenuItemSpec on Spec { List get props => [ _$this.icon, _$this.text, - _$this.flexContainer, + _$this.container, _$this.modifiers, _$this.animated, ]; @@ -896,8 +894,8 @@ mixin _$SelectMenuItemSpec on Spec { .add(DiagnosticsProperty('icon', _$this.icon, defaultValue: null)); properties .add(DiagnosticsProperty('text', _$this.text, defaultValue: null)); - properties.add(DiagnosticsProperty('flexContainer', _$this.flexContainer, - defaultValue: null)); + properties.add( + DiagnosticsProperty('container', _$this.container, defaultValue: null)); properties.add( DiagnosticsProperty('modifiers', _$this.modifiers, defaultValue: null)); properties.add( @@ -916,12 +914,12 @@ base class SelectMenuItemSpecAttribute extends SpecAttribute with Diagnosticable { final IconSpecAttribute? icon; final TextSpecAttribute? text; - final FlexBoxSpecAttribute? flexContainer; + final FlexBoxSpecAttribute? container; const SelectMenuItemSpecAttribute({ this.icon, this.text, - this.flexContainer, + this.container, super.modifiers, super.animated, }); @@ -939,7 +937,7 @@ base class SelectMenuItemSpecAttribute extends SpecAttribute return SelectMenuItemSpec( icon: icon?.resolve(mix), text: text?.resolve(mix), - flexContainer: flexContainer?.resolve(mix), + container: container?.resolve(mix), modifiers: modifiers?.resolve(mix), animated: animated?.resolve(mix) ?? mix.animation, ); @@ -961,8 +959,7 @@ base class SelectMenuItemSpecAttribute extends SpecAttribute return SelectMenuItemSpecAttribute( icon: icon?.merge(other.icon) ?? other.icon, text: text?.merge(other.text) ?? other.text, - flexContainer: - flexContainer?.merge(other.flexContainer) ?? other.flexContainer, + container: container?.merge(other.container) ?? other.container, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, animated: animated?.merge(other.animated) ?? other.animated, ); @@ -976,7 +973,7 @@ base class SelectMenuItemSpecAttribute extends SpecAttribute List get props => [ icon, text, - flexContainer, + container, modifiers, animated, ]; @@ -986,8 +983,8 @@ base class SelectMenuItemSpecAttribute extends SpecAttribute super.debugFillProperties(properties); properties.add(DiagnosticsProperty('icon', icon, defaultValue: null)); properties.add(DiagnosticsProperty('text', text, defaultValue: null)); - properties.add(DiagnosticsProperty('flexContainer', flexContainer, - defaultValue: null)); + properties + .add(DiagnosticsProperty('container', container, defaultValue: null)); properties .add(DiagnosticsProperty('modifiers', modifiers, defaultValue: null)); properties @@ -1007,8 +1004,8 @@ class SelectMenuItemSpecUtility /// Utility for defining [SelectMenuItemSpecAttribute.text] late final text = TextSpecUtility((v) => only(text: v)); - /// Utility for defining [SelectMenuItemSpecAttribute.flexContainer] - late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); + /// Utility for defining [SelectMenuItemSpecAttribute.container] + late final container = FlexBoxSpecUtility((v) => only(container: v)); /// Utility for defining [SelectMenuItemSpecAttribute.modifiers] late final wrap = SpecModifierUtility((v) => only(modifiers: v)); @@ -1029,14 +1026,14 @@ class SelectMenuItemSpecUtility T only({ IconSpecAttribute? icon, TextSpecAttribute? text, - FlexBoxSpecAttribute? flexContainer, + FlexBoxSpecAttribute? container, WidgetModifiersDataDto? modifiers, AnimatedDataDto? animated, }) { return builder(SelectMenuItemSpecAttribute( icon: icon, text: text, - flexContainer: flexContainer, + container: container, modifiers: modifiers, animated: animated, )); diff --git a/packages/remix/lib/src/components/select/select_style.dart b/packages/remix/lib/src/components/select/select_style.dart index b191f5d8e..34658099d 100644 --- a/packages/remix/lib/src/components/select/select_style.dart +++ b/packages/remix/lib/src/components/select/select_style.dart @@ -14,7 +14,7 @@ class SelectStyle extends SpecStyle { ]; final buttonStyle = [ - $.button.flexContainer.chain + $.button.container.chain ..flex.mainAxisAlignment.spaceBetween() ..color.white() ..padding.all(10) @@ -27,12 +27,12 @@ class SelectStyle extends SpecStyle { ..style.fontSize(14) ..style.color.black(), spec.on.disabled( - $.button.flexContainer.color(Colors.black.withOpacity(0.05)), + $.button.container.color(Colors.black.withOpacity(0.05)), ), ]; final menuStyle = [ - $.menu.flexContainer.chain + $.menu.container.chain ..borderRadius(6) ..shadow.color(Colors.black.withOpacity(0.07)) ..shadow.blurRadius(5) @@ -48,7 +48,7 @@ class SelectStyle extends SpecStyle { $.menu.wrap.transform.scale(1.5), $.menu.autoWidth.on(), spec.on.selected( - $.menu.flexContainer.chain + $.menu.container.chain ..wrap.transform.scale(1) ..wrap.opacity(1) ..wrap.padding.top(4), @@ -56,7 +56,7 @@ class SelectStyle extends SpecStyle { ]; final itemStyle = [ - $.item.flexContainer.chain + $.item.container.chain ..borderRadius(6) ..padding.vertical(8) ..padding.horizontal(6) @@ -66,7 +66,7 @@ class SelectStyle extends SpecStyle { ..style.color.black() ..style.fontSize(14), $.item.icon.size(20), - spec.on.hover($.item.flexContainer.color.black12()), + spec.on.hover($.item.container.color.black12()), ]; return Style.create([ @@ -86,12 +86,12 @@ class SelectDarkStyle extends SelectStyle { final $ = spec.utilities; final buttonStyle = $.button.chain - ..flexContainer.color.black() - ..flexContainer.border.color.white12() + ..container.color.black() + ..container.border.color.white12() ..icon.color.white54() ..label.style.color.white(); - final menuStyle = $.menu.flexContainer.chain + final menuStyle = $.menu.container.chain ..color.black() ..border.all.color.white12(); @@ -102,8 +102,8 @@ class SelectDarkStyle extends SelectStyle { buttonStyle, menuStyle, itemStyle, - spec.on.hover($.item.flexContainer.color.white12()), - spec.on.disabled($.button.flexContainer.color.white10()), + spec.on.hover($.item.container.color.white12()), + spec.on.disabled($.button.container.color.white10()), ]); } } diff --git a/packages/remix/lib/src/components/select/select_theme.dart b/packages/remix/lib/src/components/select/select_theme.dart index ba18ab64e..e8be48577 100644 --- a/packages/remix/lib/src/components/select/select_theme.dart +++ b/packages/remix/lib/src/components/select/select_theme.dart @@ -16,59 +16,59 @@ class FortalezaSelectStyle extends SelectStyle { final baseThemeOverrides = Style( $.menu.autoWidth.on(), - $.menu.flexContainer.chain + $.menu.container.chain ..color.$neutral(1) ..border.all.color.$neutral(6) ..wrap.intrinsicWidth() ..padding.all.$space(2), $.button.chain - ..flexContainer.border.all.color.$neutral(6) - ..flexContainer.color.$neutral(1) + ..container.border.all.color.$neutral(6) + ..container.color.$neutral(1) ..icon.color.$accentAlpha(12) - ..flexContainer.flex.gap.$space(1) - ..flexContainer.flex.mainAxisSize.min(), - $.item.flexContainer.padding.horizontal.$space(3), + ..container.flex.gap.$space(1) + ..container.flex.mainAxisSize.min(), + $.item.container.padding.horizontal.$space(3), spec.on.disabled( $.button.chain - ..flexContainer.color.$neutral(2) - ..flexContainer.border.all.color.$neutral(8) + ..container.color.$neutral(2) + ..container.border.all.color.$neutral(8) ..label.style.color.$neutral(11) ..icon.color.$neutral(9), ), spec.on.hover( - $.button.flexContainer.border.all.color.$neutral(8), - $.item.flexContainer.color.$accent(9), + $.button.container.border.all.color.$neutral(8), + $.item.container.color.$accent(9), $.item.text.style.color.$white(), ), ); final softVariant = Style( - $.button.flexContainer.chain + $.button.container.chain ..color.$accent(3) ..border.none(), $.button.label.style.color.$accent(12), $.item.text.style.color.$accent(12), spec.on.hover( - $.button.flexContainer.color.$accent(4), + $.button.container.color.$accent(4), $.item.chain - ..flexContainer.color.$accent(4) + ..container.color.$accent(4) ..text.style.color.$accent(12), ), ); final ghostVariant = Style( - $.button.flexContainer.chain + $.button.container.chain ..color.transparent() ..border.none(), spec.on.hover( - $.button.flexContainer.color.$accent(4), + $.button.container.color.$accent(4), $.item.chain - ..flexContainer.color.$accent(4) + ..container.color.$accent(4) ..text.style.color.$accent(12), ), spec.on.disabled( $.button.chain - ..flexContainer.color.transparent() + ..container.color.transparent() ..label.style.color.$neutral(11) ..icon.color.$neutral(9), ), @@ -97,19 +97,19 @@ class FortalezaDarkSelectStyle extends FortalezaSelectStyle { final baseThemeOverrides = Style( $.button.chain ..label.style.color.$neutral(12) - ..flexContainer.color.$neutral(1) - ..flexContainer.border.all.color.$neutral(7), - $.menu.flexContainer.color.$neutral(1), + ..container.color.$neutral(1) + ..container.border.all.color.$neutral(7), + $.menu.container.color.$neutral(1), $.item.text.style.color.$neutral(12), - spec.on.hover($.button.flexContainer.border.all.color.$neutral(8)), + spec.on.hover($.button.container.border.all.color.$neutral(8)), ); final ghost = Style( $.button.chain ..label.style.color.$accent(12) ..icon.color.$accent(12) - ..flexContainer.color.transparent() - ..flexContainer.border.all.color.$neutral(7), + ..container.color.transparent() + ..container.border.all.color.$neutral(7), $.item.text.style.color.$neutral(12), ); diff --git a/packages/remix/lib/src/components/select/select_widget.dart b/packages/remix/lib/src/components/select/select_widget.dart index 7b267bacf..119f57b8f 100644 --- a/packages/remix/lib/src/components/select/select_widget.dart +++ b/packages/remix/lib/src/components/select/select_widget.dart @@ -128,8 +128,8 @@ class SelectState extends State> final select = SelectSpec.of(context); final menu = select.menu; - final Container = menu.flexContainer.copyWith( - box: menu.flexContainer.box.copyWith( + final Container = menu.container.copyWith( + box: menu.container.box.copyWith( width: menu.autoWidth ? _link.leaderSize!.width : null, ), From 9ac5e5a4a4bd95e1d62c6aaee16a060449bf9a36 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Fri, 15 Nov 2024 15:31:57 -0300 Subject: [PATCH 57/57] toast --- .../demo/lib/components/badge_use_case.dart | 7 +- .../src/components/button/button_widget.dart | 17 +-- .../lib/src/components/chip/chip_widget.dart | 6 +- .../src/components/menu_item/menu_item.dart | 6 +- .../src/components/menu_item/menu_item.g.dart | 11 +- .../components/menu_item/menu_item_style.dart | 8 +- .../components/menu_item/menu_item_theme.dart | 2 +- .../src/components/textfield/textfield.dart | 12 +- .../src/components/textfield/textfield.g.dart | 68 +++++---- .../components/textfield/textfield_style.dart | 16 +- .../components/textfield/textfield_theme.dart | 10 +- .../textfield/textfield_widget.dart | 4 +- .../remix/lib/src/components/toast/toast.dart | 18 +-- .../lib/src/components/toast/toast.g.dart | 111 +++++++------- .../lib/src/components/toast/toast_style.dart | 12 +- .../lib/src/components/toast/toast_theme.dart | 13 +- .../src/components/toast/toast_widget.dart | 6 +- packages/remix/lib/src/helpers/docs.dart | 26 +++- .../components/button/button_widget_test.dart | 144 +++++++++--------- .../callout/callout_widget_test.dart | 2 +- .../components/radio/radio_widget_test.dart | 69 +++++---- packages/remix/test/utils/internal/docs.dart | 0 22 files changed, 293 insertions(+), 275 deletions(-) create mode 100644 packages/remix/test/utils/internal/docs.dart diff --git a/packages/remix/demo/lib/components/badge_use_case.dart b/packages/remix/demo/lib/components/badge_use_case.dart index 388fb42df..37405a059 100644 --- a/packages/remix/demo/lib/components/badge_use_case.dart +++ b/packages/remix/demo/lib/components/badge_use_case.dart @@ -1,4 +1,3 @@ -import 'package:demo/helpers/knob_builder.dart'; import 'package:flutter/widgets.dart'; import 'package:remix/remix.dart'; import 'package:widgetbook/widgetbook.dart'; @@ -12,13 +11,13 @@ Widget buildAvatarUseCase(BuildContext context) { return Scaffold( body: Center( child: Badge( - variants: [ - context.knobs.variant(FortalezaBadgeStyle.variants), - ], label: context.knobs.string( label: 'Label', initialValue: 'New', ), + variants: const [ + // context.knobs.variant(FortalezaBadgeStyle.variants), + ], ), ), ); diff --git a/packages/remix/lib/src/components/button/button_widget.dart b/packages/remix/lib/src/components/button/button_widget.dart index b7b33d48e..cbaace8f5 100644 --- a/packages/remix/lib/src/components/button/button_widget.dart +++ b/packages/remix/lib/src/components/button/button_widget.dart @@ -17,17 +17,10 @@ class Button extends StatelessWidget { /// The text content displayed in the center of the button. final String label; - /// {@template remix.component.disabled} - /// When disabled, the component will not respond to user interaction and will - /// appear visually distinct to indicate its disabled state. - /// {@endtemplate} + /// {@macro remix.component.disabled} final bool disabled; - /// {@template remix.component.loading} - /// When loading, the component will display a spinner and disable user - /// interaction. The component's content will be hidden but maintain its - /// space to prevent layout shifts. - /// {@endtemplate} + /// {@macro remix.component.loading} final bool loading; /// The icon displayed in the left side of the button. @@ -36,11 +29,7 @@ class Button extends StatelessWidget { /// The icon displayed in the right side of the button. final IconData? iconRight; - /// {@template remix.component.onPressed} - /// Called when the component is tapped. - /// If null or if [disabled] is true, the component will be disabled and won't - /// respond to touch. - /// {@endtemplate} + /// {@macro remix.component.onPressed} final VoidCallback? onPressed; /// A builder that returns a [Widget] for the button's spinner. diff --git a/packages/remix/lib/src/components/chip/chip_widget.dart b/packages/remix/lib/src/components/chip/chip_widget.dart index 928c87fd6..f11499caa 100644 --- a/packages/remix/lib/src/components/chip/chip_widget.dart +++ b/packages/remix/lib/src/components/chip/chip_widget.dart @@ -25,11 +25,7 @@ class Chip extends StatefulWidget { /// The icon displayed in the right side of the component. final IconData? iconRight; - /// {@template remix.component.onChanged} - /// Called when the component is tapped. - /// If null or if [disabled] is true, the component will be disabled and won't - /// respond to touch. - /// {@endtemplate} + /// {@macro remix.component.onChanged} final void Function(bool)? onChanged; /// {@macro remix.component.disabled} diff --git a/packages/remix/lib/src/components/menu_item/menu_item.dart b/packages/remix/lib/src/components/menu_item/menu_item.dart index 273c5e3d7..8b631dff6 100644 --- a/packages/remix/lib/src/components/menu_item/menu_item.dart +++ b/packages/remix/lib/src/components/menu_item/menu_item.dart @@ -16,7 +16,7 @@ part 'menu_item_widget.dart'; class MenuItemSpec extends Spec with _$MenuItemSpec, Diagnosticable { final FlexBoxSpec container; - final FlexSpec titleSubtitleContainer; + final FlexBoxSpec titleSubtitleContainer; final IconSpec icon; final TextSpec title; final TextSpec subtitle; @@ -28,14 +28,14 @@ class MenuItemSpec extends Spec const MenuItemSpec({ FlexBoxSpec? container, - FlexSpec? titleSubtitleContainer, + FlexBoxSpec? titleSubtitleContainer, IconSpec? icon, TextSpec? title, TextSpec? subtitle, super.modifiers, super.animated, }) : container = container ?? const FlexBoxSpec(), - titleSubtitleContainer = titleSubtitleContainer ?? const FlexSpec(), + titleSubtitleContainer = titleSubtitleContainer ?? const FlexBoxSpec(), icon = icon ?? const IconSpec(), title = title ?? const TextSpec(), subtitle = subtitle ?? const TextSpec(); diff --git a/packages/remix/lib/src/components/menu_item/menu_item.g.dart b/packages/remix/lib/src/components/menu_item/menu_item.g.dart index 89733cb60..f41472c9a 100644 --- a/packages/remix/lib/src/components/menu_item/menu_item.g.dart +++ b/packages/remix/lib/src/components/menu_item/menu_item.g.dart @@ -34,7 +34,7 @@ mixin _$MenuItemSpec on Spec { @override MenuItemSpec copyWith({ FlexBoxSpec? container, - FlexSpec? titleSubtitleContainer, + FlexBoxSpec? titleSubtitleContainer, IconSpec? icon, TextSpec? title, TextSpec? subtitle, @@ -64,8 +64,7 @@ mixin _$MenuItemSpec on Spec { /// The interpolation is performed on each property of the [MenuItemSpec] using the appropriate /// interpolation method: /// - /// - [FlexBoxSpec.lerp] for [container]. - /// - [FlexSpec.lerp] for [titleSubtitleContainer]. + /// - [FlexBoxSpec.lerp] for [container] and [titleSubtitleContainer]. /// - [IconSpec.lerp] for [icon]. /// - [TextSpec.lerp] for [title] and [subtitle]. @@ -137,7 +136,7 @@ mixin _$MenuItemSpec on Spec { class MenuItemSpecAttribute extends SpecAttribute with Diagnosticable { final FlexBoxSpecAttribute? container; - final FlexSpecAttribute? titleSubtitleContainer; + final FlexBoxSpecAttribute? titleSubtitleContainer; final IconSpecAttribute? icon; final TextSpecAttribute? title; final TextSpecAttribute? subtitle; @@ -243,7 +242,7 @@ class MenuItemSpecUtility /// Utility for defining [MenuItemSpecAttribute.titleSubtitleContainer] late final titleSubtitleContainer = - FlexSpecUtility((v) => only(titleSubtitleContainer: v)); + FlexBoxSpecUtility((v) => only(titleSubtitleContainer: v)); /// Utility for defining [MenuItemSpecAttribute.icon] late final icon = IconSpecUtility((v) => only(icon: v)); @@ -272,7 +271,7 @@ class MenuItemSpecUtility @override T only({ FlexBoxSpecAttribute? container, - FlexSpecAttribute? titleSubtitleContainer, + FlexBoxSpecAttribute? titleSubtitleContainer, IconSpecAttribute? icon, TextSpecAttribute? title, TextSpecAttribute? subtitle, diff --git a/packages/remix/lib/src/components/menu_item/menu_item_style.dart b/packages/remix/lib/src/components/menu_item/menu_item_style.dart index 80f01a850..08907532a 100644 --- a/packages/remix/lib/src/components/menu_item/menu_item_style.dart +++ b/packages/remix/lib/src/components/menu_item/menu_item_style.dart @@ -8,11 +8,11 @@ class MenuItemStyle extends SpecStyle { final $ = spec.utilities; final titleSubtitleContainer = $.titleSubtitleContainer.chain - ..mainAxisAlignment.start() - ..crossAxisAlignment.start() - ..mainAxisSize.min() + ..flex.mainAxisAlignment.start() + ..flex.crossAxisAlignment.start() + ..flex.mainAxisSize.min() ..wrap.expanded() - ..gap(4.0); + ..flex.gap(4.0); final title = $.title.style.fontSize(14.0); diff --git a/packages/remix/lib/src/components/menu_item/menu_item_theme.dart b/packages/remix/lib/src/components/menu_item/menu_item_theme.dart index 26cb4ed49..bf9b0bc71 100644 --- a/packages/remix/lib/src/components/menu_item/menu_item_theme.dart +++ b/packages/remix/lib/src/components/menu_item/menu_item_theme.dart @@ -8,7 +8,7 @@ class FortalezaMenuItemStyle extends MenuItemStyle { final $ = spec.utilities; final baseStyle = super.makeStyle(spec); - final titleSubtitleLayout = $.titleSubtitleContainer.chain..gap.$space(1); + final titleSubtitleLayout = $.titleSubtitleContainer.flex.gap.$space(1); final title = $.title.chain ..style.$text(2) diff --git a/packages/remix/lib/src/components/textfield/textfield.dart b/packages/remix/lib/src/components/textfield/textfield.dart index 495f5b526..bf3072f7d 100644 --- a/packages/remix/lib/src/components/textfield/textfield.dart +++ b/packages/remix/lib/src/components/textfield/textfield.dart @@ -53,8 +53,8 @@ class TextFieldSpec extends Spec final Brightness keyboardAppearance; final Color? autocorrectionTextRectColor; - final FlexBoxSpec flexContainer; - final FlexSpec mainFlex; + final FlexBoxSpec textFieldContainer; + final FlexBoxSpec container; final TextStyle? hintTextStyle; final TextSpec helperText; final IconSpec icon; @@ -89,8 +89,8 @@ class TextFieldSpec extends Spec Brightness? keyboardAppearance, this.autocorrectionTextRectColor, bool? cursorOpacityAnimates, - FlexBoxSpec? flexContainer, - FlexSpec? mainFlex, + FlexBoxSpec? textFieldContainer, + FlexBoxSpec? container, this.hintTextStyle, TextSpec? helperText, IconSpec? icon, @@ -114,9 +114,9 @@ class TextFieldSpec extends Spec scrollPadding = scrollPadding ?? const EdgeInsets.all(20.0), clipBehavior = clipBehavior ?? Clip.hardEdge, keyboardAppearance = keyboardAppearance ?? Brightness.light, - flexContainer = flexContainer ?? const FlexBoxSpec(), + textFieldContainer = textFieldContainer ?? const FlexBoxSpec(), helperText = helperText ?? const TextSpec(), - mainFlex = mainFlex ?? const FlexSpec(), + container = container ?? const FlexBoxSpec(), icon = icon ?? const IconSpec(), floatingLabel = floatingLabel ?? false, floatingLabelHeight = floatingLabelHeight ?? 14; diff --git a/packages/remix/lib/src/components/textfield/textfield.g.dart b/packages/remix/lib/src/components/textfield/textfield.g.dart index 7534c26b6..2a89eacd2 100644 --- a/packages/remix/lib/src/components/textfield/textfield.g.dart +++ b/packages/remix/lib/src/components/textfield/textfield.g.dart @@ -53,8 +53,8 @@ mixin _$TextFieldSpec on Spec { Brightness? keyboardAppearance, Color? autocorrectionTextRectColor, bool? cursorOpacityAnimates, - FlexBoxSpec? flexContainer, - FlexSpec? mainFlex, + FlexBoxSpec? textFieldContainer, + FlexBoxSpec? container, TextStyle? hintTextStyle, TextSpec? helperText, IconSpec? icon, @@ -88,8 +88,8 @@ mixin _$TextFieldSpec on Spec { autocorrectionTextRectColor ?? _$this.autocorrectionTextRectColor, cursorOpacityAnimates: cursorOpacityAnimates ?? _$this.cursorOpacityAnimates, - flexContainer: flexContainer ?? _$this.flexContainer, - mainFlex: mainFlex ?? _$this.mainFlex, + textFieldContainer: textFieldContainer ?? _$this.textFieldContainer, + container: container ?? _$this.container, hintTextStyle: hintTextStyle ?? _$this.hintTextStyle, helperText: helperText ?? _$this.helperText, icon: icon ?? _$this.icon, @@ -119,8 +119,7 @@ mixin _$TextFieldSpec on Spec { /// - [Color.lerp] for [cursorColor] and [backgroundCursorColor] and [selectionColor] and [autocorrectionTextRectColor]. /// - [Offset.lerp] for [cursorOffset]. /// - [EdgeInsets.lerp] for [scrollPadding]. - /// - [FlexBoxSpec.lerp] for [flexContainer]. - /// - [FlexSpec.lerp] for [mainFlex]. + /// - [FlexBoxSpec.lerp] for [textFieldContainer] and [container]. /// - [TextSpec.lerp] for [helperText]. /// - [IconSpec.lerp] for [icon]. @@ -170,8 +169,9 @@ mixin _$TextFieldSpec on Spec { t), cursorOpacityAnimates: t < 0.5 ? _$this.cursorOpacityAnimates : other.cursorOpacityAnimates, - flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), - mainFlex: _$this.mainFlex.lerp(other.mainFlex, t), + textFieldContainer: + _$this.textFieldContainer.lerp(other.textFieldContainer, t), + container: _$this.container.lerp(other.container, t), hintTextStyle: MixHelpers.lerpTextStyle( _$this.hintTextStyle, other.hintTextStyle, t), helperText: _$this.helperText.lerp(other.helperText, t), @@ -212,8 +212,8 @@ mixin _$TextFieldSpec on Spec { _$this.keyboardAppearance, _$this.autocorrectionTextRectColor, _$this.cursorOpacityAnimates, - _$this.flexContainer, - _$this.mainFlex, + _$this.textFieldContainer, + _$this.container, _$this.hintTextStyle, _$this.helperText, _$this.icon, @@ -275,10 +275,11 @@ mixin _$TextFieldSpec on Spec { properties.add(DiagnosticsProperty( 'cursorOpacityAnimates', _$this.cursorOpacityAnimates, defaultValue: null)); - properties.add(DiagnosticsProperty('flexContainer', _$this.flexContainer, + properties.add(DiagnosticsProperty( + 'textFieldContainer', _$this.textFieldContainer, defaultValue: null)); properties.add( - DiagnosticsProperty('mainFlex', _$this.mainFlex, defaultValue: null)); + DiagnosticsProperty('container', _$this.container, defaultValue: null)); properties.add(DiagnosticsProperty('hintTextStyle', _$this.hintTextStyle, defaultValue: null)); properties.add(DiagnosticsProperty('helperText', _$this.helperText, @@ -329,8 +330,8 @@ class TextFieldSpecAttribute extends SpecAttribute final Brightness? keyboardAppearance; final ColorDto? autocorrectionTextRectColor; final bool? cursorOpacityAnimates; - final FlexBoxSpecAttribute? flexContainer; - final FlexSpecAttribute? mainFlex; + final FlexBoxSpecAttribute? textFieldContainer; + final FlexBoxSpecAttribute? container; final TextStyleDto? hintTextStyle; final TextSpecAttribute? helperText; final IconSpecAttribute? icon; @@ -359,8 +360,8 @@ class TextFieldSpecAttribute extends SpecAttribute this.keyboardAppearance, this.autocorrectionTextRectColor, this.cursorOpacityAnimates, - this.flexContainer, - this.mainFlex, + this.textFieldContainer, + this.container, this.hintTextStyle, this.helperText, this.icon, @@ -402,8 +403,8 @@ class TextFieldSpecAttribute extends SpecAttribute keyboardAppearance: keyboardAppearance, autocorrectionTextRectColor: autocorrectionTextRectColor?.resolve(mix), cursorOpacityAnimates: cursorOpacityAnimates, - flexContainer: flexContainer?.resolve(mix), - mainFlex: mainFlex?.resolve(mix), + textFieldContainer: textFieldContainer?.resolve(mix), + container: container?.resolve(mix), hintTextStyle: hintTextStyle?.resolve(mix), helperText: helperText?.resolve(mix), icon: icon?.resolve(mix), @@ -456,9 +457,9 @@ class TextFieldSpecAttribute extends SpecAttribute other.autocorrectionTextRectColor, cursorOpacityAnimates: other.cursorOpacityAnimates ?? cursorOpacityAnimates, - flexContainer: - flexContainer?.merge(other.flexContainer) ?? other.flexContainer, - mainFlex: mainFlex?.merge(other.mainFlex) ?? other.mainFlex, + textFieldContainer: textFieldContainer?.merge(other.textFieldContainer) ?? + other.textFieldContainer, + container: container?.merge(other.container) ?? other.container, hintTextStyle: hintTextStyle?.merge(other.hintTextStyle) ?? other.hintTextStyle, helperText: helperText?.merge(other.helperText) ?? other.helperText, @@ -498,8 +499,8 @@ class TextFieldSpecAttribute extends SpecAttribute keyboardAppearance, autocorrectionTextRectColor, cursorOpacityAnimates, - flexContainer, - mainFlex, + textFieldContainer, + container, hintTextStyle, helperText, icon, @@ -559,10 +560,10 @@ class TextFieldSpecAttribute extends SpecAttribute properties.add(DiagnosticsProperty( 'cursorOpacityAnimates', cursorOpacityAnimates, defaultValue: null)); - properties.add(DiagnosticsProperty('flexContainer', flexContainer, + properties.add(DiagnosticsProperty('textFieldContainer', textFieldContainer, defaultValue: null)); properties - .add(DiagnosticsProperty('mainFlex', mainFlex, defaultValue: null)); + .add(DiagnosticsProperty('container', container, defaultValue: null)); properties.add(DiagnosticsProperty('hintTextStyle', hintTextStyle, defaultValue: null)); properties @@ -657,11 +658,12 @@ class TextFieldSpecUtility late final cursorOpacityAnimates = BoolUtility((v) => only(cursorOpacityAnimates: v)); - /// Utility for defining [TextFieldSpecAttribute.flexContainer] - late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); + /// Utility for defining [TextFieldSpecAttribute.textFieldContainer] + late final textFieldContainer = + FlexBoxSpecUtility((v) => only(textFieldContainer: v)); - /// Utility for defining [TextFieldSpecAttribute.mainFlex] - late final mainFlex = FlexSpecUtility((v) => only(mainFlex: v)); + /// Utility for defining [TextFieldSpecAttribute.container] + late final container = FlexBoxSpecUtility((v) => only(container: v)); /// Utility for defining [TextFieldSpecAttribute.hintTextStyle] late final hintTextStyle = TextStyleUtility((v) => only(hintTextStyle: v)); @@ -720,8 +722,8 @@ class TextFieldSpecUtility Brightness? keyboardAppearance, ColorDto? autocorrectionTextRectColor, bool? cursorOpacityAnimates, - FlexBoxSpecAttribute? flexContainer, - FlexSpecAttribute? mainFlex, + FlexBoxSpecAttribute? textFieldContainer, + FlexBoxSpecAttribute? container, TextStyleDto? hintTextStyle, TextSpecAttribute? helperText, IconSpecAttribute? icon, @@ -752,8 +754,8 @@ class TextFieldSpecUtility keyboardAppearance: keyboardAppearance, autocorrectionTextRectColor: autocorrectionTextRectColor, cursorOpacityAnimates: cursorOpacityAnimates, - flexContainer: flexContainer, - mainFlex: mainFlex, + textFieldContainer: textFieldContainer, + container: container, hintTextStyle: hintTextStyle, helperText: helperText, icon: icon, diff --git a/packages/remix/lib/src/components/textfield/textfield_style.dart b/packages/remix/lib/src/components/textfield/textfield_style.dart index 76a8a8ff7..7a94812ae 100644 --- a/packages/remix/lib/src/components/textfield/textfield_style.dart +++ b/packages/remix/lib/src/components/textfield/textfield_style.dart @@ -79,7 +79,7 @@ class TextFieldStyle extends SpecStyle { final $ = spec.utilities; - final flexContainerStyle = $.flexContainer.chain + final textFieldContainerStyle = $.textFieldContainer.chain ..color.white() ..padding.horizontal(12) ..padding.vertical(8) @@ -95,7 +95,7 @@ class TextFieldStyle extends SpecStyle { ..flex.crossAxisAlignment.center() ..flex.gap(8); - final layoutStyle = $.mainFlex.chain + final containerStyle = $.container.flex.chain ..direction.vertical() ..mainAxisSize.min() ..mainAxisAlignment.start() @@ -120,14 +120,14 @@ class TextFieldStyle extends SpecStyle { ..style.fontSize(12) ..wrap.padding.left(12); - final focus = spec.on.focus($.flexContainer.border.all.color.black()); + final focus = spec.on.focus($.textFieldContainer.border.all.color.black()); return Style.create([ platformSettings(spec).call(), - flexContainerStyle, + textFieldContainerStyle, $.floatingLabel.off(), $.selectionColor.black12(), - layoutStyle, + containerStyle, textStyle, helperStyle, ...hintStyle, @@ -145,7 +145,7 @@ class TextFieldDarkStyle extends TextFieldStyle { final $ = spec.utilities; final cursor = $.cursorColor.grey.shade100(); - final flexContainerStyle = $.flexContainer.chain + final textFieldContainerStyle = $.textFieldContainer.chain ..color.black() ..border.all.color.grey.shade800() ..shadow.spreadRadius(0) @@ -163,12 +163,12 @@ class TextFieldDarkStyle extends TextFieldStyle { final helperStyle = $.helperText.style.color.grey.shade400(); final icon = $.icon.color.grey.shade300(); - final focus = spec.on.focus($.flexContainer.border.all.color.white()); + final focus = spec.on.focus($.textFieldContainer.border.all.color.white()); return Style.create([ super.makeStyle(spec).call(), cursor, - flexContainerStyle, + textFieldContainerStyle, focus, textStyle, helperStyle, diff --git a/packages/remix/lib/src/components/textfield/textfield_theme.dart b/packages/remix/lib/src/components/textfield/textfield_theme.dart index 4636c235f..7193033f6 100644 --- a/packages/remix/lib/src/components/textfield/textfield_theme.dart +++ b/packages/remix/lib/src/components/textfield/textfield_theme.dart @@ -7,7 +7,7 @@ class FortalezaTextFieldStyle extends TextFieldStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final flexContainerStyle = $.flexContainer.chain + final textFieldContainerStyle = $.textFieldContainer.chain ..color.$neutral(1) ..padding.horizontal.$space(3) ..padding.vertical.$space(2) @@ -19,7 +19,7 @@ class FortalezaTextFieldStyle extends TextFieldStyle { final textStyle = [$.style.$text(2), $.style.color.$neutral(12)]; - final layoutStyle = $.mainFlex.gap.$space(2); + final containerStyle = $.container.flex.gap.$space(2); final hintStyle = [ $.hintTextStyle.color.$neutral(9), @@ -38,7 +38,7 @@ class FortalezaTextFieldStyle extends TextFieldStyle { final icon = $.icon.color.$accent(); final focus = spec.on.focus( - $.flexContainer.chain + $.textFieldContainer.chain ..border.all.color.$accent() ..border.all.width(2), ); @@ -47,8 +47,8 @@ class FortalezaTextFieldStyle extends TextFieldStyle { super.makeStyle(spec).call(), $.floatingLabel.on(), $.cursorColor.$neutral(12), - flexContainerStyle, - layoutStyle, + textFieldContainerStyle, + containerStyle, ...textStyle, ...hintStyle, ...floatingHintStyle, diff --git a/packages/remix/lib/src/components/textfield/textfield_widget.dart b/packages/remix/lib/src/components/textfield/textfield_widget.dart index daa31d66d..bdacf770c 100644 --- a/packages/remix/lib/src/components/textfield/textfield_widget.dart +++ b/packages/remix/lib/src/components/textfield/textfield_widget.dart @@ -519,10 +519,10 @@ class _TextFieldState extends State (_effectiveFocusNode.hasFocus || _effectiveController.value.text.isNotEmpty); - return spec.mainFlex( + return spec.container( direction: Axis.vertical, children: [ - spec.flexContainer( + spec.textFieldContainer( direction: Axis.horizontal, children: [ if (widget.prefixBuilder != null) diff --git a/packages/remix/lib/src/components/toast/toast.dart b/packages/remix/lib/src/components/toast/toast.dart index 5f745b53a..990379c00 100644 --- a/packages/remix/lib/src/components/toast/toast.dart +++ b/packages/remix/lib/src/components/toast/toast.dart @@ -16,10 +16,10 @@ part 'toast_widget.dart'; @MixableSpec() base class ToastSpec extends Spec with _$ToastSpec, Diagnosticable { - final FlexBoxSpec flexContainer; - final FlexSpec textLayout; + final FlexBoxSpec container; + final FlexBoxSpec titleSubtitleContainer; final TextSpec title; - final TextSpec description; + final TextSpec subtitle; /// {@macro toast_spec_of} static const of = _$ToastSpec.of; @@ -27,16 +27,16 @@ base class ToastSpec extends Spec with _$ToastSpec, Diagnosticable { static const from = _$ToastSpec.from; const ToastSpec({ - FlexBoxSpec? flexContainer, - FlexSpec? textLayout, + FlexBoxSpec? container, + FlexBoxSpec? titleSubtitleContainer, TextSpec? title, - TextSpec? description, + TextSpec? subtitle, super.modifiers, super.animated, - }) : flexContainer = flexContainer ?? const FlexBoxSpec(), - textLayout = textLayout ?? const FlexSpec(), + }) : container = container ?? const FlexBoxSpec(), + titleSubtitleContainer = titleSubtitleContainer ?? const FlexBoxSpec(), title = title ?? const TextSpec(), - description = description ?? const TextSpec(); + subtitle = subtitle ?? const TextSpec(); @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { diff --git a/packages/remix/lib/src/components/toast/toast.g.dart b/packages/remix/lib/src/components/toast/toast.g.dart index 612154d54..8a0ec0956 100644 --- a/packages/remix/lib/src/components/toast/toast.g.dart +++ b/packages/remix/lib/src/components/toast/toast.g.dart @@ -33,18 +33,19 @@ mixin _$ToastSpec on Spec { /// replaced with the new values. @override ToastSpec copyWith({ - FlexBoxSpec? flexContainer, - FlexSpec? textLayout, + FlexBoxSpec? container, + FlexBoxSpec? titleSubtitleContainer, TextSpec? title, - TextSpec? description, + TextSpec? subtitle, WidgetModifiersData? modifiers, AnimatedData? animated, }) { return ToastSpec( - flexContainer: flexContainer ?? _$this.flexContainer, - textLayout: textLayout ?? _$this.textLayout, + container: container ?? _$this.container, + titleSubtitleContainer: + titleSubtitleContainer ?? _$this.titleSubtitleContainer, title: title ?? _$this.title, - description: description ?? _$this.description, + subtitle: subtitle ?? _$this.subtitle, modifiers: modifiers ?? _$this.modifiers, animated: animated ?? _$this.animated, ); @@ -61,9 +62,8 @@ mixin _$ToastSpec on Spec { /// The interpolation is performed on each property of the [ToastSpec] using the appropriate /// interpolation method: /// - /// - [FlexBoxSpec.lerp] for [flexContainer]. - /// - [FlexSpec.lerp] for [textLayout]. - /// - [TextSpec.lerp] for [title] and [description]. + /// - [FlexBoxSpec.lerp] for [container] and [titleSubtitleContainer]. + /// - [TextSpec.lerp] for [title] and [subtitle]. /// For [modifiers] and [animated], the interpolation is performed using a step function. /// If [t] is less than 0.5, the value from the current [ToastSpec] is used. Otherwise, the value @@ -76,10 +76,11 @@ mixin _$ToastSpec on Spec { if (other == null) return _$this; return ToastSpec( - flexContainer: _$this.flexContainer.lerp(other.flexContainer, t), - textLayout: _$this.textLayout.lerp(other.textLayout, t), + container: _$this.container.lerp(other.container, t), + titleSubtitleContainer: + _$this.titleSubtitleContainer.lerp(other.titleSubtitleContainer, t), title: _$this.title.lerp(other.title, t), - description: _$this.description.lerp(other.description, t), + subtitle: _$this.subtitle.lerp(other.subtitle, t), modifiers: other.modifiers, animated: t < 0.5 ? _$this.animated : other.animated, ); @@ -91,10 +92,10 @@ mixin _$ToastSpec on Spec { /// compare two [ToastSpec] instances for equality. @override List get props => [ - _$this.flexContainer, - _$this.textLayout, + _$this.container, + _$this.titleSubtitleContainer, _$this.title, - _$this.description, + _$this.subtitle, _$this.modifiers, _$this.animated, ]; @@ -102,14 +103,15 @@ mixin _$ToastSpec on Spec { ToastSpec get _$this => this as ToastSpec; void _debugFillProperties(DiagnosticPropertiesBuilder properties) { - properties.add(DiagnosticsProperty('flexContainer', _$this.flexContainer, - defaultValue: null)); - properties.add(DiagnosticsProperty('textLayout', _$this.textLayout, + properties.add( + DiagnosticsProperty('container', _$this.container, defaultValue: null)); + properties.add(DiagnosticsProperty( + 'titleSubtitleContainer', _$this.titleSubtitleContainer, defaultValue: null)); properties .add(DiagnosticsProperty('title', _$this.title, defaultValue: null)); - properties.add(DiagnosticsProperty('description', _$this.description, - defaultValue: null)); + properties.add( + DiagnosticsProperty('subtitle', _$this.subtitle, defaultValue: null)); properties.add( DiagnosticsProperty('modifiers', _$this.modifiers, defaultValue: null)); properties.add( @@ -126,16 +128,16 @@ mixin _$ToastSpec on Spec { /// the [ToastSpec] constructor. base class ToastSpecAttribute extends SpecAttribute with Diagnosticable { - final FlexBoxSpecAttribute? flexContainer; - final FlexSpecAttribute? textLayout; + final FlexBoxSpecAttribute? container; + final FlexBoxSpecAttribute? titleSubtitleContainer; final TextSpecAttribute? title; - final TextSpecAttribute? description; + final TextSpecAttribute? subtitle; const ToastSpecAttribute({ - this.flexContainer, - this.textLayout, + this.container, + this.titleSubtitleContainer, this.title, - this.description, + this.subtitle, super.modifiers, super.animated, }); @@ -151,10 +153,10 @@ base class ToastSpecAttribute extends SpecAttribute @override ToastSpec resolve(MixData mix) { return ToastSpec( - flexContainer: flexContainer?.resolve(mix), - textLayout: textLayout?.resolve(mix), + container: container?.resolve(mix), + titleSubtitleContainer: titleSubtitleContainer?.resolve(mix), title: title?.resolve(mix), - description: description?.resolve(mix), + subtitle: subtitle?.resolve(mix), modifiers: modifiers?.resolve(mix), animated: animated?.resolve(mix) ?? mix.animation, ); @@ -173,11 +175,12 @@ base class ToastSpecAttribute extends SpecAttribute if (other == null) return this; return ToastSpecAttribute( - flexContainer: - flexContainer?.merge(other.flexContainer) ?? other.flexContainer, - textLayout: textLayout?.merge(other.textLayout) ?? other.textLayout, + container: container?.merge(other.container) ?? other.container, + titleSubtitleContainer: + titleSubtitleContainer?.merge(other.titleSubtitleContainer) ?? + other.titleSubtitleContainer, title: title?.merge(other.title) ?? other.title, - description: description?.merge(other.description) ?? other.description, + subtitle: subtitle?.merge(other.subtitle) ?? other.subtitle, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, animated: animated?.merge(other.animated) ?? other.animated, ); @@ -189,10 +192,10 @@ base class ToastSpecAttribute extends SpecAttribute /// compare two [ToastSpecAttribute] instances for equality. @override List get props => [ - flexContainer, - textLayout, + container, + titleSubtitleContainer, title, - description, + subtitle, modifiers, animated, ]; @@ -200,13 +203,14 @@ base class ToastSpecAttribute extends SpecAttribute @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); - properties.add(DiagnosticsProperty('flexContainer', flexContainer, - defaultValue: null)); properties - .add(DiagnosticsProperty('textLayout', textLayout, defaultValue: null)); + .add(DiagnosticsProperty('container', container, defaultValue: null)); + properties.add(DiagnosticsProperty( + 'titleSubtitleContainer', titleSubtitleContainer, + defaultValue: null)); properties.add(DiagnosticsProperty('title', title, defaultValue: null)); - properties.add( - DiagnosticsProperty('description', description, defaultValue: null)); + properties + .add(DiagnosticsProperty('subtitle', subtitle, defaultValue: null)); properties .add(DiagnosticsProperty('modifiers', modifiers, defaultValue: null)); properties @@ -220,17 +224,18 @@ base class ToastSpecAttribute extends SpecAttribute /// Use the methods of this class to configure specific properties of a [ToastSpec]. class ToastSpecUtility extends SpecUtility { - /// Utility for defining [ToastSpecAttribute.flexContainer] - late final flexContainer = FlexBoxSpecUtility((v) => only(flexContainer: v)); + /// Utility for defining [ToastSpecAttribute.container] + late final container = FlexBoxSpecUtility((v) => only(container: v)); - /// Utility for defining [ToastSpecAttribute.textLayout] - late final textLayout = FlexSpecUtility((v) => only(textLayout: v)); + /// Utility for defining [ToastSpecAttribute.titleSubtitleContainer] + late final titleSubtitleContainer = + FlexBoxSpecUtility((v) => only(titleSubtitleContainer: v)); /// Utility for defining [ToastSpecAttribute.title] late final title = TextSpecUtility((v) => only(title: v)); - /// Utility for defining [ToastSpecAttribute.description] - late final description = TextSpecUtility((v) => only(description: v)); + /// Utility for defining [ToastSpecAttribute.subtitle] + late final subtitle = TextSpecUtility((v) => only(subtitle: v)); /// Utility for defining [ToastSpecAttribute.modifiers] late final wrap = SpecModifierUtility((v) => only(modifiers: v)); @@ -249,18 +254,18 @@ class ToastSpecUtility /// Returns a new [ToastSpecAttribute] with the specified properties. @override T only({ - FlexBoxSpecAttribute? flexContainer, - FlexSpecAttribute? textLayout, + FlexBoxSpecAttribute? container, + FlexBoxSpecAttribute? titleSubtitleContainer, TextSpecAttribute? title, - TextSpecAttribute? description, + TextSpecAttribute? subtitle, WidgetModifiersDataDto? modifiers, AnimatedDataDto? animated, }) { return builder(ToastSpecAttribute( - flexContainer: flexContainer, - textLayout: textLayout, + container: container, + titleSubtitleContainer: titleSubtitleContainer, title: title, - description: description, + subtitle: subtitle, modifiers: modifiers, animated: animated, )); diff --git a/packages/remix/lib/src/components/toast/toast_style.dart b/packages/remix/lib/src/components/toast/toast_style.dart index 61373916d..05d8a1771 100644 --- a/packages/remix/lib/src/components/toast/toast_style.dart +++ b/packages/remix/lib/src/components/toast/toast_style.dart @@ -7,7 +7,7 @@ class ToastStyle extends SpecStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final flexContainerStyle = $.flexContainer.chain + final containerStyle = $.container.chain ..borderRadius(6) ..color.white() ..border.all.color.black12() @@ -19,7 +19,7 @@ class ToastStyle extends SpecStyle { ..flex.mainAxisSize.min() ..flex.gap(16); - final textLayoutFlexStyle = $.textLayout.chain + final titleSubtitleContainerStyle = $.titleSubtitleContainer.flex.chain ..direction.vertical() ..crossAxisAlignment.start() ..gap(4) @@ -29,15 +29,15 @@ class ToastStyle extends SpecStyle { ..style.bold() ..style.fontSize(14); - final descriptionStyle = $.description.chain + final subtitleStyle = $.subtitle.chain ..style.fontSize(13) ..style.color.black54(); return Style.create([ - flexContainerStyle, - textLayoutFlexStyle, + containerStyle, + titleSubtitleContainerStyle, titleStyle, - descriptionStyle, + subtitleStyle, ]); } } diff --git a/packages/remix/lib/src/components/toast/toast_theme.dart b/packages/remix/lib/src/components/toast/toast_theme.dart index aecd3f75f..e19fe1dcd 100644 --- a/packages/remix/lib/src/components/toast/toast_theme.dart +++ b/packages/remix/lib/src/components/toast/toast_theme.dart @@ -7,7 +7,7 @@ class FortalezaToastStyle extends ToastStyle { Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; - final flexContainerStyle = $.flexContainer.chain + final containerStyle = $.container.chain ..borderRadius.all.$radius(2) ..color.$neutral(2) ..border.all.color.$neutral(6) @@ -15,22 +15,23 @@ class FortalezaToastStyle extends ToastStyle { ..margin.all.$space(4) ..flex.gap.$space(5); - final textLayoutStyle = $.textLayout.gap.$space(1); + final titleSubtitleContainerStyle = + $.titleSubtitleContainer.flex.gap.$space(1); final titleStyle = $.title.chain ..style.$text(2) ..style.color.$neutral(12); - final descriptionStyle = $.description.chain + final subtitleStyle = $.subtitle.chain ..style.$text(1) ..style.color.$neutral(9); return Style.create([ super.makeStyle(spec).call(), - flexContainerStyle, - textLayoutStyle, + containerStyle, + titleSubtitleContainerStyle, titleStyle, - descriptionStyle, + subtitleStyle, ]); } } diff --git a/packages/remix/lib/src/components/toast/toast_widget.dart b/packages/remix/lib/src/components/toast/toast_widget.dart index 3d44f6082..ead406b20 100644 --- a/packages/remix/lib/src/components/toast/toast_widget.dart +++ b/packages/remix/lib/src/components/toast/toast_widget.dart @@ -39,15 +39,15 @@ class Toast extends StatelessWidget { builder: (context) { final spec = ToastSpec.of(context); - return spec.flexContainer( + return spec.container( direction: Axis.horizontal, children: [ if (leading != null) leading!, - spec.textLayout( + spec.titleSubtitleContainer( direction: Axis.vertical, children: [ spec.title(title), - if (description != null) spec.description(description!), + if (description != null) spec.subtitle(description!), ], ), if (trailing != null) trailing!, diff --git a/packages/remix/lib/src/helpers/docs.dart b/packages/remix/lib/src/helpers/docs.dart index 0531eadee..bcb3a7f0c 100644 --- a/packages/remix/lib/src/helpers/docs.dart +++ b/packages/remix/lib/src/helpers/docs.dart @@ -37,4 +37,28 @@ const _widgetSpecBuilder = ''; /// Use this to create unique variations or apply specific styling that /// differs from the global theme. /// {@endtemplate} -const _useStyleFromContext = ''; +// const _useStyleFromContext = ''; +/// +/// {@template remix.component.disabled} +/// When disabled, the component will not respond to user interaction and will +/// appear visually distinct to indicate its disabled state. +/// {@endtemplate} +/// +/// {@template remix.component.loading} +/// When loading, the component will display a spinner and disable user +/// interaction. The component's content will be hidden but maintain its +/// space to prevent layout shifts. +/// {@endtemplate} +/// +/// {@template remix.component.onPressed} +/// Called when the component is tapped. +/// If null or if [disabled] is true, the component will be disabled and won't +/// respond to touch. +/// {@endtemplate} +/// +/// {@template remix.component.onChanged} +/// Called when the component is tapped. +/// If null or if [disabled] is true, the component will be disabled and won't +/// respond to touch. +/// {@endtemplate} +const _remixComponent = ''; diff --git a/packages/remix/test/components/button/button_widget_test.dart b/packages/remix/test/components/button/button_widget_test.dart index af7e082f6..1d1140c40 100644 --- a/packages/remix/test/components/button/button_widget_test.dart +++ b/packages/remix/test/components/button/button_widget_test.dart @@ -11,9 +11,9 @@ void main() { await tester.pumpWidget( m.MaterialApp( home: Button( - style: const ButtonStyle(), label: 'Test Button', onPressed: () {}, + style: const ButtonStyle(), ), ), ); @@ -26,11 +26,11 @@ void main() { await tester.pumpWidget( m.MaterialApp( home: Button( - style: const ButtonStyle(), label: 'Test Button', onPressed: () { wasTapped = true; }, + style: const ButtonStyle(), ), ), ); @@ -39,53 +39,57 @@ void main() { expect(wasTapped, isTrue); }); - testWidgets('does not call onPressed when disabled', - (WidgetTester tester) async { - bool wasTapped = false; - await tester.pumpWidget( - m.MaterialApp( - home: Button( - style: const ButtonStyle(), - label: 'Test Button', - onPressed: () { - wasTapped = true; - }, - disabled: true, + testWidgets( + 'does not call onPressed when disabled', + (WidgetTester tester) async { + bool wasTapped = false; + await tester.pumpWidget( + m.MaterialApp( + home: Button( + label: 'Test Button', + disabled: true, + onPressed: () { + wasTapped = true; + }, + style: const ButtonStyle(), + ), ), - ), - ); - - await tester.tap(find.byType(Button)); - expect(wasTapped, isFalse); - }); - - testWidgets('shows loading indicator when loading', - (WidgetTester tester) async { - await tester.pumpWidget( - m.MaterialApp( - home: Button( - style: const ButtonStyle(), - label: 'Test Button', - onPressed: () {}, - loading: true, + ); + + await tester.tap(find.byType(Button)); + expect(wasTapped, isFalse); + }, + ); + + testWidgets( + 'shows loading indicator when loading', + (WidgetTester tester) async { + await tester.pumpWidget( + m.MaterialApp( + home: Button( + label: 'Test Button', + loading: true, + onPressed: () {}, + style: const ButtonStyle(), + ), ), - ), - ); + ); - expect(find.byType(SpinnerSpecWidget), findsOneWidget); + expect(find.byType(SpinnerSpecWidget), findsOneWidget); - final opacityWidget = tester.widget(find.byType(Opacity)); - expect(opacityWidget.opacity, 0); - }); + final opacityWidget = tester.widget(find.byType(Opacity)); + expect(opacityWidget.opacity, 0); + }, + ); testWidgets('renders left icon correctly', (WidgetTester tester) async { await tester.pumpWidget( m.MaterialApp( home: Button( - style: const ButtonStyle(), label: 'Test Button', - onPressed: () {}, iconLeft: m.Icons.add, + onPressed: () {}, + style: const ButtonStyle(), ), ), ); @@ -97,10 +101,10 @@ void main() { await tester.pumpWidget( m.MaterialApp( home: Button( - style: const ButtonStyle(), label: 'Test Button', - onPressed: () {}, iconRight: m.Icons.arrow_forward, + onPressed: () {}, + style: const ButtonStyle(), ), ), ); @@ -108,35 +112,37 @@ void main() { expect(find.byIcon(m.Icons.arrow_forward), findsOneWidget); }); - testWidgets('uses custom spinner builder when provided', - (WidgetTester tester) async { - const key = Key('key'); - - await tester.pumpWidget( - m.MaterialApp( - home: Button( - style: const ButtonStyle(), - label: 'Test Button', - onPressed: () {}, - loading: true, - spinnerBuilder: (_) { - return Container( - key: key, - width: 20, - height: 20, - color: m.Colors.red, - ); - }, + testWidgets( + 'uses custom spinner builder when provided', + (WidgetTester tester) async { + const key = Key('key'); + + await tester.pumpWidget( + m.MaterialApp( + home: Button( + label: 'Test Button', + loading: true, + spinnerBuilder: (_) { + return Container( + key: key, + color: m.Colors.red, + width: 20, + height: 20, + ); + }, + onPressed: () {}, + style: const ButtonStyle(), + ), ), - ), - ); + ); - final container = tester.widget(find.byKey(key)); + final container = tester.widget(find.byKey(key)); - expect(container.constraints?.maxWidth, 20); - expect(container.constraints?.maxHeight, 20); - expect(container.color, m.Colors.red); - }); + expect(container.constraints?.maxWidth, 20); + expect(container.constraints?.maxHeight, 20); + expect(container.color, m.Colors.red); + }, + ); testWidgets('applies custom style', (WidgetTester tester) async { const color = m.Colors.red; @@ -168,9 +174,7 @@ class FakeButtonStyle extends ButtonStyle { final $ = spec.utilities; final baseStyle = super.makeStyle(spec); - return Style.create([ - baseStyle(), - $.flexbox.color(color), - ]); + + return Style.create([baseStyle(), $.container.color(color)]); } } diff --git a/packages/remix/test/components/callout/callout_widget_test.dart b/packages/remix/test/components/callout/callout_widget_test.dart index 2b5c6ed5b..3aed59b01 100644 --- a/packages/remix/test/components/callout/callout_widget_test.dart +++ b/packages/remix/test/components/callout/callout_widget_test.dart @@ -70,6 +70,6 @@ class FakeCalloutStyle extends CalloutStyle { final baseStyle = super.makeStyle(spec); - return Style.create([baseStyle(), $.flexContainer.color(color)]); + return Style.create([baseStyle(), $.container.color(color)]); } } diff --git a/packages/remix/test/components/radio/radio_widget_test.dart b/packages/remix/test/components/radio/radio_widget_test.dart index c3af513f0..fe210e115 100644 --- a/packages/remix/test/components/radio/radio_widget_test.dart +++ b/packages/remix/test/components/radio/radio_widget_test.dart @@ -5,32 +5,35 @@ import 'package:remix/src/components/radio/radio.dart'; void main() { group('Radio', () { - testWidgets('renders RxBlankRadio with correct properties', - (WidgetTester tester) async { - bool value = true; - bool? changedValue; - - await tester.pumpWidget( - m.MaterialApp( - home: Radio( - value: value, - onChanged: (v) => changedValue = v, - groupValue: true, - disabled: true, - style: const RadioStyle(), - label: '', + testWidgets( + 'renders RxBlankRadio with correct properties', + (WidgetTester tester) async { + bool value = true; + bool? changedValue; + + await tester.pumpWidget( + m.MaterialApp( + home: Radio( + value: value, + onChanged: (v) => changedValue = v, + groupValue: true, + disabled: true, + style: const RadioStyle(), + label: '', + ), ), - ), - ); + ); - final rxBlankRadio = tester.widget>(find.byType(Radio)); - expect(rxBlankRadio.value, equals(true)); - expect(rxBlankRadio.groupValue, equals(true)); - expect(rxBlankRadio.disabled, equals(true)); + final rxBlankRadio = + tester.widget>(find.byType(Radio)); + expect(rxBlankRadio.value, equals(true)); + expect(rxBlankRadio.groupValue, equals(true)); + expect(rxBlankRadio.disabled, equals(true)); - await tester.tap(find.byType(Radio)); - expect(changedValue, isNull); - }); + await tester.tap(find.byType(Radio)); + expect(changedValue, isNull); + }, + ); testWidgets('applies custom style', (WidgetTester tester) async { const color = m.Colors.red; @@ -39,9 +42,9 @@ void main() { m.MaterialApp( home: Radio( value: false, + onChanged: (_) {}, groupValue: true, disabled: false, - onChanged: (_) {}, style: const FakeRadioStyle(color), label: '', ), @@ -63,10 +66,10 @@ void main() { await tester.pumpWidget( m.MaterialApp( home: Radio( - style: const RadioStyle(), value: value, - groupValue: true, onChanged: (v) => changedValue = v, + groupValue: true, + style: const RadioStyle(), label: '', ), ), @@ -82,10 +85,10 @@ void main() { await tester.pumpWidget( m.MaterialApp( home: Radio( - style: const RadioStyle(), value: false, - groupValue: true, onChanged: (_) {}, + groupValue: true, + style: const RadioStyle(), label: testText, ), ), @@ -99,18 +102,14 @@ void main() { class FakeRadioStyle extends RadioStyle { final m.Color color; - const FakeRadioStyle( - this.color, - ); + const FakeRadioStyle(this.color); @override Style makeStyle(SpecConfiguration spec) { final $ = spec.utilities; final baseStyle = super.makeStyle(spec); - return Style.create([ - baseStyle(), - $.flexContainer.color(color), - ]); + + return Style.create([baseStyle(), $.container.color(color)]); } } diff --git a/packages/remix/test/utils/internal/docs.dart b/packages/remix/test/utils/internal/docs.dart new file mode 100644 index 000000000..e69de29bb