-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmd_architecture.drawio
275 lines (275 loc) · 76.1 KB
/
md_architecture.drawio
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
<mxfile host="app.diagrams.net" modified="2022-07-15T15:06:51.968Z" agent="5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36" etag="3S3w9tB2ZLJOUVzxMNkV" version="20.1.1" type="github" pages="3">
<diagram id="tFQ0ERwNX2ZqUiJH5gMG" name="Page-1">
<mxGraphModel dx="1410" dy="292" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="wdb4Ms79B8yGjbeq962m-16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.674;entryY=-0.037;entryDx=0;entryDy=0;entryPerimeter=0;fontColor=#330000;" parent="1" source="wdb4Ms79B8yGjbeq962m-2" target="wdb4Ms79B8yGjbeq962m-12" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="wdb4Ms79B8yGjbeq962m-18" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.34;entryY=-0.003;entryDx=0;entryDy=0;entryPerimeter=0;fontColor=#330000;" parent="1" source="wdb4Ms79B8yGjbeq962m-2" target="wdb4Ms79B8yGjbeq962m-11" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="wdb4Ms79B8yGjbeq962m-19" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;fontColor=#330000;" parent="1" source="wdb4Ms79B8yGjbeq962m-2" target="wdb4Ms79B8yGjbeq962m-13" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="wdb4Ms79B8yGjbeq962m-20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontColor=#330000;" parent="1" source="wdb4Ms79B8yGjbeq962m-2" target="wdb4Ms79B8yGjbeq962m-15" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="XSB1eu32Z3oZ6DMUe11a-2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" source="wdb4Ms79B8yGjbeq962m-2" target="XSB1eu32Z3oZ6DMUe11a-1" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="wdb4Ms79B8yGjbeq962m-2" value="Project" style="ellipse;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="440" y="50" width="120" height="80" as="geometry" />
</mxCell>
<mxCell id="wdb4Ms79B8yGjbeq962m-11" value="<div>application.dart</div><div><br></div>" style="verticalLabelPosition=bottom;html=1;verticalAlign=top;align=center;strokeColor=none;fillColor=#00BEF2;shape=mxgraph.azure.code_file;pointerEvents=1;fontColor=#330000;" parent="1" vertex="1">
<mxGeometry x="-3.75" y="150" width="47.5" height="50" as="geometry" />
</mxCell>
<mxCell id="wdb4Ms79B8yGjbeq962m-12" value="main.dart" style="verticalLabelPosition=bottom;html=1;verticalAlign=top;align=center;strokeColor=none;fillColor=#00BEF2;shape=mxgraph.azure.code_file;pointerEvents=1;fontColor=#330000;" parent="1" vertex="1">
<mxGeometry x="-160" y="150" width="47.5" height="50" as="geometry" />
</mxCell>
<mxCell id="wdb4Ms79B8yGjbeq962m-13" value="initializer.dart" style="verticalLabelPosition=bottom;html=1;verticalAlign=top;align=center;strokeColor=none;fillColor=#00BEF2;shape=mxgraph.azure.code_file;pointerEvents=1;fontColor=#330000;" parent="1" vertex="1">
<mxGeometry x="150" y="150" width="47.5" height="50" as="geometry" />
</mxCell>
<mxCell id="wdb4Ms79B8yGjbeq962m-30" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontColor=#330000;" parent="1" source="wdb4Ms79B8yGjbeq962m-15" target="wdb4Ms79B8yGjbeq962m-23" edge="1">
<mxGeometry relative="1" as="geometry">
<Array as="points">
<mxPoint x="550" y="183" />
<mxPoint x="550" y="270" />
<mxPoint x="125" y="270" />
</Array>
</mxGeometry>
</mxCell>
<mxCell id="XMhONWHRSR3KESh7TNqj-18" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="wdb4Ms79B8yGjbeq962m-15" target="XMhONWHRSR3KESh7TNqj-19" edge="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="990" y="350" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="XSB1eu32Z3oZ6DMUe11a-17" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="wdb4Ms79B8yGjbeq962m-15" target="XSB1eu32Z3oZ6DMUe11a-18" edge="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="1770" y="210" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="3jFgt_hRMeqxmWvYARjA-22" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="wdb4Ms79B8yGjbeq962m-15" target="3jFgt_hRMeqxmWvYARjA-21">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="3jFgt_hRMeqxmWvYARjA-33" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="wdb4Ms79B8yGjbeq962m-15" target="3jFgt_hRMeqxmWvYARjA-32">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="wdb4Ms79B8yGjbeq962m-15" value="src" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.concepts.folder;fillColor=#2072B8;fontColor=#330000;" parent="1" vertex="1">
<mxGeometry x="570" y="160" width="50" height="45" as="geometry" />
</mxCell>
<mxCell id="wdb4Ms79B8yGjbeq962m-31" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontColor=#330000;" parent="1" source="wdb4Ms79B8yGjbeq962m-23" target="wdb4Ms79B8yGjbeq962m-26" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="wdb4Ms79B8yGjbeq962m-32" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontColor=#330000;" parent="1" source="wdb4Ms79B8yGjbeq962m-23" target="wdb4Ms79B8yGjbeq962m-27" edge="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="200" y="410" as="targetPoint" />
<Array as="points">
<mxPoint x="190" y="353" />
</Array>
</mxGeometry>
</mxCell>
<mxCell id="wdb4Ms79B8yGjbeq962m-33" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontColor=#330000;" parent="1" source="wdb4Ms79B8yGjbeq962m-23" target="wdb4Ms79B8yGjbeq962m-28" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="wdb4Ms79B8yGjbeq962m-23" value="config" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.concepts.folder;fillColor=#2072B8;fontColor=#330000;" parent="1" vertex="1">
<mxGeometry x="100" y="330" width="50" height="45" as="geometry" />
</mxCell>
<mxCell id="XMhONWHRSR3KESh7TNqj-10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" source="wdb4Ms79B8yGjbeq962m-26" target="XMhONWHRSR3KESh7TNqj-1" edge="1">
<mxGeometry relative="1" as="geometry">
<Array as="points">
<mxPoint x="10" y="492.5" />
<mxPoint x="10" y="590" />
</Array>
</mxGeometry>
</mxCell>
<mxCell id="wdb4Ms79B8yGjbeq962m-26" value="navigators" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.concepts.folder;fillColor=#2072B8;fontColor=#330000;" parent="1" vertex="1">
<mxGeometry x="30" y="470" width="50" height="45" as="geometry" />
</mxCell>
<mxCell id="XMhONWHRSR3KESh7TNqj-11" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="wdb4Ms79B8yGjbeq962m-27" target="XMhONWHRSR3KESh7TNqj-2" edge="1">
<mxGeometry relative="1" as="geometry">
<Array as="points">
<mxPoint x="140" y="492" />
<mxPoint x="140" y="595" />
</Array>
</mxGeometry>
</mxCell>
<mxCell id="wdb4Ms79B8yGjbeq962m-27" value="routes" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.concepts.folder;fillColor=#2072B8;fontColor=#330000;" parent="1" vertex="1">
<mxGeometry x="160" y="470" width="50" height="45" as="geometry" />
</mxCell>
<mxCell id="XMhONWHRSR3KESh7TNqj-12" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" source="wdb4Ms79B8yGjbeq962m-28" target="XMhONWHRSR3KESh7TNqj-5" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="XMhONWHRSR3KESh7TNqj-13" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.356;entryY=0.211;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" source="wdb4Ms79B8yGjbeq962m-28" target="XMhONWHRSR3KESh7TNqj-4" edge="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="370" y="510" as="sourcePoint" />
<Array as="points">
<mxPoint x="370" y="492" />
<mxPoint x="370" y="571" />
</Array>
</mxGeometry>
</mxCell>
<mxCell id="XMhONWHRSR3KESh7TNqj-14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="wdb4Ms79B8yGjbeq962m-28" target="XMhONWHRSR3KESh7TNqj-6" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="wdb4Ms79B8yGjbeq962m-28" value="themes" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.concepts.folder;fillColor=#2072B8;fontColor=#330000;" parent="1" vertex="1">
<mxGeometry x="400" y="470" width="50" height="45" as="geometry" />
</mxCell>
<mxCell id="XMhONWHRSR3KESh7TNqj-1" value="navigators.dart" style="verticalLabelPosition=bottom;html=1;verticalAlign=top;align=center;strokeColor=none;fillColor=#00BEF2;shape=mxgraph.azure.code_file;pointerEvents=1;fontColor=#330000;" parent="1" vertex="1">
<mxGeometry x="31.25" y="590" width="47.5" height="50" as="geometry" />
</mxCell>
<mxCell id="XMhONWHRSR3KESh7TNqj-2" value="routes.dart" style="verticalLabelPosition=bottom;html=1;verticalAlign=top;align=center;strokeColor=none;fillColor=#00BEF2;shape=mxgraph.azure.code_file;pointerEvents=1;fontColor=#330000;" parent="1" vertex="1">
<mxGeometry x="161.25" y="570" width="47.5" height="50" as="geometry" />
</mxCell>
<mxCell id="XMhONWHRSR3KESh7TNqj-4" value="text_themes.dart" style="verticalLabelPosition=bottom;html=1;verticalAlign=top;align=center;strokeColor=none;fillColor=#00BEF2;shape=mxgraph.azure.code_file;pointerEvents=1;fontColor=#330000;" parent="1" vertex="1">
<mxGeometry x="450" y="590" width="47.5" height="50" as="geometry" />
</mxCell>
<mxCell id="XMhONWHRSR3KESh7TNqj-5" value="app_themes.dart" style="verticalLabelPosition=bottom;html=1;verticalAlign=top;align=center;strokeColor=none;fillColor=#00BEF2;shape=mxgraph.azure.code_file;pointerEvents=1;fontColor=#330000;" parent="1" vertex="1">
<mxGeometry x="290" y="600" width="47.5" height="50" as="geometry" />
</mxCell>
<mxCell id="XMhONWHRSR3KESh7TNqj-6" value="button_themes.dart" style="verticalLabelPosition=bottom;html=1;verticalAlign=top;align=center;strokeColor=none;fillColor=#00BEF2;shape=mxgraph.azure.code_file;pointerEvents=1;fontColor=#330000;" parent="1" vertex="1">
<mxGeometry x="572.5" y="590" width="47.5" height="50" as="geometry" />
</mxCell>
<mxCell id="XMhONWHRSR3KESh7TNqj-22" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="XMhONWHRSR3KESh7TNqj-19" target="XMhONWHRSR3KESh7TNqj-21" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="XSB1eu32Z3oZ6DMUe11a-14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="XMhONWHRSR3KESh7TNqj-19" target="XSB1eu32Z3oZ6DMUe11a-13" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="3jFgt_hRMeqxmWvYARjA-13" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="XMhONWHRSR3KESh7TNqj-19" target="3jFgt_hRMeqxmWvYARjA-14">
<mxGeometry relative="1" as="geometry">
<mxPoint x="1140" y="490" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="XMhONWHRSR3KESh7TNqj-19" value="core" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.concepts.folder;fillColor=#2072B8;fontColor=#330000;" parent="1" vertex="1">
<mxGeometry x="1200" y="300" width="50" height="45" as="geometry" />
</mxCell>
<mxCell id="XSB1eu32Z3oZ6DMUe11a-5" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" source="XMhONWHRSR3KESh7TNqj-21" target="XSB1eu32Z3oZ6DMUe11a-4" edge="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="760" y="530.0000000000002" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="XSB1eu32Z3oZ6DMUe11a-7" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.691;entryY=0.077;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" source="XMhONWHRSR3KESh7TNqj-21" target="XSB1eu32Z3oZ6DMUe11a-6" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="XSB1eu32Z3oZ6DMUe11a-9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" source="XMhONWHRSR3KESh7TNqj-21" target="XSB1eu32Z3oZ6DMUe11a-8" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="XMhONWHRSR3KESh7TNqj-21" value="utils<br>" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.concepts.folder;fillColor=#2072B8;fontColor=#330000;" parent="1" vertex="1">
<mxGeometry x="800" y="425" width="50" height="45" as="geometry" />
</mxCell>
<mxCell id="XSB1eu32Z3oZ6DMUe11a-1" value="locator.dart" style="verticalLabelPosition=bottom;html=1;verticalAlign=top;align=center;strokeColor=none;fillColor=#00BEF2;shape=mxgraph.azure.code_file;pointerEvents=1;fontColor=#330000;" parent="1" vertex="1">
<mxGeometry x="290" y="150" width="47.5" height="50" as="geometry" />
</mxCell>
<mxCell id="XSB1eu32Z3oZ6DMUe11a-4" value="<span style="color: rgb(0, 0, 0);">path_provider.dart</span>" style="verticalLabelPosition=bottom;html=1;verticalAlign=top;align=center;strokeColor=none;fillColor=#00BEF2;shape=mxgraph.azure.code_file;pointerEvents=1;fontColor=#330000;" parent="1" vertex="1">
<mxGeometry x="730" y="540" width="47.5" height="50" as="geometry" />
</mxCell>
<mxCell id="XSB1eu32Z3oZ6DMUe11a-6" value="<font color="#000000">constants.dart</font>" style="verticalLabelPosition=bottom;html=1;verticalAlign=top;align=center;strokeColor=none;fillColor=#00BEF2;shape=mxgraph.azure.code_file;pointerEvents=1;fontColor=#330000;" parent="1" vertex="1">
<mxGeometry x="880" y="540" width="47.5" height="50" as="geometry" />
</mxCell>
<mxCell id="XSB1eu32Z3oZ6DMUe11a-8" value="<font color="#000000">enums.dart</font>" style="verticalLabelPosition=bottom;html=1;verticalAlign=top;align=center;strokeColor=none;fillColor=#00BEF2;shape=mxgraph.azure.code_file;pointerEvents=1;fontColor=#330000;" parent="1" vertex="1">
<mxGeometry x="980" y="540" width="47.5" height="50" as="geometry" />
</mxCell>
<mxCell id="XSB1eu32Z3oZ6DMUe11a-16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="XSB1eu32Z3oZ6DMUe11a-13" target="XSB1eu32Z3oZ6DMUe11a-15" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="XSB1eu32Z3oZ6DMUe11a-13" value="dialogs" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.concepts.folder;fillColor=#2072B8;fontColor=#330000;" parent="1" vertex="1">
<mxGeometry x="1310" y="425" width="50" height="45" as="geometry" />
</mxCell>
<mxCell id="XSB1eu32Z3oZ6DMUe11a-15" value="<font color="#000000">alert_dialogs.dart</font>" style="verticalLabelPosition=bottom;html=1;verticalAlign=top;align=center;strokeColor=none;fillColor=#00BEF2;shape=mxgraph.azure.code_file;pointerEvents=1;fontColor=#330000;" parent="1" vertex="1">
<mxGeometry x="1390" y="550" width="47.5" height="50" as="geometry" />
</mxCell>
<mxCell id="3jFgt_hRMeqxmWvYARjA-6" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="XSB1eu32Z3oZ6DMUe11a-18" target="3jFgt_hRMeqxmWvYARjA-5">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="3jFgt_hRMeqxmWvYARjA-18" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="XSB1eu32Z3oZ6DMUe11a-18" target="3jFgt_hRMeqxmWvYARjA-17">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="3jFgt_hRMeqxmWvYARjA-20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="XSB1eu32Z3oZ6DMUe11a-18" target="3jFgt_hRMeqxmWvYARjA-19">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="XSB1eu32Z3oZ6DMUe11a-18" value="presentations" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.concepts.folder;fillColor=#2072B8;fontColor=#330000;" parent="1" vertex="1">
<mxGeometry x="1740" y="270" width="50" height="45" as="geometry" />
</mxCell>
<mxCell id="3jFgt_hRMeqxmWvYARjA-5" value="widgets" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.concepts.folder;fillColor=#2072B8;fontColor=#330000;" vertex="1" parent="1">
<mxGeometry x="1910" y="395" width="50" height="45" as="geometry" />
</mxCell>
<mxCell id="3jFgt_hRMeqxmWvYARjA-16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.6;entryY=0.3;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="3jFgt_hRMeqxmWvYARjA-14" target="3jFgt_hRMeqxmWvYARjA-15">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="3jFgt_hRMeqxmWvYARjA-14" value="client" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.concepts.folder;fillColor=#2072B8;fontColor=#330000;" vertex="1" parent="1">
<mxGeometry x="1130" y="480" width="50" height="45" as="geometry" />
</mxCell>
<mxCell id="3jFgt_hRMeqxmWvYARjA-15" value="<font color="#000000">client.dart</font>" style="verticalLabelPosition=bottom;html=1;verticalAlign=top;align=center;strokeColor=none;fillColor=#00BEF2;shape=mxgraph.azure.code_file;pointerEvents=1;fontColor=#330000;" vertex="1" parent="1">
<mxGeometry x="1220" y="600" width="47.5" height="50" as="geometry" />
</mxCell>
<mxCell id="3jFgt_hRMeqxmWvYARjA-17" value="views" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.concepts.folder;fillColor=#2072B8;fontColor=#330000;" vertex="1" parent="1">
<mxGeometry x="1570" y="395" width="50" height="45" as="geometry" />
</mxCell>
<mxCell id="3jFgt_hRMeqxmWvYARjA-19" value="providers" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.concepts.folder;fillColor=#2072B8;fontColor=#330000;" vertex="1" parent="1">
<mxGeometry x="1810" y="395" width="50" height="45" as="geometry" />
</mxCell>
<mxCell id="3jFgt_hRMeqxmWvYARjA-24" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="3jFgt_hRMeqxmWvYARjA-21" target="3jFgt_hRMeqxmWvYARjA-26">
<mxGeometry relative="1" as="geometry">
<mxPoint x="2080" y="319.9999999999999" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="3jFgt_hRMeqxmWvYARjA-25" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="3jFgt_hRMeqxmWvYARjA-21" target="3jFgt_hRMeqxmWvYARjA-31">
<mxGeometry relative="1" as="geometry">
<mxPoint x="2290" y="309.9999999999999" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="3jFgt_hRMeqxmWvYARjA-21" value="data" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.concepts.folder;fillColor=#2072B8;fontColor=#330000;" vertex="1" parent="1">
<mxGeometry x="2160" y="240" width="50" height="45" as="geometry" />
</mxCell>
<mxCell id="3jFgt_hRMeqxmWvYARjA-29" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="3jFgt_hRMeqxmWvYARjA-26" target="3jFgt_hRMeqxmWvYARjA-27">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="3jFgt_hRMeqxmWvYARjA-30" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="3jFgt_hRMeqxmWvYARjA-26" target="3jFgt_hRMeqxmWvYARjA-28">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="3jFgt_hRMeqxmWvYARjA-26" value="datasources" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.concepts.folder;fillColor=#2072B8;fontColor=#330000;" vertex="1" parent="1">
<mxGeometry x="2050" y="330" width="50" height="45" as="geometry" />
</mxCell>
<mxCell id="3jFgt_hRMeqxmWvYARjA-27" value="local" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.concepts.folder;fillColor=#2072B8;fontColor=#330000;" vertex="1" parent="1">
<mxGeometry x="2130" y="455" width="50" height="45" as="geometry" />
</mxCell>
<mxCell id="3jFgt_hRMeqxmWvYARjA-28" value="remote" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.concepts.folder;fillColor=#2072B8;fontColor=#330000;" vertex="1" parent="1">
<mxGeometry x="2210" y="455" width="50" height="45" as="geometry" />
</mxCell>
<mxCell id="3jFgt_hRMeqxmWvYARjA-31" value="models" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.concepts.folder;fillColor=#2072B8;fontColor=#330000;" vertex="1" parent="1">
<mxGeometry x="2300" y="330" width="50" height="45" as="geometry" />
</mxCell>
<mxCell id="3jFgt_hRMeqxmWvYARjA-32" value="logics" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.concepts.folder;fillColor=#2072B8;fontColor=#330000;" vertex="1" parent="1">
<mxGeometry x="2540" y="225" width="50" height="45" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
<diagram id="EL8yksBnnI-XilD_iryw" name="Docs">
<mxGraphModel dx="1736" dy="904" grid="0" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="3huUiU416Az3x12VKgdW-2" value="<div style="box-sizing: inherit; word-break: break-word; overflow-wrap: break-word;" class="it iu iv iw ix"><div style="box-sizing: inherit;" class=""><h1 style="box-sizing: inherit; margin: 0.6em 0px -0.27em; font-family: sohne, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; color: rgb(41, 41, 41); line-height: 40px; letter-spacing: -0.016em; font-style: normal; font-weight: 700; font-size: 32px;" data-selectable-paragraph="" class="pw-post-title iy iz ja bn jb jc jd je jf jg jh ji jj jk jl jm jn jo jp jq jr js jt ju jv jw gc" id="1c21">Exploring Flutter Command and RVMS</h1></div><figure style="box-sizing: inherit; margin: 40px auto 0px; clear: both;" class="gr gt jy jz ka kb gn go paragraph-image"><div style="box-sizing: inherit; width: 692px; position: relative; cursor: zoom-in; z-index: auto; transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1) 0s;" class="kc kd dq ke cf kf" tabindex="0" role="button"><div style="box-sizing: inherit; margin-left: auto; margin-right: auto; max-width: 3244px;" class="gn go jx"><img style="box-sizing: inherit; vertical-align: middle; width: 692px; max-width: 100%; height: auto;" role="presentation" loading="lazy" height="532" width="700" src="https://miro.medium.com/max/1400/0*lUATHQMQDas9aCUV" class="cf kg kh" alt=""></div></div><figcaption style="box-sizing: inherit; font-weight: 400; text-align: center; font-family: sohne, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: rgb(117, 117, 117); margin-left: auto; margin-right: auto; max-width: 728px; margin-top: 10px;" data-selectable-paragraph="" class="ki bm gp gn go kj kk bn b bo bp co">Photo by<span>&nbsp;</span><a style="box-sizing: inherit; color: inherit; text-decoration: underline; -webkit-tap-highlight-color: transparent;" target="_blank" rel="noopener ugc nofollow" href="https://unsplash.com/@hannahjoshua?utm_source=medium&amp;utm_medium=referral" class="au kl">Hannah Joshua</a><span>&nbsp;</span>on<span>&nbsp;</span><a style="box-sizing: inherit; color: inherit; text-decoration: underline; -webkit-tap-highlight-color: transparent;" target="_blank" rel="noopener ugc nofollow" href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral" class="au kl">Unsplash</a></figcaption></figure><p style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp kq kr ks kt ku kv kw kx ky kz la lb lc ld le lf lg lh li lj it gc" id="ceee">Flutter state management and Architecture is one of the hottest topics in the flutter community, while there is a multitude of options, let’s explore one of the more fairly recent packages that takes a different approach than most popular packages.</p><p style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp kq kr ks kt ku kv kw kx ky kz la lb lc ld le lf lg lh li lj it gc" id="45a7"><a style="box-sizing: inherit; color: inherit; text-decoration: underline; -webkit-tap-highlight-color: transparent;" target="_blank" rel="noopener ugc nofollow" href="https://pub.dev/packages/flutter_command" class="au kl"><em style="box-sizing: inherit; font-style: italic;" class="lk">flutter_command</em></a><em style="box-sizing: inherit; font-style: italic;" class="lk"><span>&nbsp;</span>by</em><a style="box-sizing: inherit; color: inherit; text-decoration: underline; -webkit-tap-highlight-color: transparent;" target="_blank" rel="noopener ugc nofollow" href="https://twitter.com/ThomasBurkhartB" class="au kl"><em style="box-sizing: inherit; font-style: italic;" class="lk"><span>&nbsp;</span></em>Thomas Burkhart</a><span>&nbsp;</span>is a reiteration and a simplified version of the previous package which aimed at the same architecture,<span>&nbsp;</span><a style="box-sizing: inherit; color: inherit; text-decoration: underline; -webkit-tap-highlight-color: transparent;" target="_blank" rel="noopener ugc nofollow" href="https://pub.dev/packages/rx_command" class="au kl">rx_command</a>.</p><h1 style="box-sizing: inherit; margin: 3.14em 0px -0.37em; font-family: sohne, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; color: rgb(41, 41, 41); font-style: normal; line-height: 28px; letter-spacing: 0px; font-weight: 600; font-size: 22px;" data-selectable-paragraph="" class="ll lm ja bn ln lo lp lq lr ls lt lu lv lw lx ly lz ma mb mc md me mf mg mh mi gc" id="0445">Why RVMS?</h1><p style="box-sizing: inherit; margin: 0.86em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp mj kr ks kt mk kv kw kx ml kz la lb mm ld le lf mn lh li lj it gc" id="f6b9">The most popular architectures for flutter are usually<span>&nbsp;</span><em style="box-sizing: inherit; font-style: italic;" class="lk">BLoC</em>,<span>&nbsp;</span><em style="box-sizing: inherit; font-style: italic;" class="lk">MVC</em>, or<span>&nbsp;</span><em style="box-sizing: inherit; font-style: italic;" class="lk">MVVM</em>. But on second thought, as described by Thomas, these almost feel unintuitive to the way flutter is built. Although it is practically possible to implement them, flutter follows a reactive approach where the UI reacts to the data flow.</p><p style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp kq kr ks kt ku kv kw kx ky kz la lb lc ld le lf lg lh li lj it gc" id="34fa">BLoC accomplishes this but at the expense of boilerplate code and making the file structure more complex, while MVVM on the other hand is much less intuitive for the reactive nature of flutter as it is more suitable to Native android or Xamarian where the UI elements are in XML and need have a ViewModel Associated with, to represent and update the UI accordingly.</p><p style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp kq kr ks kt ku kv kw kx ky kz la lb lc ld le lf lg lh li lj it gc" id="7c64">But Flutter widgets are self-responsible and can handle state without the need for any ViewModel, and they do not communicate via bindings like native android does to update its views, flutter widgets always rebuild instead.</p><h1 style="box-sizing: inherit; margin: 3.14em 0px -0.37em; font-family: sohne, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; color: rgb(41, 41, 41); font-style: normal; line-height: 28px; letter-spacing: 0px; font-weight: 600; font-size: 22px;" data-selectable-paragraph="" class="ll lm ja bn ln lo lp lq lr ls lt lu lv lw lx ly lz ma mb mc md me mf mg mh mi gc" id="6c05">The Basics</h1><p style="box-sizing: inherit; margin: 0.86em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp mj kr ks kt mk kv kw kx ml kz la lb mm ld le lf mn lh li lj it gc" id="d754">RVMS (Reactive Views, Managers, Services) is again, a reiteration of the previous architecture,<span>&nbsp;</span><strong style="box-sizing: inherit; font-weight: 700; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif;" class="ko jb">RxVMS,</strong><span>&nbsp;</span><strong style="box-sizing: inherit; font-weight: 700; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif;" class="ko jb">RVMS</strong><span>&nbsp;</span>simplifies the process by removing the Reactive part,<span>&nbsp;</span><em style="box-sizing: inherit; font-style: italic;" class="lk">streams</em><span>&nbsp;</span>with<span>&nbsp;</span><strong style="box-sizing: inherit; font-weight: 700; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif;" class="ko jb">ValueNotifiers</strong>.</p><h2 style="box-sizing: inherit; margin: 2.37em 0px -0.31em; font-family: sohne, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; color: rgb(41, 41, 41); font-style: normal; letter-spacing: 0px; font-weight: 600; line-height: 24px; font-size: 20px;" data-selectable-paragraph="" class="mo lm ja bn ln mp mq mr lr ms mt mu lv kx mv mw lz lb mx my md lf mz na mh nb gc" id="72bf">Services</h2><p style="box-sizing: inherit; margin: 0.86em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp mj kr ks kt mk kv kw kx ml kz la lb mm ld le lf mn lh li lj it gc" id="d2b6">Handle, incoming and outgoing requests with external services like a database, authentication, or geolocation service. They can be classes or interfaces that define the different types of requests needed by the app to fulfill its data requirements. They are not visible to the view and do not change any state.</p><h2 style="box-sizing: inherit; margin: 2.37em 0px -0.31em; font-family: sohne, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; color: rgb(41, 41, 41); font-style: normal; letter-spacing: 0px; font-weight: 600; line-height: 24px; font-size: 20px;" data-selectable-paragraph="" class="mo lm ja bn ln mp mq mr lr ms mt mu lv kx mv mw lz lb mx my md lf mz na mh nb gc" id="0825">Managers</h2><p style="box-sizing: inherit; margin: 0.86em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp mj kr ks kt mk kv kw kx ml kz la lb mm ld le lf mn lh li lj it gc" id="be86">Managers are responsible for managing the business logic of the app and communicating incoming data to the<span>&nbsp;</span><em style="box-sizing: inherit; font-style: italic;" class="lk">Views</em><span>&nbsp;</span>via state updates. It groups together use cases or logic that multiple connected Views might use. Basically, managers act as the middle man between the Services and Views by sending data and transforming it, if required.</p><h2 style="box-sizing: inherit; margin: 2.37em 0px -0.31em; font-family: sohne, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; color: rgb(41, 41, 41); font-style: normal; letter-spacing: 0px; font-weight: 600; line-height: 24px; font-size: 20px;" data-selectable-paragraph="" class="mo lm ja bn ln mp mq mr lr ms mt mu lv kx mv mw lz lb mx my md lf mz na mh nb gc" id="3350">Views</h2><p style="box-sizing: inherit; margin: 0.86em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp mj kr ks kt mk kv kw kx ml kz la lb mm ld le lf mn lh li lj it gc" id="f324">Views are what a user sees on the screen, it describes how UI on the screen should look like, and what layout it should follow. Views consume the incoming data from the managers and send back any interaction that a user makes. In flutter,<span>&nbsp;</span><em style="box-sizing: inherit; font-style: italic;" class="lk">Views</em><span>&nbsp;</span>are described using<span>&nbsp;</span><em style="box-sizing: inherit; font-style: italic;" class="lk">StatefulWidget</em><span>&nbsp;</span>or a<span>&nbsp;</span><em style="box-sizing: inherit; font-style: italic;" class="lk">StatelessWidget</em>. Flutter’s declarative UI makes this simple.</p><figure style="box-sizing: inherit; margin: 56px auto 0px; clear: both;" class="nd ne nf ng gz kb gn go paragraph-image"><div style="box-sizing: inherit; width: 692px; position: relative; cursor: zoom-in; z-index: auto; transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1) 0s;" class="kc kd dq ke cf kf" tabindex="0" role="button"><div style="box-sizing: inherit; margin-left: auto; margin-right: auto; max-width: 944px;" class="gn go nc"><img style="box-sizing: inherit; vertical-align: middle; width: 692px; max-width: 100%; height: auto;" role="presentation" loading="lazy" height="425" width="700" src="https://miro.medium.com/max/1400/1*6DTVfk1ETWwVXDxYhOXodg.png" class="cf kg kh" alt=""></div></div><figcaption style="box-sizing: inherit; font-weight: 400; text-align: center; font-family: sohne, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: rgb(117, 117, 117); margin-left: auto; margin-right: auto; max-width: 728px; margin-top: 10px;" data-selectable-paragraph="" class="ki bm gp gn go kj kk bn b bo bp co">RVMS by Thomas Burkhart</figcaption></figure></div><div style="box-sizing: inherit; display: flex; justify-content: center; padding-top: 24px; margin-top: 32px; margin-bottom: 14px; padding-bottom: 10px;" role="separator" class="o dz nh ni if nj"><span style="box-sizing: inherit; display: inline-block; border-radius: 50%; background-color: rgb(8, 8, 8); height: 3px; width: 3px; margin-right: 20px;" class="nk fn cj nl nm nn"></span><span style="box-sizing: inherit; display: inline-block; border-radius: 50%; background-color: rgb(8, 8, 8); height: 3px; width: 3px; margin-right: 20px;" class="nk fn cj nl nm nn"></span><span style="box-sizing: inherit; display: inline-block; border-radius: 50%; background-color: rgb(8, 8, 8); height: 3px; width: 3px;" class="nk fn cj nl nm"></span></div><div style="box-sizing: inherit; word-break: break-word; overflow-wrap: break-word;" class="it iu iv iw ix"><h1 style="box-sizing: inherit; margin: 2.05em 0px -0.37em; font-family: sohne, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; color: rgb(41, 41, 41); font-style: normal; line-height: 28px; letter-spacing: 0px; font-weight: 600; font-size: 22px;" data-selectable-paragraph="" class="ll lm ja bn ln lo no lq lr ls np lu lv lw nq ly lz ma nr mc md me ns mg mh mi gc" id="47f4">RVMS with Flutter Command</h1><p style="box-sizing: inherit; margin: 0.86em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp mj kr ks kt mk kv kw kx ml kz la lb mm ld le lf mn lh li lj it gc" id="4ebb">Let’s see how we can implement<span>&nbsp;</span><strong style="box-sizing: inherit; font-weight: 700; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif;" class="ko jb"><em style="box-sizing: inherit; font-style: italic;" class="lk">RVMS</em></strong><span>&nbsp;</span>using<span>&nbsp;</span><em style="box-sizing: inherit; font-style: italic;" class="lk">flutter_command</em><span>&nbsp;</span>which was specifically built to facilitate this architecture.</p><p style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp kq kr ks kt ku kv kw kx ky kz la lb lc ld le lf lg lh li lj it gc" id="36bf">We’ll build a classic<span>&nbsp;</span><em style="box-sizing: inherit; font-style: italic;" class="lk">hacker news</em><span>&nbsp;</span>app with a couple of simple API calls and views and explore how we can achieve the above architecture.</p><pre style="box-sizing: inherit; margin: 56px 0px 0px; background: rgb(242, 242, 242); padding: 20px; overflow-x: auto;" class="nd ne nf ng gz nt bt nu"><span style="box-sizing: inherit; font-weight: 400; display: block; font-size: 16px; color: rgb(41, 41, 41); font-style: normal; letter-spacing: -0.022em; line-height: 1.18; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace; margin-top: -0.09em; margin-bottom: -0.09em;" data-selectable-paragraph="" class="gc mo lm ja nv b do nw nx l ny" id="f2f4">.<br style="box-sizing: inherit;">├── home<br style="box-sizing: inherit;">│ ├── manager<br style="box-sizing: inherit;">│ │ └── home.manager.dart<br style="box-sizing: inherit;">│ ├── service<br style="box-sizing: inherit;">│ │ ├── locator.dart<br style="box-sizing: inherit;">│ │ └── repo.dart<br style="box-sizing: inherit;">│ └── views<br style="box-sizing: inherit;">│ └── home.dart<br style="box-sizing: inherit;">├── main.dart<br style="box-sizing: inherit;">└── models<br style="box-sizing: inherit;"> └── common.dart</span></pre><p style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp kq kr ks kt ku kv kw kx ky kz la lb lc ld le lf lg lh li lj it gc" id="569a">The most recommended way to structure your project would be to separate folders by features so only the most relevant code to a particular feature is located in its folder which makes it easy to find and debug code when working on one particular feature.</p><p style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp kq kr ks kt ku kv kw kx ky kz la lb lc ld le lf lg lh li lj it gc" id="1fb1">The<span>&nbsp;</span><em style="box-sizing: inherit; font-style: italic;" class="lk">Service</em><span>&nbsp;</span>file has the necessary API calls required to get the hacker news feed, you can take a look at how this is structured<span>&nbsp;</span><a style="box-sizing: inherit; color: inherit; text-decoration: underline; -webkit-tap-highlight-color: transparent;" target="_blank" rel="noopener ugc nofollow" href="https://github.com/Sameerkash/flutter-projects/blob/master/hacker_cmd/lib/home/service/locator.dart" class="au kl">here</a>.</p><p style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp kq kr ks kt ku kv kw kx ky kz la lb lc ld le lf lg lh li lj it gc" id="3b1a">Let’s create the<span>&nbsp;</span><em style="box-sizing: inherit; font-style: italic;" class="lk">Manager</em><span>&nbsp;</span>which will interact with the service and enable the View to consume its data.</p><pre style="box-sizing: inherit; margin: 56px 0px 0px; background: rgb(242, 242, 242); padding: 20px; overflow-x: auto;" class="nd ne nf ng gz nt bt nu"><span style="box-sizing: inherit; font-weight: 400; display: block; font-size: 16px; color: rgb(41, 41, 41); font-style: normal; letter-spacing: -0.022em; line-height: 1.18; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace; margin-top: -0.09em; margin-bottom: -0.09em;" data-selectable-paragraph="" class="gc mo lm ja nv b do nw nx l ny" id="b8ee">class HomeManager {</span><span style="box-sizing: inherit; font-weight: 400; display: block; font-size: 16px; color: rgb(41, 41, 41); font-style: normal; letter-spacing: -0.022em; line-height: 1.18; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace; margin-bottom: -0.09em; margin-top: 1.91em;" data-selectable-paragraph="" class="gc mo lm ja nv b do nz oa ob oc od nx l ny" id="9f54">Command&lt;void, List&lt;Story&gt;&gt; storiesCommand;<br style="box-sizing: inherit;">Command&lt;Story, List&lt;Comment&gt;&gt; commentsCommand;<br style="box-sizing: inherit;">...</span></pre><p style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp kq kr ks kt ku kv kw kx ky kz la lb lc ld le lf lg lh li lj it gc" id="ced1">Something you might notice here is<span>&nbsp;</span><strong style="box-sizing: inherit; font-weight: 700; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif;" class="ko jb">Command,<span>&nbsp;</span></strong>commands are the building blocks of<span>&nbsp;</span><em style="box-sizing: inherit; font-style: italic;" class="lk">flutter_command,<span>&nbsp;</span></em>they are ValueNotifiers that wrap the function which performs some task, and then update the UI depending on the execution state of the function.</p><pre style="box-sizing: inherit; margin: 56px 0px 0px; background: rgb(242, 242, 242); padding: 20px; overflow-x: auto;" class="nd ne nf ng gz nt bt nu"><span style="box-sizing: inherit; font-weight: 400; display: block; font-size: 16px; color: rgb(41, 41, 41); font-style: normal; letter-spacing: -0.022em; line-height: 1.18; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace; margin-top: -0.09em; margin-bottom: -0.09em;" data-selectable-paragraph="" class="gc mo lm ja nv b do nw nx l ny" id="1500">HomeManager() {<br style="box-sizing: inherit;"> storiesCommand = Command.createAsyncNoParam&lt;List&lt;Story&gt;&gt;(topStories, []);<br style="box-sizing: inherit;"> storiesCommand();<br style="box-sizing: inherit;"> <br style="box-sizing: inherit;"> commentsCommand = Command.createAsync&lt;Story, List&lt;Comment&gt;&gt;(getComments, []);<br style="box-sizing: inherit;"> ...</span></pre><p style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp kq kr ks kt ku kv kw kx ky kz la lb lc ld le lf lg lh li lj it gc" id="5242">We can register our functions in a Command by specifying the type, return type, and initial values. It offers different static factory functions for the different function types you want to wrap</p><pre style="box-sizing: inherit; margin: 56px 0px 0px; background: rgb(242, 242, 242); padding: 20px; overflow-x: auto;" class="nd ne nf ng gz nt bt nu"><span style="box-sizing: inherit; font-weight: 400; display: block; font-size: 16px; color: rgb(41, 41, 41); font-style: normal; letter-spacing: -0.022em; line-height: 1.18; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace; margin-top: -0.09em; margin-bottom: -0.09em;" data-selectable-paragraph="" class="gc mo lm ja nv b do nw nx l ny" id="5697">/// if your method is async and has no parameters.<br style="box-sizing: inherit;">Command.createAsyncNoParam&lt;T&gt;();<br style="box-sizing: inherit;">/// if your method is sync and has no parameters.<br style="box-sizing: inherit;">Command.createSyncNoParam&lt;T&gt;();<br style="box-sizing: inherit;">/// if your method is async with parameters.<br style="box-sizing: inherit;">Command.createAsync&lt;T&gt;();<br style="box-sizing: inherit;">/// if your method is async and has parameters.<br style="box-sizing: inherit;">Command.createSync&lt;T&gt;();</span></pre><p style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp kq kr ks kt ku kv kw kx ky kz la lb lc ld le lf lg lh li lj it gc" id="ec98">We can execute a command by either calling<span>&nbsp;</span><code style="box-sizing: inherit; font-weight: 400; background-color: rgb(242, 242, 242); font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace; padding: 2px 4px; font-size: 15px;" class="fr oe of og nv b">execute()</code><span>&nbsp;</span>on it or by calling the command itself as it’s a<span>&nbsp;</span><em style="box-sizing: inherit; font-style: italic;" class="lk">callable</em><span>&nbsp;</span>class.</p><pre style="box-sizing: inherit; margin: 56px 0px 0px; background: rgb(242, 242, 242); padding: 20px; overflow-x: auto;" class="nd ne nf ng gz nt bt nu"><span style="box-sizing: inherit; font-weight: 400; display: block; font-size: 16px; color: rgb(41, 41, 41); font-style: normal; letter-spacing: -0.022em; line-height: 1.18; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace; margin-top: -0.09em; margin-bottom: -0.09em;" data-selectable-paragraph="" class="gc mo lm ja nv b do nw nx l ny" id="4878">HomeManager() {<br style="box-sizing: inherit;">...<br style="box-sizing: inherit;">storiesCommand();<br style="box-sizing: inherit;">...<br style="box-sizing: inherit;">}<br style="box-sizing: inherit;">// or<br style="box-sizing: inherit;">void fetchComments(Story story) {<br style="box-sizing: inherit;"> commentsCommand.execute(story);<br style="box-sizing: inherit;">}</span></pre><p style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp kq kr ks kt ku kv kw kx ky kz la lb lc ld le lf lg lh li lj it gc" id="7edb">We can now register our Manager and Service as a singleton using<span>&nbsp;</span><em style="box-sizing: inherit; font-style: italic;" class="lk">GetIt</em><span>&nbsp;</span>so we can easily access them in our View.</p><pre style="box-sizing: inherit; margin: 56px 0px 0px; background: rgb(242, 242, 242); padding: 20px; overflow-x: auto;" class="nd ne nf ng gz nt bt nu"><span style="box-sizing: inherit; font-weight: 400; display: block; font-size: 16px; color: rgb(41, 41, 41); font-style: normal; letter-spacing: -0.022em; line-height: 1.18; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace; margin-top: -0.09em; margin-bottom: -0.09em;" data-selectable-paragraph="" class="gc mo lm ja nv b do nw nx l ny" id="5853">GetIt getIt = GetIt.instance;</span><span style="box-sizing: inherit; font-weight: 400; display: block; font-size: 16px; color: rgb(41, 41, 41); font-style: normal; letter-spacing: -0.022em; line-height: 1.18; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace; margin-bottom: -0.09em; margin-top: 1.91em;" data-selectable-paragraph="" class="gc mo lm ja nv b do nz oa ob oc od nx l ny" id="9fac">void setUp() {<br style="box-sizing: inherit;"> getIt.registerLazySingleton&lt;Service&gt;(() =&gt; Service());<br style="box-sizing: inherit;"> getIt.registerSingleton&lt;HomeManager&gt;(HomeManager());<br style="box-sizing: inherit;">}</span></pre><p style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp kq kr ks kt ku kv kw kx ky kz la lb lc ld le lf lg lh li lj it gc" id="7289">We can call<span>&nbsp;</span><code style="box-sizing: inherit; font-weight: 400; background-color: rgb(242, 242, 242); font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace; padding: 2px 4px; font-size: 15px;" class="fr oe of og nv b">setup()</code><span>&nbsp;</span>in our<span>&nbsp;</span><code style="box-sizing: inherit; font-weight: 400; background-color: rgb(242, 242, 242); font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace; padding: 2px 4px; font-size: 15px;" class="fr oe of og nv b">main()</code><span>&nbsp;</span>a method so the singletons are registered. An advantage of using<span>&nbsp;</span><em style="box-sizing: inherit; font-style: italic;" class="lk">GetIt</em><span>&nbsp;</span>over<span>&nbsp;</span><em style="box-sizing: inherit; font-style: italic;" class="lk">Provider</em><span>&nbsp;</span>is the global access without needing<span>&nbsp;</span><code style="box-sizing: inherit; font-weight: 400; background-color: rgb(242, 242, 242); font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace; padding: 2px 4px; font-size: 15px;" class="fr oe of og nv b">BuildContext</code><span>&nbsp;</span>.</p><p style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp kq kr ks kt ku kv kw kx ky kz la lb lc ld le lf lg lh li lj it gc" id="f804">Let’s consume the NewsFeed from HackerNews API in our View.</p><pre style="box-sizing: inherit; margin: 56px 0px 0px; background: rgb(242, 242, 242); padding: 20px; overflow-x: auto;" class="nd ne nf ng gz nt bt nu"><span style="box-sizing: inherit; font-weight: 400; display: block; font-size: 16px; color: rgb(41, 41, 41); font-style: normal; letter-spacing: -0.022em; line-height: 1.18; font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace; margin-top: -0.09em; margin-bottom: -0.09em;" data-selectable-paragraph="" class="gc mo lm ja nv b do nw nx l ny" id="a743">CommandBuilder(<br style="box-sizing: inherit;"> command: getIt.get&lt;HomeManager&gt;().storiesCommand,<br style="box-sizing: inherit;"> whileExecuting: (context, comments, _) =&gt; Center(<br style="box-sizing: inherit;"> child: CircularProgressIndicator(),<br style="box-sizing: inherit;"> ),<br style="box-sizing: inherit;"> ),<br style="box-sizing: inherit;"> onError: (context, error, category, _) =&gt; Column(<br style="box-sizing: inherit;"> children: [<br style="box-sizing: inherit;"> Text('An Error occurred!'),<br style="box-sizing: inherit;"> Text(error.toString()),<br style="box-sizing: inherit;"> ],<br style="box-sizing: inherit;"> ),<br style="box-sizing: inherit;"> onnData: (context, stories, _) =&gt; ListView.builder(<br style="box-sizing: inherit;"> itemCount: stories.length,<br style="box-sizing: inherit;"> itemBuilder: (_, index) {<br style="box-sizing: inherit;"> return ListTile(<br style="box-sizing: inherit;"> title: Text(stories[index].title),<br style="box-sizing: inherit;"> ....</span></pre><p style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp kq kr ks kt ku kv kw kx ky kz la lb lc ld le lf lg lh li lj it gc" id="a481">We can use the<span>&nbsp;</span><code style="box-sizing: inherit; font-weight: 400; background-color: rgb(242, 242, 242); font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace; padding: 2px 4px; font-size: 15px;" class="fr oe of og nv b">CommandBuilder</code><span>&nbsp;</span>to build our widget according to the state change during a method call. It takes in the command we want to listen to and provides three attributes to consume, namely :</p><ul style="box-sizing: inherit; margin: 0px; padding: 0px; list-style: none none;" class=""><li style="box-sizing: inherit; font-weight: 400; color: rgb(41, 41, 41); font-style: normal; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; margin-bottom: -0.46em; line-height: 28px; letter-spacing: -0.003em; list-style-type: disc; margin-left: 30px; padding-left: 0px; font-size: 20px; margin-top: 2.14em;" data-selectable-paragraph="" class="oh oi ja ko b kp kq kt ku kx oj lb ok lf ol lj om on oo op gc" id="aaaf"><code style="box-sizing: inherit; font-weight: 400; background-color: rgb(242, 242, 242); font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace; padding: 2px 4px; font-size: 15px;" class="fr oe of og nv b">whileExecuting</code>which is when the method is awaiting a Future or just execution.</li><li style="box-sizing: inherit; font-weight: 400; color: rgb(41, 41, 41); font-style: normal; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; margin-bottom: -0.46em; line-height: 28px; letter-spacing: -0.003em; list-style-type: disc; margin-left: 30px; padding-left: 0px; font-size: 20px; margin-top: 1.14em;" data-selectable-paragraph="" class="oh oi ja ko b kp oq kt or kx os lb ot lf ou lj om on oo op gc" id="0d27"><code style="box-sizing: inherit; font-weight: 400; background-color: rgb(242, 242, 242); font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace; padding: 2px 4px; font-size: 15px;" class="fr oe of og nv b">onError</code><span>&nbsp;</span>, which gives us an easy way to display errors that were caught.</li><li style="box-sizing: inherit; font-weight: 400; color: rgb(41, 41, 41); font-style: normal; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; margin-bottom: -0.46em; line-height: 28px; letter-spacing: -0.003em; list-style-type: disc; margin-left: 30px; padding-left: 0px; font-size: 20px; margin-top: 1.14em;" data-selectable-paragraph="" class="oh oi ja ko b kp oq kt or kx os lb ot lf ou lj om on oo op gc" id="6a7c"><code style="box-sizing: inherit; font-weight: 400; background-color: rgb(242, 242, 242); font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace; padding: 2px 4px; font-size: 15px;" class="fr oe of og nv b">onData</code><span>&nbsp;</span>, from which we can obtain the data and display it in our widget, which in this case is the HackerNews Feed.</li></ul><p style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp kq kr ks kt ku kv kw kx ky kz la lb lc ld le lf lg lh li lj it gc" id="8000">This same task of consuming the command state could also be accomplished by GetItMixin.</p></div><div style="box-sizing: inherit; display: flex; justify-content: center; padding-top: 24px; margin-top: 32px; margin-bottom: 14px; padding-bottom: 10px;" role="separator" class="o dz nh ni if nj"><span style="box-sizing: inherit; display: inline-block; border-radius: 50%; background-color: rgb(8, 8, 8); height: 3px; width: 3px; margin-right: 20px;" class="nk fn cj nl nm nn"></span><span style="box-sizing: inherit; display: inline-block; border-radius: 50%; background-color: rgb(8, 8, 8); height: 3px; width: 3px; margin-right: 20px;" class="nk fn cj nl nm nn"></span><span style="box-sizing: inherit; display: inline-block; border-radius: 50%; background-color: rgb(8, 8, 8); height: 3px; width: 3px;" class="nk fn cj nl nm"></span></div><div style="box-sizing: inherit; word-break: break-word; overflow-wrap: break-word;" class="it iu iv iw ix"><blockquote style="box-sizing: inherit; margin: 0px 0px 0px -20px; box-shadow: rgb(41, 41, 41) 3px 0px 0px 0px inset; padding-left: 23px;" class="ov ow ox"><p style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-style: italic; font-size: 21px;" data-selectable-paragraph="" class="km kn lk ko b kp kq kr ks kt ku kv kw oy ky kz la oz lc ld le pa lg lh li lj it gc" id="5389"><strong style="box-sizing: inherit; font-weight: 700; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif;" class="ko jb"><em style="box-sizing: inherit; font-style: normal;" class="ja">flutter_command<span>&nbsp;</span></em></strong>along with RVMS gives a new perspective on handling state and architecting apps in flutter. The concept of<span>&nbsp;</span><strong style="box-sizing: inherit; font-weight: 700; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif;" class="ko jb">Command<span>&nbsp;</span></strong>is easier to grasp without overcomplicating that solution, and CommandBuilder provides an easy way to listen to a Command and React according to its updates.</p></blockquote></div><div style="box-sizing: inherit; display: flex; justify-content: center; padding-top: 24px; margin-top: 32px; margin-bottom: 14px; padding-bottom: 10px;" role="separator" class="o dz nh ni if nj"><span style="box-sizing: inherit; display: inline-block; border-radius: 50%; background-color: rgb(8, 8, 8); height: 3px; width: 3px; margin-right: 20px;" class="nk fn cj nl nm nn"></span><span style="box-sizing: inherit; display: inline-block; border-radius: 50%; background-color: rgb(8, 8, 8); height: 3px; width: 3px; margin-right: 20px;" class="nk fn cj nl nm nn"></span><span style="box-sizing: inherit; display: inline-block; border-radius: 50%; background-color: rgb(8, 8, 8); height: 3px; width: 3px;" class="nk fn cj nl nm"></span></div><div style="box-sizing: inherit; word-break: break-word; overflow-wrap: break-word;" class="it iu iv iw ix"><p style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px; font-variant-ligatures: normal; font-variant-caps: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp kq kr ks kt ku kv kw kx ky kz la lb lc ld le lf lg lh li lj it gc" id="ecbf">Make sure to give a few claps they're free and try out flutter_command.</p><p style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgb(41, 41, 41); word-break: break-word; font-style: normal; line-height: 32px; letter-spacing: -0.003em; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; font-size: 20px; font-variant-ligatures: normal; font-variant-caps: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" data-selectable-paragraph="" class="pw-post-body-paragraph km kn ja ko b kp kq kr ks kt ku kv kw kx ky kz la lb lc ld le lf lg lh li lj it gc" id="3e31">If you want the full code, grab it<span>&nbsp;</span><a style="box-sizing: inherit; color: inherit; text-decoration: underline; -webkit-tap-highlight-color: transparent;" target="_blank" rel="noopener ugc nofollow" href="https://github.com/Sameerkash/flutter-projects/tree/master/hacker_cmd" class="au kl"><strong style="box-sizing: inherit; font-weight: 700; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif;" class="ko jb">here</strong></a><strong style="box-sizing: inherit; font-weight: 700; font-family: charter, Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif;" class="ko jb">,<span>&nbsp;</span></strong>and Thank you for reading all the way through!</p><br class="Apple-interchange-newline"></div>" style="text;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="60" y="50" width="560" height="7590" as="geometry" />
</mxCell>
<mxCell id="3huUiU416Az3x12VKgdW-3" value="&nbsp;" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
<mxGeometry x="1325" y="6545" width="30" height="30" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
<diagram id="-OzYc7XiUn6NhIVoFptb" name="Sample1-TODO APP">
<mxGraphModel dx="1420" dy="323" grid="0" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="DERL3kDg1X-eKgEH67n4-58" value="<span style="color: rgb(41, 41, 41); font-family: Menlo, Monaco, &quot;Courier New&quot;, Courier, monospace; font-size: 16px; letter-spacing: -0.352px; background-color: rgb(242, 242, 242);"><br></span>" style="text;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="-715.003333333333" y="159" width="259" height="252" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>