Skip to content

Commit

Permalink
feat: implement a new Mix's primitive component
Browse files Browse the repository at this point in the history
  • Loading branch information
tilucasoli committed Nov 12, 2024
1 parent 6df207f commit 1c21665
Show file tree
Hide file tree
Showing 12 changed files with 1,970 additions and 112 deletions.
30 changes: 13 additions & 17 deletions packages/mix/lib/mix.dart
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
/// /\\\\ /\\\\ /\\\\\\\\\\\ /\\\ /\\\
/// \/\\\\\\ /\\\\\\ \/////\\\/// \///\\\ /\\\/
/// \/\\\//\\\ /\\\//\\\ \/\\\ \///\\\\\\/
/// \/\\\\///\\\/\\\/ \/\\\ \/\\\ \//\\\\
/// \/\\\ \///\\\/ \/\\\ \/\\\ \/\\\\
/// \/\\\ \/// \/\\\ \/\\\ /\\\\\\
/// \/\\\ \/\\\ \/\\\ /\\\////\\\
/// \/\\\ \/\\\ /\\\\\\\\\\\ /\\\/ \///\\\
/// \/// \/// \/////////// \/// \///
///
/// https://fluttermix.com
/// /\\\\ /\\\\ /\\\\\\\\\\\ /\\\ /\\\
/// \/\\\\\\ /\\\\\\ \/////\\\/// \///\\\ /\\\/
/// \/\\\//\\\ /\\\//\\\ \/\\\ \///\\\\\\/
/// \/\\\\///\\\/\\\/ \/\\\ \/\\\ \//\\\\
/// \/\\\ \///\\\/ \/\\\ \/\\\ \/\\\\
/// \/\\\ \/// \/\\\ \/\\\ /\\\\\\
/// \/\\\ \/\\\ \/\\\ /\\\////\\\
/// \/\\\ \/\\\ /\\\\\\\\\\\ /\\\/ \///\\\
/// \/// \/// \/////////// \/// \///
///
/// https://fluttermix.com
///
/// /\///////////////////////////////////////////////////\
/// \/\ ***** GENERATED CODE ***** \ \
/// \/\ ** DO NOT EDIT THIS FILE ** \ \
Expand Down Expand Up @@ -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';
Expand All @@ -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';
Expand All @@ -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';
Expand All @@ -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';
Expand All @@ -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';
Expand All @@ -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';
1 change: 1 addition & 0 deletions packages/mix/lib/src/core/factory/style_widgets_ext.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
98 changes: 3 additions & 95 deletions packages/mix/lib/src/specs/flex/flex_widget.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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),
);

Expand Down Expand Up @@ -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<Widget> 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 <Widget>[],
}) : 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 <Widget>[],
}) : super(direction: Axis.vertical);
}

final _defaultFlex = Flex(direction: Axis.horizontal, children: const []);
111 changes: 111 additions & 0 deletions packages/mix/lib/src/specs/flexbox/flexbox_spec.dart
Original file line number Diff line number Diff line change
@@ -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<FlexBoxSpec>
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<Widget> 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);
}
}
Loading

0 comments on commit 1c21665

Please sign in to comment.