Skip to content

Commit f000b2b

Browse files
FeodorFitsnerFeodorFitsner
committed
Fix tabs changing size
1 parent 0d7a1b5 commit f000b2b

File tree

2 files changed

+79
-42
lines changed

2 files changed

+79
-42
lines changed

‎client/lib/controls/tabs.dart‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import 'package:flutter_redux/flutter_redux.dart';
66
import '../models/app_state.dart';
77
import '../models/control.dart';
88
import '../models/control_view_model.dart';
9+
import '../web_socket_client.dart';
910
import 'create_control.dart';
1011

1112
class TabsControl extends StatefulWidget {
@@ -28,7 +29,6 @@ class TabsControl extends StatefulWidget {
2829

2930
class _TabsControlState extends State<TabsControl>
3031
with TickerProviderStateMixin {
31-
int _tabsCount = 0;
3232
List<String> _tabsIndex = [];
3333
String? _value;
3434
TabController? _tabController;
@@ -37,27 +37,37 @@ class _TabsControlState extends State<TabsControl>
3737
void initState() {
3838
super.initState();
3939
_tabsIndex = widget.children.map((c) => c.attrString("key", "")!).toList();
40-
_tabsCount = widget.children.length;
41-
_tabController = TabController(length: _tabsCount, vsync: this);
42-
_tabController!.addListener(() {
43-
if (_tabController!.indexIsChanging == true) {
44-
return;
45-
}
46-
var value = _tabsIndex[_tabController!.index];
47-
if (_value != value) {
48-
debugPrint("Selected tab: $value");
49-
}
50-
_value = value;
51-
});
40+
_tabController = TabController(length: _tabsIndex.length, vsync: this);
41+
_tabController!.addListener(_tabChanged);
42+
}
43+
44+
void _tabChanged() {
45+
if (_tabController!.indexIsChanging == true) {
46+
return;
47+
}
48+
var value = _tabsIndex[_tabController!.index];
49+
if (_value != value) {
50+
debugPrint("Selected tab: $value");
51+
ws.pageEventFromWeb(
52+
eventTarget: widget.control.id,
53+
eventName: "change",
54+
eventData: value);
55+
}
56+
_value = value;
5257
}
5358

5459
@override
5560
Widget build(BuildContext context) {
5661
debugPrint("TabsControl build: ${widget.control.id}");
5762

58-
if (widget.children.length != _tabsCount) {
59-
_tabsCount = widget.children.length;
60-
_tabController = TabController(length: _tabsCount, vsync: this);
63+
var tabsIndex =
64+
widget.children.map((c) => c.attrString("key", "")!).toList();
65+
if (tabsIndex.length != _tabsIndex.length ||
66+
!tabsIndex.every((item) => _tabsIndex.contains(item))) {
67+
_tabsIndex =
68+
widget.children.map((c) => c.attrString("key", "")!).toList();
69+
_tabController = TabController(length: _tabsIndex.length, vsync: this);
70+
_tabController!.addListener(_tabChanged);
6171
}
6272

6373
bool disabled = widget.control.isDisabled || widget.parentDisabled;

‎docs/roadmap.md‎

Lines changed: 53 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
* [x] Stack
1414
* [x] ListView
1515
* [x] GridView
16+
* App structure and navigation
17+
* [x] Tabs
1618
* Basic controls
1719
* [x] Text
1820
* [x] Icon
@@ -82,31 +84,31 @@
8284
</tr>
8385
<tr><th colspan="4">Layout</th></tr>
8486
<tr>
85-
<td></td>
87+
<td>✓</td>
8688
<td>Container</td>
8789
<td>Stack</td>
8890
<td>S1</td>
8991
</tr>
9092
<tr>
91-
<td></td>
93+
<td>✓</td>
9294
<td>Row</td>
9395
<td>Stack horizontal=True</td>
9496
<td>S1 (flex, wrap)</td>
9597
</tr>
9698
<tr>
97-
<td></td>
99+
<td>✓</td>
98100
<td>Column</td>
99101
<td>Stack horizontal=False</td>
100102
<td>S1 (flex, wrap)</td>
101103
</tr>
102104
<tr>
103-
<td></td>
105+
<td>✓</td>
104106
<td>Stack</td>
105107
<td>-</td>
106108
<td>S1</td>
107109
</tr>
108110
<tr>
109-
<td></td>
111+
<td>✓</td>
110112
<td>ListView</td>
111113
<td>Stack horizontal=False</td>
112114
<td>S1</td>
@@ -124,7 +126,7 @@
124126
<td></td>
125127
</tr>
126128
<tr>
127-
<td></td>
129+
<td>✓</td>
128130
<td>GridView</td>
129131
<td>-</td>
130132
<td>S1</td>
@@ -143,7 +145,7 @@
143145
</tr>
144146
<tr><th colspan="4">Basic controls</th></tr>
145147
<tr>
146-
<td></td>
148+
<td>✓</td>
147149
<td>Text</td>
148150
<td>Text</td>
149151
<td>S1</td>
@@ -155,13 +157,13 @@
155157
<td></td>
156158
</tr>
157159
<tr>
158-
<td></td>
160+
<td>✓</td>
159161
<td>Icon</td>
160162
<td>Icon</td>
161163
<td>S1</td>
162164
</tr>
163165
<tr>
164-
<td></td>
166+
<td>✓</td>
165167
<td>Image</td>
166168
<td>Image</td>
167169
<td>S1</td>
@@ -179,38 +181,38 @@
179181
<td></td>
180182
</tr>
181183
<tr>
182-
<td></td>
184+
<td>✓</td>
183185
<td>ProgressBar</td>
184186
<td>Progress</td>
185187
<td>S1</td>
186188
</tr>
187189
<tr>
188-
<td></td>
190+
<td>✓</td>
189191
<td>ProgressRing</td>
190192
<td>Spinner</td>
191193
<td>S1</td>
192194
</tr>
193195
<tr><th colspan="4">Buttons</th></tr>
194196
<tr>
195-
<td></td>
197+
<td>✓</td>
196198
<td>ElevatedButton</td>
197199
<td>Button primary=True</td>
198200
<td>S1</td>
199201
</tr>
200202
<tr>
201-
<td></td>
203+
<td>✓</td>
202204
<td>OutlinedButton</td>
203205
<td>Button primary=False</td>
204206
<td>S1</td>
205207
</tr>
206208
<tr>
207-
<td></td>
209+
<td>✓</td>
208210
<td>TextButton</td>
209211
<td>Button action=True</td>
210212
<td>S1</td>
211213
</tr>
212214
<tr>
213-
<td></td>
215+
<td>✓</td>
214216
<td>IconButton</td>
215217
<td>Button icon={icon_name}</td>
216218
<td>S1</td>
@@ -229,25 +231,25 @@
229231
</tr>
230232
<tr><th colspan="4">Input and selections</th></tr>
231233
<tr>
232-
<td></td>
234+
<td>✓</td>
233235
<td>Checkbox</td>
234236
<td>Checkbox</td>
235237
<td>S1</td>
236238
</tr>
237239
<tr>
238-
<td></td>
240+
<td>✓</td>
239241
<td>Radio</td>
240242
<td>ChoiceGroup</td>
241243
<td>S1</td>
242244
</tr>
243245
<tr>
244-
<td></td>
246+
<td>✓</td>
245247
<td>Dropdown</td>
246248
<td>Dropdown</td>
247249
<td>S1</td>
248250
</tr>
249251
<tr>
250-
<td></td>
252+
<td>✓</td>
251253
<td>-</td>
252254
<td>ComboBox</td>
253255
<td></td>
@@ -271,19 +273,19 @@
271273
<td></td>
272274
</tr>
273275
<tr>
274-
<td></td>
276+
<td>✓</td>
275277
<td>Slider</td>
276278
<td>Slider</td>
277279
<td>S1</td>
278280
</tr>
279281
<tr>
280-
<td></td>
282+
<td>✓</td>
281283
<td>TextField</td>
282284
<td>Textbox</td>
283285
<td>S1</td>
284286
</tr>
285287
<tr>
286-
<td></td>
288+
<td>✓</td>
287289
<td>Switch</td>
288290
<td>Toggle</td>
289291
<td>S1</td>
@@ -296,19 +298,19 @@
296298
</tr>
297299
<tr><th colspan="4">Dialogs, alerts, and panels</th></tr>
298300
<tr>
299-
<td></td>
301+
<td>✓</td>
300302
<td>Banner</td>
301303
<td>Message</td>
302304
<td>S1</td>
303305
</tr>
304306
<tr>
305-
<td></td>
307+
<td>✓</td>
306308
<td>SnackBar</td>
307309
<td>-</td>
308310
<td>S1</td>
309311
</tr>
310312
<tr>
311-
<td></td>
313+
<td>✓</td>
312314
<td>AlertDialog</td>
313315
<td>Dialog</td>
314316
<td>S1</td>
@@ -355,7 +357,13 @@
355357
<td>TabBar</td>
356358
<td></td>
357359
<td></td>
358-
</tr>
360+
</tr>
361+
<tr>
362+
<td>✓</td>
363+
<td>Tabs</td>
364+
<td>Tabs</td>
365+
<td></td>
366+
</tr>
359367
<tr><th colspan="4">Grids</th></tr>
360368
<tr>
361369
<td></td>
@@ -883,6 +891,25 @@ Events:
883891

884892
- action - when action button clicked
885893

894+
## Tabs
895+
896+
Properties:
897+
898+
- tabs
899+
- value
900+
901+
Events:
902+
903+
- change
904+
905+
### Tab
906+
907+
- key
908+
- text
909+
- tabContent
910+
- content
911+
- icon
912+
886913
## SplitView
887914

888915
Docs: https://pub.dev/packages/split_view

0 commit comments

Comments
 (0)