Skip to content

Commit 4ea6efe

Browse files
tilucasolitilucasoli
authored
feat: Rewrite FlexBox as a Mix's primitive component (#517)
1 parent 6df207f commit 4ea6efe

35 files changed

+2041
-239
lines changed

‎lints_with_dcm.yaml

+6-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,12 @@ dart_code_metrics:
2525
prefer-prefixed-global-constants: false
2626
avoid-returning-widgets: false
2727
arguments-ordering:
28-
child-last: true
28+
first:
29+
- key
30+
- spec
31+
last:
32+
- child
33+
- children
2934
avoid-nested-conditional-expressions:
3035
acceptable-level: 3
3136
member-ordering:

‎melos.yaml

+2-2
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,11 @@ scripts:
3030
failFast: true
3131

3232
analyze:dart:
33-
run: melos exec -c 10 -- dart analyze .
33+
run: melos exec -c 4 -- dart analyze .
3434
description: Run Dart static analysis checks.
3535

3636
analyze:dcm:
37-
run: melos exec -c 10 -- dcm analyze . --fatal-style --fatal-performance --fatal-warnings
37+
run: melos exec -c 4 -- dcm analyze . --fatal-style --fatal-performance --fatal-warnings
3838
description: Run DCM static analysis checks.
3939
packageFilters:
4040
dependsOn: "dart_code_metrics_presets"

‎packages/mix/example/lib/main.dart

+9-16
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
import 'package:flutter/material.dart';
22
import 'package:mix/mix.dart';
33

