Skip to content

Commit 3f9461a

Browse files
author
fbchen
committed
preprocess constraints for performance improve
1 parent 11b1a6d commit 3f9461a

File tree

2 files changed

+547
-65
lines changed

2 files changed

+547
-65
lines changed

‎example/preprocess_complex_list.dart‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
import 'package:flutter/cupertino.dart';
2+
import 'package:flutter/material.dart';
3+
import 'package:flutter_constraintlayout/flutter_constraintlayout.dart';
4+
5+
class PreprocessComplexListExample extends StatelessWidget {
6+
const PreprocessComplexListExample({Key? key}) : super(key: key);
7+
8+
@override
9+
Widget build(BuildContext context) {
10+
TextStyle style = const TextStyle(
11+
color: Colors.white,
12+
);
13+
14+
List<Color> colors = [
15+
Colors.redAccent,
16+
Colors.orangeAccent,
17+
Colors.deepPurpleAccent,
18+
Colors.black,
19+
Colors.cyan,
20+
Colors.pink,
21+
];
22+
23+
ConstraintId background = ConstraintId('background');
24+
ConstraintId topLeft = ConstraintId('topLeft');
25+
ConstraintId topCenter = ConstraintId('topCenter');
26+
ConstraintId topRight = ConstraintId('topRight');
27+
ConstraintId centerLeft = ConstraintId('centerLeft');
28+
ConstraintId center = ConstraintId('center');
29+
ConstraintId centerRight = ConstraintId('centerRight');
30+
ConstraintId bottomLeft = ConstraintId('bottomLeft');
31+
ConstraintId bottomCenter = ConstraintId('bottomCenter');
32+
ConstraintId bottomRight = ConstraintId('bottomRight');
33+
ConstraintId leftImg = ConstraintId('leftImg');
34+
ConstraintId rightImg = ConstraintId('rightImg');
35+
36+
List<Constraint> childConstraints = [
37+
Constraint(
38+
width: matchParent,
39+
height: matchParent,
40+
id: background,
41+
),
42+
Constraint(
43+
width: 100,
44+
height: wrapContent,
45+
centerLeftTo: parent,
46+
id: leftImg,
47+
),
48+
Constraint(
49+
width: 150,
50+
height: wrapContent,
51+
centerRightTo: parent,
52+
id: rightImg,
53+
),
54+
Constraint(
55+
topLeftTo: parent,
56+
id: topLeft,
57+
),
58+
Constraint(
59+
topCenterTo: parent,
60+
id: topCenter,
61+
),
62+
Constraint(
63+
topRightTo: parent,
64+
id: topRight,
65+
),
66+
Constraint(
67+
centerLeftTo: parent,
68+
id: centerLeft,
69+
),
70+
Constraint(
71+
centerTo: parent,
72+
id: center,
73+
),
74+
Constraint(
75+
centerRightTo: parent,
76+
id: centerRight,
77+
),
78+
Constraint(
79+
bottomLeftTo: parent,
80+
id: bottomLeft,
81+
),
82+
Constraint(
83+
bottomCenterTo: parent,
84+
id: bottomCenter,
85+
),
86+
Constraint(
87+
bottomRightTo: parent,
88+
id: bottomRight,
89+
),
90+
];
91+
92+
/// Using preprocessed constraints can improve performance, especially when
93+
/// the ListView is swiping quickly, constraints are no longer calculated during
94+
/// layout. Need to be used in conjunction with childConstraints.
95+
ProcessedChildConstraints processedChildConstraints =
96+
ConstraintLayout.preprocess(childConstraints);
97+
98+
return MaterialApp(
99+
home: Scaffold(
100+
body: ListView.builder(
101+
itemBuilder: (context, index) {
102+
if (index == 0) {
103+
return const Text(
104+
'Very complex item view can also achieve full frame',
105+
style: TextStyle(
106+
color: Colors.black,
107+
fontSize: 20,
108+
),
109+
textAlign: TextAlign.center,
110+
);
111+
}
112+
return ConstraintLayout(
113+
preprocessChildConstraints: true,
114+
childConstraints: childConstraints,
115+
processedChildConstraints: processedChildConstraints,
116+
children: [
117+
Container(
118+
color: colors[index % 6],
119+
).applyConstraintId(
120+
id: background,
121+
),
122+
Image.asset(
123+
'assets/test.png',
124+
fit: BoxFit.fill,
125+
).applyConstraintId(
126+
id: leftImg,
127+
),
128+
Image.asset(
129+
'assets/test2.png',
130+
fit: BoxFit.fill,
131+
).applyConstraintId(
132+
id: rightImg,
133+
),
134+
Text(
135+
'topLeft $index',
136+
style: style,
137+
).applyConstraintId(
138+
id: topLeft,
139+
),
140+
Text(
141+
'topCenter $index',
142+
style: style,
143+
).applyConstraintId(
144+
id: topCenter,
145+
),
146+
Text(
147+
'topRight $index',
148+
style: style,
149+
).applyConstraintId(
150+
id: topRight,
151+
),
152+
Text(
153+
'centerLeft $index',
154+
style: style,
155+
).applyConstraintId(
156+
id: centerLeft,
157+
),
158+
Text(
159+
'center $index',
160+
style: style,
161+
).applyConstraintId(
162+
id: center,
163+
),
164+
Text(
165+
'centerRight $index',
166+
style: style,
167+
).applyConstraintId(
168+
id: centerRight,
169+
),
170+
Text(
171+
'bottomLeft $index',
172+
style: style,
173+
).applyConstraintId(
174+
id: bottomLeft,
175+
),
176+
Text(
177+
'bottomCenter $index',
178+
style: style,
179+
).applyConstraintId(
180+
id: bottomCenter,
181+
),
182+
Text(
183+
'bottomRight $index',
184+
style: style,
185+
).applyConstraintId(
186+
id: bottomRight,
187+
)
188+
],
189+
);
190+
},
191+
itemCount: 10000,
192+
itemExtent: 80,
193+
),
194+
),
195+
);
196+
}
197+
}

0 commit comments

Comments
 (0)