Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rewriting gap feature #151

Closed
wants to merge 1 commit into from
Closed

Rewriting gap feature #151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 19 additions & 14 deletions lib/src/specs/flex/flex_widget.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
import 'package:flutter/widgets.dart';

import '../../core/styled_widget.dart';
import '../../factory/mix_provider.dart';
import '../../factory/mix_provider_data.dart';
import '../../widgets/gap_widget.dart';
import '../container/box_widget.dart';
import 'flex_spec.dart';
import '../../../mix.dart';

/// A flexible layout widget enhanced with `Style` for simplified styling.
///
Expand Down Expand Up @@ -63,13 +58,6 @@ class MixedFlex extends StatelessWidget {
final spec = FlexSpec.of(mix);
final gap = spec.gap;

final spacedChildren = gap == null
? children
: List<Widget>.generate(
children.length * 2 - 1,
(index) => index % 2 == 0 ? children[index ~/ 2] : Gap(gap),
);

return Flex(
direction: direction,
mainAxisAlignment:
Expand All @@ -79,7 +67,24 @@ class MixedFlex extends StatelessWidget {
spec.crossAxisAlignment ?? _defaultFlex.crossAxisAlignment,
verticalDirection:
spec.verticalDirection ?? _defaultFlex.verticalDirection,
children: spacedChildren,
children: buildChildren(gap),
);
}

@visibleForTesting
List<Widget> buildChildren(double? gap) {
if (gap == null) return children;

return List<Widget>.generate(
children.length,
(index) => index == children.length - 1
? children[index]
: Padding(
padding: direction == Axis.horizontal
? EdgeInsets.only(right: gap)
: EdgeInsets.only(bottom: gap),
child: children[index],
),
);
}
}
Expand Down
187 changes: 187 additions & 0 deletions test/src/specs/flex/flex_widget_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:mix/mix.dart';

import '../../../helpers/testing_utils.dart';

void main() {
testWidgets(
'Verify if widgets are wrapped with Padding when there are 2 children',
(tester) async {
await tester.pumpWidget(
VBox(
style: Style(
flex.gap(10),
),
children: const [
SizedBox(),
SizedBox(),
],
),
);

final mixedFlex = find.byType(MixedFlex);

expect(
find.descendant(of: mixedFlex, matching: find.byType(Padding)),
findsNWidgets(1),
);
});

testWidgets(
'Verify if widgets are wrapped with Padding when there are 1 children',
(tester) async {
await tester.pumpWidget(
VBox(
style: Style(
flex.gap(10),
),
children: const [
SizedBox(),
],
),
);

final mixedFlex = find.byType(MixedFlex);

expect(
find.descendant(of: mixedFlex, matching: find.byType(Padding)),
findsNWidgets(0),
);
});

test('Verify if widgets are wrapped with Padding when there are 3 children',
() {
var sut = const MixedFlex(
direction: Axis.horizontal,
children: [
SizedBox(),
SizedBox(),
SizedBox(),
],
).buildChildren(10);

expect(sut.length, 3);

for (var i = 0; i < sut.length; i++) {
expect(sut[i], i == sut.length - 1 ? isA<SizedBox>() : isA<Padding>());
}
});

test('Verify if widgets are wrapped with Padding when there is 1 child', () {
var sut = const MixedFlex(
direction: Axis.horizontal,
children: [
SizedBox(),
],
).buildChildren(10);

expect(sut.length, 1);

for (var i = 0; i < sut.length; i++) {
expect(sut[i], i == sut.length - 1 ? isA<SizedBox>() : isA<Padding>());
}
});

test(
'Verify if when MixedFlex has direction horizontal the padding is only in the right',
() {
var sut = const MixedFlex(
direction: Axis.horizontal,
children: [
SizedBox(),
SizedBox(),
],
).buildChildren(10);

for (var i = 0; i < sut.length; i++) {
if (i == sut.length - 1) continue;

final paddingWidget = sut[i] as Padding;
final edgeInsets = paddingWidget.padding.resolve(TextDirection.ltr);

expect(edgeInsets.right, 10);
expect(edgeInsets.left, 0);
expect(edgeInsets.top, 0);
expect(edgeInsets.bottom, 0);
}
});

test(
'Verify if when MixedFlex has direction horizontal the padding is only in the right',
() {
var sut = const MixedFlex(
direction: Axis.vertical,
children: [
SizedBox(),
SizedBox(),
],
).buildChildren(10);

for (var i = 0; i < sut.length; i++) {
if (i == sut.length - 1) continue;

final paddingWidget = sut[i] as Padding;
final edgeInsets = paddingWidget.padding.resolve(TextDirection.ltr);

expect(edgeInsets.right, 0);
expect(edgeInsets.left, 0);
expect(edgeInsets.top, 0);
expect(edgeInsets.bottom, 10);
}
});

testWidgets(
'HBox with gap() rendered correctly in complex widget tree',
(tester) async {
await tester.pumpMaterialApp(
Center(
child: Column(
children: [
Row(
children: [
HBox(
style: Style(
flex.gap(10),
),
children: const [
StyledText('test'),
StyledText('case'),
],
),
],
),
],
),
),
);
},
);

testWidgets(
'VBox with gap() rendered correctly in complex widget tree',
(tester) async {
await tester.pumpMaterialApp(
Center(
child: Row(
children: [
Column(
children: [
VBox(
style: Style(
flex.gap(10),
),
children: const [
StyledText('test'),
StyledText('case'),
],
),
],
),
],
),
),
);
},
);
}
Loading