4-
void main() async {
5-
runApp(
6-
const MaterialApp(
7-
home: MyApp(),
8-
),
9-
);
4+
void main() {
5+
runApp(const MaterialApp(home: MyApp()));
106
}
117

128
final style = Style(
@@ -17,11 +13,7 @@ final style = Style(
1713
$box.borderRadius(10),
1814
$box.padding(20, 10),
1915
$box.margin(10),
20-
$box.border(
21-
color: Colors.black,
22-
width: 1,
23-
style: BorderStyle.solid,
24-
),
16+
$box.border(color: Colors.black, style: BorderStyle.solid, width: 1),
2517
);
2618

2719
class MyApp extends StatelessWidget {
@@ -30,11 +22,12 @@ class MyApp extends StatelessWidget {
3022
@override
3123
Widget build(BuildContext context) {
3224
return Scaffold(
33-
body: Center(
34-
child: Box(
35-
style: style,
36-
child: const Center(child: Text('Hello Mix')),
25+
body: Center(
26+
child: Box(
27+
style: style,
28+
child: const Center(child: Text('Hello Mix')),
29+
),
3730
),
38-
));
31+
);
3932
}
4033
}

‎packages/mix/lib/mix.dart

+13-17
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
/// /\\\\ /\\\\ /\\\\\\\\\\\ /\\\ /\\\
2-
/// \/\\\\\\ /\\\\\\ \/////\\\/// \///\\\ /\\\/
3-
/// \/\\\//\\\ /\\\//\\\ \/\\\ \///\\\\\\/
4-
/// \/\\\\///\\\/\\\/ \/\\\ \/\\\ \//\\\\
5-
/// \/\\\ \///\\\/ \/\\\ \/\\\ \/\\\\
6-
/// \/\\\ \/// \/\\\ \/\\\ /\\\\\\
7-
/// \/\\\ \/\\\ \/\\\ /\\\////\\\
8-
/// \/\\\ \/\\\ /\\\\\\\\\\\ /\\\/ \///\\\
9-
/// \/// \/// \/////////// \/// \///
10-
///
11-
/// https://fluttermix.com
1+
/// /\\\\ /\\\\ /\\\\\\\\\\\ /\\\ /\\\
2+
/// \/\\\\\\ /\\\\\\ \/////\\\/// \///\\\ /\\\/
3+
/// \/\\\//\\\ /\\\//\\\ \/\\\ \///\\\\\\/
4+
/// \/\\\\///\\\/\\\/ \/\\\ \/\\\ \//\\\\
5+
/// \/\\\ \///\\\/ \/\\\ \/\\\ \/\\\\
6+
/// \/\\\ \/// \/\\\ \/\\\ /\\\\\\
7+
/// \/\\\ \/\\\ \/\\\ /\\\////\\\
8+
/// \/\\\ \/\\\ /\\\\\\\\\\\ /\\\/ \///\\\
9+
/// \/// \/// \/////////// \/// \///
1210
///
11+
/// https://fluttermix.com
12+
///
1313
/// /\///////////////////////////////////////////////////\
1414
/// \/\ ***** GENERATED CODE ***** \ \
1515
/// \/\ ** DO NOT EDIT THIS FILE ** \ \
@@ -54,7 +54,6 @@ export 'src/attributes/strut_style/strut_style_dto.dart';
5454
export 'src/attributes/text_height_behavior/text_height_behavior_dto.dart';
5555
export 'src/attributes/text_style/text_style_dto.dart';
5656
export 'src/attributes/text_style/text_style_util.dart';
57-
5857
/// CORE
5958
export 'src/core/attribute.dart';
6059
export 'src/core/attributes_map.dart';
@@ -72,7 +71,6 @@ export 'src/core/styled_widget.dart';
7271
export 'src/core/utility.dart';
7372
export 'src/core/variant.dart';
7473
export 'src/core/widget_state/widget_state_controller.dart';
75-
7674
/// MODIFIERS
7775
export 'src/modifiers/align_widget_modifier.dart';
7876
export 'src/modifiers/aspect_ratio_widget_modifier.dart';
@@ -89,12 +87,13 @@ export 'src/modifiers/sized_box_widget_modifier.dart';
8987
export 'src/modifiers/transform_widget_modifier.dart';
9088
export 'src/modifiers/visibility_widget_modifier.dart';
9189
export 'src/modifiers/widget_modifiers_util.dart';
92-
9390
/// SPECS
9491
export 'src/specs/box/box_spec.dart';
9592
export 'src/specs/box/box_widget.dart';
9693
export 'src/specs/flex/flex_spec.dart';
9794
export 'src/specs/flex/flex_widget.dart';
95+
export 'src/specs/flexbox/flexbox_spec.dart';
96+
export 'src/specs/flexbox/flexbox_widget.dart';
9897
export 'src/specs/icon/icon_spec.dart';
9998
export 'src/specs/icon/icon_widget.dart';
10099
export 'src/specs/image/image_spec.dart';
@@ -105,7 +104,6 @@ export 'src/specs/stack/stack_widget.dart';
105104
export 'src/specs/text/text_directives_util.dart';
106105
export 'src/specs/text/text_spec.dart';
107106
export 'src/specs/text/text_widget.dart';
108-
109107
/// THEME
110108
export 'src/theme/material/material_theme.dart';
111109
export 'src/theme/material/material_tokens.dart';
@@ -118,7 +116,6 @@ export 'src/theme/tokens/space_token.dart';
118116
export 'src/theme/tokens/text_style_token.dart';
119117
export 'src/theme/tokens/token_resolver.dart';
120118
export 'src/theme/tokens/token_util.dart';
121-
122119
/// VARIANTS
123120
export 'src/variants/context_variant.dart';
124121
export 'src/variants/context_variant_util/on_breakpoint_util.dart';
@@ -130,6 +127,5 @@ export 'src/variants/context_variant_util/on_platform_util.dart';
130127
export 'src/variants/context_variant_util/on_util.dart';
131128
export 'src/variants/variant_attribute.dart';
132129
export 'src/variants/widget_state_variant.dart';
133-
134130
/// WIDGETS
135131
export 'src/widgets/pressable_widget.dart';

‎packages/mix/lib/src/core/factory/style_widgets_ext.dart

+9-8
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import 'package:flutter/widgets.dart';
33

44
import '../../specs/box/box_widget.dart';
55
import '../../specs/flex/flex_widget.dart';
6+
import '../../specs/flexbox/flexbox_widget.dart';
67
import '../../specs/icon/icon_widget.dart';
78
import '../../specs/text/text_widget.dart';
89
import 'style_mix.dart';
@@ -15,8 +16,8 @@ extension StyleExt on Style {
1516
Style? style,
1617
}) {
1718
return Box(
18-
style: merge(style),
1919
key: key,
20+
style: merge(style),
2021
inherit: inherit,
2122
child: child,
2223
);
@@ -28,7 +29,7 @@ extension StyleExt on Style {
2829
Key? key,
2930
Style? style,
3031
}) {
31-
return container(inherit: inherit, key: key, style: style, child: child);
32+
return container(key: key, inherit: inherit, style: style, child: child);
3233
}
3334

3435
HBox hbox({
@@ -38,8 +39,8 @@ extension StyleExt on Style {
3839
Style? style,
3940
}) {
4041
return HBox(
41-
style: merge(style),
4242
key: key,
43+
style: merge(style),
4344
inherit: inherit,
4445
children: children,
4546
);
@@ -52,8 +53,8 @@ extension StyleExt on Style {
5253
Style? style,
5354
}) {
5455
return StyledRow(
55-
style: merge(style),
5656
key: key,
57+
style: merge(style),
5758
inherit: inherit,
5859
children: children,
5960
);
@@ -68,9 +69,9 @@ extension StyleExt on Style {
6869
}) {
6970
return StyledText(
7071
text,
72+
key: key,
7173
semanticsLabel: semanticsLabel,
7274
style: merge(style),
73-
key: key,
7475
inherit: inherit,
7576
);
7677
}
@@ -82,8 +83,8 @@ extension StyleExt on Style {
8283
Style? style,
8384
}) {
8485
return VBox(
85-
style: merge(style),
8686
key: key,
87+
style: merge(style),
8788
inherit: inherit,
8889
children: children,
8990
);
@@ -96,8 +97,8 @@ extension StyleExt on Style {
9697
Style? style,
9798
}) {
9899
return StyledColumn(
99-
style: merge(style),
100100
key: key,
101+
style: merge(style),
101102
inherit: inherit,
102103
children: children,
103104
);
@@ -109,6 +110,6 @@ extension StyleExt on Style {
109110
Key? key,
110111
Style? style,
111112
}) {
112-
return StyledIcon(icon, style: merge(style), key: key, inherit: inherit);
113+
return StyledIcon(icon, key: key, style: merge(style), inherit: inherit);
113114
}
114115
}

‎packages/mix/lib/src/specs/box/box_widget.dart

+1-1
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,8 @@ class BoxSpecWidget extends StatelessWidget {
7474
@override
7575
Widget build(BuildContext context) {
7676
return RenderSpecModifiers(
77-
orderOfModifiers: orderOfModifiers,
7877
spec: spec ?? const BoxSpec(),
78+
orderOfModifiers: orderOfModifiers,
7979
child: Container(
8080
alignment: spec?.alignment,
8181
padding: spec?.padding,

‎packages/mix/lib/src/specs/flex/flex_widget.dart

+4-96
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import 'package:flutter/widgets.dart';
44

55
import '../../core/styled_widget.dart';
66
import '../../modifiers/internal/render_widget_modifier.dart';
7-
import '../box/box_spec.dart';
87
import 'flex_spec.dart';
98

109
/// A flexible layout widget enhanced with `Style` for simplified styling.
@@ -88,16 +87,19 @@ class FlexSpecWidget extends StatelessWidget {
8887
mainAxisSize: spec?.mainAxisSize ?? _defaultFlex.mainAxisSize,
8988
crossAxisAlignment:
9089
spec?.crossAxisAlignment ?? _defaultFlex.crossAxisAlignment,
90+
textDirection: spec?.textDirection ?? _defaultFlex.textDirection,
9191
verticalDirection:
9292
spec?.verticalDirection ?? _defaultFlex.verticalDirection,
93+
textBaseline: spec?.textBaseline ?? _defaultFlex.textBaseline,
94+
clipBehavior: spec?.clipBehavior ?? _defaultFlex.clipBehavior,
9395
children: _buildChildren(gap),
9496
);
9597

9698
return spec == null
9799
? flexWidget
98100
: RenderSpecModifiers(
99-
orderOfModifiers: orderOfModifiers,
100101
spec: spec!,
102+
orderOfModifiers: orderOfModifiers,
101103
child: flexWidget,
102104
);
103105
}
@@ -200,98 +202,4 @@ class StyledColumn extends StyledFlex {
200202
}) : super(direction: Axis.vertical);
201203
}
202204

203-
/// A flex container widget with integrated `Style` for enhanced styling.
204-
///
205-
/// `FlexBox` combines the features of `StyledContainer` and `StyledFlex`, offering
206-
/// a powerful tool for creating flexible layouts with advanced styling capabilities
207-
/// through `Style`. It's perfect for designing complex layouts that require both
208-
/// container and flex properties with uniform styling.
209-
///
210-
/// The `direction` parameter sets the layout's orientation, while the `Style`
211-
/// integration simplifies the process of applying consistent styles to all elements.
212-
///
213-
/// Example Usage:
214-
/// ```dart
215-
/// FlexBox(
216-
/// direction: Axis.horizontal,
217-
/// style: yourStyle,
218-
/// children: [Widget1(), Widget2()],
219-
/// );
220-
/// ```
221-
class FlexBox extends StyledWidget {
222-
const FlexBox({
223-
super.style,
224-
super.key,
225-
super.inherit,
226-
required this.direction,
227-
required this.children,
228-
super.orderOfModifiers = const [],
229-
});
230-
231-
final List<Widget> children;
232-
final Axis direction;
233-
234-
@override
235-
Widget build(BuildContext context) {
236-
return withMix(context, (mix) {
237-
final boxSpec = BoxSpec.of(mix);
238-
final flexSpec = FlexSpec.of(mix);
239-
240-
return boxSpec(
241-
orderOfModifiers: orderOfModifiers,
242-
child: flexSpec(direction: direction, children: children),
243-
);
244-
});
245-
}
246-
}
247-
248-
/// A horizontal flex container with `Style` for easy and consistent styling.
249-
///
250-
/// `HBox` is a specialized `FlexBox` designed for horizontal layouts, simplifying
251-
/// the process of applying horizontal alignment with advanced styling via `Style`.
252-
/// It's an efficient way to achieve consistent styling in horizontal arrangements.
253-
///
254-
/// Inherits all functionalities of `FlexBox`, optimized for horizontal layouts.
255-
///
256-
/// Example Usage:
257-
/// ```dart
258-
/// HBox(
259-
/// style: yourStyle,
260-
/// children: [Widget1(), Widget2()],
261-
/// );
262-
/// ```
263-
class HBox extends FlexBox {
264-
const HBox({
265-
super.style,
266-
super.key,
267-
super.inherit,
268-
super.children = const <Widget>[],
269-
}) : super(direction: Axis.horizontal);
270-
}
271-
272-
/// A vertical flex container that uses `Style` for streamlined styling.
273-
///
274-
/// `VBox` is a vertical counterpart to `HBox`, utilizing `Style` for efficient
275-
/// and consistent styling in vertical layouts. It offers an easy way to manage
276-
/// vertical alignment and styling in a cohesive manner.
277-
///
278-
/// Inherits the comprehensive styling and layout capabilities of `FlexBox`, tailored
279-
/// for vertical orientations.
280-
///
281-
/// Example Usage:
282-
/// ```dart
283-
/// VBox(
284-
/// style: yourStyle,
285-
/// children: [Widget1(), Widget2()],
286-
/// );
287-
/// ```
288-
class VBox extends FlexBox {
289-
const VBox({
290-
super.style,
291-
super.key,
292-
super.inherit,
293-
super.children = const <Widget>[],
294-
}) : super(direction: Axis.vertical);
295-
}
296-
297205
final _defaultFlex = Flex(direction: Axis.horizontal, children: const []);

0 commit comments

Comments
 (0)