Skip to content

Commit 2811942

Browse files
author
fbchen
committed
add more wrapper constraints.
1 parent 905ac4f commit 2811942

File tree

4 files changed

+320
-1
lines changed

4 files changed

+320
-1
lines changed

‎example/home.dart‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import 'guideline.dart';
88
import 'percentage_layout.dart';
99
import 'relative_id.dart';
1010
import 'summary.dart';
11+
import 'wrapper_constraints.dart';
1112

1213
class ExampleHome extends StatelessWidget {
1314
const ExampleHome({Key? key}) : super(key: key);
@@ -52,6 +53,9 @@ class ExampleHome extends StatelessWidget {
5253
button('Relative Id', () {
5354
push(context, const RelativeIdExample());
5455
}),
56+
button('Wrapper Constraints', () {
57+
push(context, const WrapperConstraintsExample());
58+
}),
5559
button('Chain (Coming soon)', null),
5660
const Spacer(),
5761
const Text(

‎example/wrapper_constraints.dart‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:flutter_constraintlayout/src/constraint_layout.dart';
3+
4+
import 'custom_app_bar.dart';
5+
6+
class WrapperConstraintsExample extends StatelessWidget {
7+
const WrapperConstraintsExample({Key? key}) : super(key: key);
8+
9+
Widget item(String text) {
10+
return Container(
11+
width: 100,
12+
height: 100,
13+
color: Colors.redAccent,
14+
alignment: Alignment.center,
15+
child: FittedBox(
16+
child: Text(text),
17+
),
18+
);
19+
}
20+
21+
@override
22+
Widget build(BuildContext context) {
23+
return Scaffold(
24+
appBar: const CustomAppBar(
25+
title: 'Wrapper Constraints',
26+
codePath: 'example/wrapper_constraints.dart',
27+
),
28+
body: ConstraintLayout(
29+
children: [
30+
Container(
31+
color: Colors.yellow,
32+
).applyConstraint(
33+
width: 500,
34+
height: 500,
35+
centerLeftTo: parent,
36+
margin: const EdgeInsets.only(
37+
left: 200,
38+
),
39+
),
40+
Container(
41+
color: Colors.yellow,
42+
).applyConstraint(
43+
width: 500,
44+
height: 500,
45+
centerRightTo: parent,
46+
margin: const EdgeInsets.only(
47+
right: 200,
48+
),
49+
),
50+
item('centerTopLeftTo').applyConstraint(
51+
centerTopLeftTo: rId(0),
52+
),
53+
item('centerTopCenterTo').applyConstraint(
54+
centerTopCenterTo: rId(0),
55+
),
56+
item('centerTopRightTo').applyConstraint(
57+
centerTopRightTo: rId(0),
58+
),
59+
item('centerCenterLeftTo').applyConstraint(
60+
centerCenterLeftTo: rId(0),
61+
),
62+
item('centerCenterRightTo').applyConstraint(
63+
centerCenterRightTo: rId(0),
64+
),
65+
item('centerBottomLeftTo').applyConstraint(
66+
centerBottomLeftTo: rId(0),
67+
),
68+
item('centerBottomCenterTo').applyConstraint(
69+
centerBottomCenterTo: rId(0),
70+
),
71+
item('centerBottomRightTo').applyConstraint(
72+
centerBottomRightTo: rId(0),
73+
),
74+
item('outTopLeftTo').applyConstraint(
75+
outTopLeftTo: rId(1),
76+
),
77+
item('outTopCenterTo').applyConstraint(
78+
outTopCenterTo: rId(1),
79+
),
80+
item('outTopRightTo').applyConstraint(
81+
outTopRightTo: rId(1),
82+
),
83+
item('outCenterLeftTo').applyConstraint(
84+
outCenterLeftTo: rId(1),
85+
),
86+
item('outCenterRightTo').applyConstraint(
87+
outCenterRightTo: rId(1),
88+
),
89+
item('outBottomLeftTo').applyConstraint(
90+
outBottomLeftTo: rId(1),
91+
),
92+
item('outBottomCenterTo').applyConstraint(
93+
outBottomCenterTo: rId(1),
94+
),
95+
item('outBottomRightTo').applyConstraint(
96+
outBottomRightTo: rId(1),
97+
),
98+
],
99+
),
100+
);
101+
}
102+
}

‎lib/src/constraint_layout.dart‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,22 @@ extension ConstrainedWidgetsExt on Widget {
175175
@_wrapperConstraint ConstraintId? bottomRightTo,
176176
@_wrapperConstraint ConstraintId? centerHorizontalTo,
177177
@_wrapperConstraint ConstraintId? centerVerticalTo,
178+
@_wrapperConstraint ConstraintId? outTopLeftTo,
179+
@_wrapperConstraint ConstraintId? outTopCenterTo,
180+
@_wrapperConstraint ConstraintId? outTopRightTo,
181+
@_wrapperConstraint ConstraintId? outCenterLeftTo,
182+
@_wrapperConstraint ConstraintId? outCenterRightTo,
183+
@_wrapperConstraint ConstraintId? outBottomLeftTo,
184+
@_wrapperConstraint ConstraintId? outBottomCenterTo,
185+
@_wrapperConstraint ConstraintId? outBottomRightTo,
186+
@_wrapperConstraint ConstraintId? centerTopLeftTo,
187+
@_wrapperConstraint ConstraintId? centerTopCenterTo,
188+
@_wrapperConstraint ConstraintId? centerTopRightTo,
189+
@_wrapperConstraint ConstraintId? centerCenterLeftTo,
190+
@_wrapperConstraint ConstraintId? centerCenterRightTo,
191+
@_wrapperConstraint ConstraintId? centerBottomLeftTo,
192+
@_wrapperConstraint ConstraintId? centerBottomCenterTo,
193+
@_wrapperConstraint ConstraintId? centerBottomRightTo,
178194
OnLayoutCallback? callback,
179195
double chainWeight = 1,
180196
bool percentageTranslate = false,
@@ -231,6 +247,22 @@ extension ConstrainedWidgetsExt on Widget {
231247
maxHeight: maxHeight,
232248
widthHeightRatio: widthHeightRatio,
233249
ratioBaseOnWidth: ratioBaseOnWidth,
250+
outTopLeftTo: outTopLeftTo,
251+
outTopCenterTo: outTopCenterTo,
252+
outTopRightTo: outTopRightTo,
253+
outCenterLeftTo: outCenterLeftTo,
254+
outCenterRightTo: outCenterRightTo,
255+
outBottomLeftTo: outBottomLeftTo,
256+
outBottomCenterTo: outBottomCenterTo,
257+
outBottomRightTo: outBottomRightTo,
258+
centerTopLeftTo: centerTopLeftTo,
259+
centerTopCenterTo: centerTopCenterTo,
260+
centerTopRightTo: centerTopRightTo,
261+
centerCenterLeftTo: centerCenterLeftTo,
262+
centerCenterRightTo: centerCenterRightTo,
263+
centerBottomLeftTo: centerBottomLeftTo,
264+
centerBottomCenterTo: centerBottomCenterTo,
265+
centerBottomRightTo: centerBottomRightTo,
234266
),
235267
child: this,
236268
);
@@ -554,6 +586,38 @@ class Constraint extends ConstraintDefine {
554586
final ConstraintId? centerHorizontalTo;
555587
@_wrapperConstraint
556588
final ConstraintId? centerVerticalTo;
589+
@_wrapperConstraint
590+
final ConstraintId? outTopLeftTo;
591+
@_wrapperConstraint
592+
final ConstraintId? outTopCenterTo;
593+
@_wrapperConstraint
594+
final ConstraintId? outTopRightTo;
595+
@_wrapperConstraint
596+
final ConstraintId? outCenterLeftTo;
597+
@_wrapperConstraint
598+
final ConstraintId? outCenterRightTo;
599+
@_wrapperConstraint
600+
final ConstraintId? outBottomLeftTo;
601+
@_wrapperConstraint
602+
final ConstraintId? outBottomCenterTo;
603+
@_wrapperConstraint
604+
final ConstraintId? outBottomRightTo;
605+
@_wrapperConstraint
606+
final ConstraintId? centerTopLeftTo;
607+
@_wrapperConstraint
608+
final ConstraintId? centerTopCenterTo;
609+
@_wrapperConstraint
610+
final ConstraintId? centerTopRightTo;
611+
@_wrapperConstraint
612+
final ConstraintId? centerCenterLeftTo;
613+
@_wrapperConstraint
614+
final ConstraintId? centerCenterRightTo;
615+
@_wrapperConstraint
616+
final ConstraintId? centerBottomLeftTo;
617+
@_wrapperConstraint
618+
final ConstraintId? centerBottomCenterTo;
619+
@_wrapperConstraint
620+
final ConstraintId? centerBottomRightTo;
557621

558622
final OnLayoutCallback? callback;
559623
final double chainWeight;
@@ -612,6 +676,22 @@ class Constraint extends ConstraintDefine {
612676
@_wrapperConstraint this.bottomRightTo,
613677
@_wrapperConstraint this.centerHorizontalTo,
614678
@_wrapperConstraint this.centerVerticalTo,
679+
@_wrapperConstraint this.outTopLeftTo,
680+
@_wrapperConstraint this.outTopCenterTo,
681+
@_wrapperConstraint this.outTopRightTo,
682+
@_wrapperConstraint this.outCenterLeftTo,
683+
@_wrapperConstraint this.outCenterRightTo,
684+
@_wrapperConstraint this.outBottomLeftTo,
685+
@_wrapperConstraint this.outBottomCenterTo,
686+
@_wrapperConstraint this.outBottomRightTo,
687+
@_wrapperConstraint this.centerTopLeftTo,
688+
@_wrapperConstraint this.centerTopCenterTo,
689+
@_wrapperConstraint this.centerTopRightTo,
690+
@_wrapperConstraint this.centerCenterLeftTo,
691+
@_wrapperConstraint this.centerCenterRightTo,
692+
@_wrapperConstraint this.centerBottomLeftTo,
693+
@_wrapperConstraint this.centerBottomCenterTo,
694+
@_wrapperConstraint this.centerBottomRightTo,
615695
this.callback,
616696
this.chainWeight = 1,
617697
this.percentageTranslate = false,
@@ -662,6 +742,22 @@ class Constraint extends ConstraintDefine {
662742
bottomRightTo == other.bottomRightTo &&
663743
centerHorizontalTo == other.centerHorizontalTo &&
664744
centerVerticalTo == other.centerVerticalTo &&
745+
outTopLeftTo == other.outTopLeftTo &&
746+
outTopCenterTo == other.outTopCenterTo &&
747+
outTopRightTo == other.outTopRightTo &&
748+
outCenterLeftTo == other.outCenterLeftTo &&
749+
outCenterRightTo == other.outCenterRightTo &&
750+
outBottomLeftTo == other.outBottomLeftTo &&
751+
outBottomCenterTo == other.outBottomCenterTo &&
752+
outBottomRightTo == other.outBottomRightTo &&
753+
centerTopLeftTo == other.centerTopLeftTo &&
754+
centerTopCenterTo == other.centerTopCenterTo &&
755+
centerTopRightTo == other.centerTopRightTo &&
756+
centerCenterLeftTo == other.centerCenterLeftTo &&
757+
centerCenterRightTo == other.centerCenterRightTo &&
758+
centerBottomLeftTo == other.centerBottomLeftTo &&
759+
centerBottomCenterTo == other.centerBottomCenterTo &&
760+
centerBottomRightTo == other.centerBottomRightTo &&
665761
callback == other.callback &&
666762
percentageTranslate == other.percentageTranslate &&
667763
minWidth == other.minWidth &&
@@ -707,6 +803,22 @@ class Constraint extends ConstraintDefine {
707803
bottomRightTo.hashCode ^
708804
centerHorizontalTo.hashCode ^
709805
centerVerticalTo.hashCode ^
806+
outTopLeftTo.hashCode ^
807+
outTopCenterTo.hashCode ^
808+
outTopRightTo.hashCode ^
809+
outCenterLeftTo.hashCode ^
810+
outCenterRightTo.hashCode ^
811+
outBottomLeftTo.hashCode ^
812+
outBottomCenterTo.hashCode ^
813+
outBottomRightTo.hashCode ^
814+
centerTopLeftTo.hashCode ^
815+
centerTopCenterTo.hashCode ^
816+
centerTopRightTo.hashCode ^
817+
centerCenterLeftTo.hashCode ^
818+
centerCenterRightTo.hashCode ^
819+
centerBottomLeftTo.hashCode ^
820+
centerBottomCenterTo.hashCode ^
821+
centerBottomRightTo.hashCode ^
710822
callback.hashCode ^
711823
percentageTranslate.hashCode ^
712824
minWidth.hashCode ^
@@ -845,6 +957,106 @@ class Constraint extends ConstraintDefine {
845957
bottom = centerVerticalTo!.bottom;
846958
}
847959

960+
if (outTopLeftTo != null) {
961+
right = outTopLeftTo!.left;
962+
bottom = outTopLeftTo!.top;
963+
}
964+
965+
if (outTopCenterTo != null) {
966+
left = outTopCenterTo!.left;
967+
right = outTopCenterTo!.right;
968+
bottom = outTopCenterTo!.top;
969+
}
970+
971+
if (outTopRightTo != null) {
972+
left = outTopRightTo!.right;
973+
bottom = outTopRightTo!.top;
974+
}
975+
976+
if (outCenterLeftTo != null) {
977+
top = outCenterLeftTo!.top;
978+
bottom = outCenterLeftTo!.bottom;
979+
right = outCenterLeftTo!.left;
980+
}
981+
982+
if (outCenterRightTo != null) {
983+
top = outCenterRightTo!.top;
984+
bottom = outCenterRightTo!.bottom;
985+
left = outCenterRightTo!.right;
986+
}
987+
988+
if (outBottomLeftTo != null) {
989+
right = outBottomLeftTo!.left;
990+
top = outBottomLeftTo!.bottom;
991+
}
992+
993+
if (outBottomCenterTo != null) {
994+
left = outBottomCenterTo!.left;
995+
right = outBottomCenterTo!.right;
996+
top = outBottomCenterTo!.bottom;
997+
}
998+
999+
if (outBottomRightTo != null) {
1000+
left = outBottomRightTo!.right;
1001+
top = outBottomRightTo!.bottom;
1002+
}
1003+
1004+
if (centerTopLeftTo != null) {
1005+
left = centerTopLeftTo!.left;
1006+
right = centerTopLeftTo!.left;
1007+
top = centerTopLeftTo!.top;
1008+
bottom = centerTopLeftTo!.top;
1009+
}
1010+
1011+
if (centerTopCenterTo != null) {
1012+
left = centerTopCenterTo!.left;
1013+
right = centerTopCenterTo!.right;
1014+
top = centerTopCenterTo!.top;
1015+
bottom = centerTopCenterTo!.top;
1016+
}
1017+
1018+
if (centerTopRightTo != null) {
1019+
left = centerTopRightTo!.right;
1020+
right = centerTopRightTo!.right;
1021+
top = centerTopRightTo!.top;
1022+
bottom = centerTopRightTo!.top;
1023+
}
1024+
1025+
if (centerCenterLeftTo != null) {
1026+
left = centerCenterLeftTo!.left;
1027+
right = centerCenterLeftTo!.left;
1028+
top = centerCenterLeftTo!.top;
1029+
bottom = centerCenterLeftTo!.bottom;
1030+
}
1031+
1032+
if (centerCenterRightTo != null) {
1033+
left = centerCenterRightTo!.right;
1034+
right = centerCenterRightTo!.right;
1035+
top = centerCenterRightTo!.top;
1036+
bottom = centerCenterRightTo!.bottom;
1037+
}
1038+
1039+
if (centerBottomLeftTo != null) {
1040+
left = centerBottomLeftTo!.left;
1041+
right = centerBottomLeftTo!.left;
1042+
top = centerBottomLeftTo!.bottom;
1043+
bottom = centerBottomLeftTo!.bottom;
1044+
}
1045+
1046+
if (centerBottomCenterTo != null) {
1047+
left = centerBottomCenterTo!.left;
1048+
right = centerBottomCenterTo!.right;
1049+
top = centerBottomCenterTo!.bottom;
1050+
bottom = centerBottomCenterTo!.bottom;
1051+
}
1052+
1053+
if (centerBottomRightTo != null) {
1054+
left = centerBottomRightTo!.right;
1055+
right = centerBottomRightTo!.right;
1056+
top = centerBottomRightTo!.bottom;
1057+
bottom = centerBottomRightTo!.bottom;
1058+
}
1059+
8481060
/// Convert wrapper constraints finish
8491061
8501062
/// Constraint priority: matchParent > wrapper constraints > base constraints

‎pubspec.yaml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,5 @@ flutter:
2929
- example/summary.dart
3030
- example/percentage_layout.dart
3131
- example/dimension_ratio.dart
32-
- example/relative_id.dart
32+
- example/relative_id.dart
33+
- example/wrapper_constraints.dart

0 commit comments

Comments
 (0)