Skip to content

Commit 5a9f264

Browse files
PanteCopilot
Pante
and
Copilot
authored
Add item group (#604)
* Move FItem * initial prototype * Add merge method * Add item group * Prepare Forui for review * Update windows-latest goldens * Update docs/app/docs/data/item-group/page.mdx Co-authored-by: Copilot <[email protected]> * Add callout --------- Co-authored-by: Pante <[email protected]> Co-authored-by: Copilot <[email protected]>
1 parent 7fc9eab commit 5a9f264

File tree

242 files changed

+2255
-481
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

242 files changed

+2255
-481
lines changed

‎docs/app/docs/data/item-group/page.mdx‎

Lines changed: 295 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,295 @@
1+
import {Callout} from "nextra/components";
2+
import { Tabs } from 'nextra/components';
3+
import { Widget } from '@/components/demo/widget.tsx';
4+
import LinkBadge from '@/components/ui/link-badge/link-badge.tsx';
5+
import LinkBadgeGroup from '@/components/ui/link-badge/link-badge-group.tsx';
6+
7+
# Item Group
8+
9+
An item group that typically groups related information together.
10+
11+
<Callout type="info">
12+
This widget is typically used to create more complex widgets rather than being used directly.
13+
</Callout>
14+
15+
<LinkBadgeGroup>
16+
<LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.widgets.item/"/>
17+
</LinkBadgeGroup>
18+
19+
<Tabs items={['Preview', 'Code']}>
20+
<Tabs.Tab>
21+
<Widget name='item-group' variant='default' query={{}}/>
22+
</Tabs.Tab>
23+
<Tabs.Tab>
24+
```dart copy
25+
FItemGroup(
26+
children: [
27+
FItem(
28+
prefix: Icon(FIcons.user),
29+
title: const Text('Personalization'),
30+
suffix: Icon(FIcons.chevronRight),
31+
onPress: () {},
32+
),
33+
FItem(
34+
prefix: Icon(FIcons.wifi),
35+
title: const Text('WiFi'),
36+
details: const Text('Forus Labs (5G)'),
37+
suffix: Icon(FIcons.chevronRight),
38+
onPress: () {},
39+
),
40+
],
41+
);
42+
```
43+
</Tabs.Tab>
44+
</Tabs>
45+
46+
## CLI
47+
48+
To generate and customize this style:
49+
50+
```shell copy
51+
dart run forui style create item-group
52+
```
53+
54+
## Usage
55+
56+
### `FItemGroup(...)`
57+
58+
```dart copy
59+
FItemGroup(
60+
scrollController: ScrollController(),
61+
style: FItemGroupStyle(...),
62+
cacheExtent: 100,
63+
maxHeight: 200,
64+
dragStartBehavior: DragStartBehavior.start,
65+
physics: const ClampingScrollPhysics(),
66+
semanticsLabel: 'Settings',
67+
divider: FItemDivider.indented,
68+
children: [
69+
FItem(title: const Text('Item'),
70+
],
71+
);
72+
```
73+
74+
### `FItemGroup.builder(...)`
75+
76+
```dart copy
77+
FItemGroup.builder(
78+
scrollController: ScrollController(),
79+
style: FItemGroupStyle(...),
80+
cacheExtent: 100,
81+
maxHeight: 200,
82+
dragStartBehavior: DragStartBehavior.start,
83+
physics: const ClampingScrollPhysics(),
84+
semanticsLabel: 'Settings',
85+
divider: FItemDivider.indented,
86+
itemBuilder: (context, index) => index < 10 ? FItem(title: Text('Item $index')) : null,
87+
count: 100,
88+
);
89+
```
90+
91+
### `FItemGroup.merge(...)`
92+
93+
```dart copy
94+
FItemGroup.merge(
95+
scrollController: ScrollController(),
96+
cacheExtent: 100,
97+
maxHeight: 200,
98+
dragStartBehavior: DragStartBehavior.start,
99+
physics: const ClampingScrollPhysics(),
100+
semanticsLabel: 'Settings',
101+
divider: FItemDivider.indented,
102+
children: [
103+
FItemGroup(
104+
children: [],
105+
)
106+
],
107+
);
108+
```
109+
110+
## Examples
111+
112+
### Behavior
113+
114+
#### Scrollable
115+
116+
<Tabs items={['Preview', 'Code']}>
117+
<Tabs.Tab>
118+
<Widget name='item-group' variant='scrollable' query={{}} height={300}/>
119+
</Tabs.Tab>
120+
<Tabs.Tab>
121+
```dart {2} copy
122+
FItemGroup(
123+
maxHeight: 150,
124+
children: [
125+
FItem(
126+
prefix: Icon(FIcons.user),
127+
title: const Text('Personalization'),
128+
suffix: Icon(FIcons.chevronRight),
129+
onPress: () {},
130+
),
131+
FItem(
132+
prefix: Icon(FIcons.mail),
133+
title: const Text('Mail'),
134+
suffix: Icon(FIcons.chevronRight),
135+
onPress: () {},
136+
),
137+
FItem(
138+
prefix: Icon(FIcons.wifi),
139+
title: const Text('WiFi'),
140+
details: const Text('Forus Labs (5G)'),
141+
suffix: Icon(FIcons.chevronRight),
142+
onPress: () {},
143+
),
144+
FItem(
145+
prefix: Icon(FIcons.alarmClock),
146+
title: const Text('Alarm Clock'),
147+
suffix: Icon(FIcons.chevronRight),
148+
onPress: () {},
149+
),
150+
FItem(
151+
prefix: Icon(FIcons.qrCode),
152+
title: const Text('QR code'),
153+
suffix: Icon(FIcons.chevronRight),
154+
onPress: () {},
155+
),
156+
],
157+
);
158+
```
159+
</Tabs.Tab>
160+
</Tabs>
161+
162+
#### Lazy Scrollable
163+
164+
<Tabs items={['Preview', 'Code']}>
165+
<Tabs.Tab>
166+
<Widget name='item-group' variant='lazy' query={{}} height={300}/>
167+
</Tabs.Tab>
168+
<Tabs.Tab>
169+
```dart copy
170+
FItemGroup.builder(
171+
maxHeight: 200,
172+
count: 200,
173+
itemBuilder: (context, index) => FItem(
174+
title: Text('Item $index'),
175+
suffix: Icon(FIcons.chevronRight),
176+
onPress: () {},
177+
),
178+
);
179+
```
180+
</Tabs.Tab>
181+
</Tabs>
182+
183+
#### Merge Multiple Groups
184+
185+
This function merges multiple `FItemGroupMixin`s into a single group. It is useful for representing a group with
186+
several sections.
187+
188+
<Tabs items={['Preview', 'Code']}>
189+
<Tabs.Tab>
190+
<Widget name='item-group' variant='merge' query={{}} height={300}/>
191+
</Tabs.Tab>
192+
<Tabs.Tab>
193+
```dart copy
194+
FItemGroup.merge(
195+
children: [
196+
FItemGroup(
197+
children: [
198+
FItem(
199+
prefix: Icon(FIcons.user),
200+
title: const Text('Personalization'),
201+
suffix: Icon(FIcons.chevronRight),
202+
onPress: () {},
203+
),
204+
FItem(
205+
prefix: Icon(FIcons.wifi),
206+
title: const Text('WiFi'),
207+
details: const Text('Forus Labs (5G)'),
208+
suffix: Icon(FIcons.chevronRight),
209+
onPress: () {},
210+
),
211+
],
212+
),
213+
FItemGroup(
214+
children: [
215+
FItem(
216+
prefix: const Icon(FIcons.list),
217+
title: const Text('List View'),
218+
suffix: const Icon(FIcons.chevronRight),
219+
onPress: () {},
220+
),
221+
FItem(
222+
prefix: const Icon(FIcons.grid2x2),
223+
title: const Text('Grid View'),
224+
suffix: const Icon(FIcons.chevronRight),
225+
onPress: () {},
226+
),
227+
],
228+
),
229+
],
230+
);
231+
```
232+
</Tabs.Tab>
233+
</Tabs>
234+
235+
### Appearance
236+
237+
#### Full Divider
238+
239+
<Tabs items={['Preview', 'Code']}>
240+
<Tabs.Tab>
241+
<Widget name='item-group' variant='default' query={{divider: 'full'}}/>
242+
</Tabs.Tab>
243+
<Tabs.Tab>
244+
```dart {2} copy
245+
FItemGroup(
246+
divider: FItemDivider.full,
247+
children: [
248+
FItem(
249+
prefix: Icon(FIcons.user),
250+
title: const Text('Personalization'),
251+
suffix: Icon(FIcons.chevronRight),
252+
onPress: () {},
253+
),
254+
FItem(
255+
prefix: Icon(FIcons.wifi),
256+
title: const Text('WiFi'),
257+
details: const Text('Forus Labs (5G)'),
258+
suffix: Icon(FIcons.chevronRight),
259+
onPress: () {},
260+
),
261+
],
262+
);
263+
```
264+
</Tabs.Tab>
265+
</Tabs>
266+
267+
#### Indented Divider
268+
269+
<Tabs items={['Preview', 'Code']}>
270+
<Tabs.Tab>
271+
<Widget name='item-group' variant='default' query={{divider: 'indented'}}/>
272+
</Tabs.Tab>
273+
<Tabs.Tab>
274+
```dart 23} copy
275+
FItemGroup(
276+
divider: FItemDivider.indented,
277+
children: [
278+
FItem(
279+
prefix: Icon(FIcons.user),
280+
title: const Text('Personalization'),
281+
suffix: Icon(FIcons.chevronRight),
282+
onPress: () {},
283+
),
284+
FItem(
285+
prefix: Icon(FIcons.wifi),
286+
title: const Text('WiFi'),
287+
details: const Text('Forus Labs (5G)'),
288+
suffix: Icon(FIcons.chevronRight),
289+
onPress: () {},
290+
),
291+
],
292+
);
293+
```
294+
</Tabs.Tab>
295+
</Tabs>

‎docs/app/docs/foundation/item/page.mdx‎ renamed to ‎docs/app/docs/data/item/page.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import LinkBadgeGroup from '@/components/ui/link-badge/link-badge-group.tsx';
99
An item is typically used to group related information together.
1010

1111
<LinkBadgeGroup>
12-
<LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.foundation/FItem-class.html"/>
12+
<LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.widgets.item/"/>
1313
</LinkBadgeGroup>
1414

1515
<Tabs items={['Preview', 'Code']}>

‎docs/app/docs/tile/tile-group/page.mdx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -186,10 +186,6 @@ FTileGroup.merge(
186186
This function merges multiple `FTileGroupMixin`s into a single group. It is useful for representing a group with
187187
several sections.
188188

189-
<Callout type="warning">
190-
Deeply nesting `FTileGroupMixin`s is not supported.
191-
</Callout>
192-
193189
<Tabs items={['Preview', 'Code']}>
194190
<Tabs.Tab>
195191
<Widget name='tile-group' variant='merge' query={{}} height={300}/>

‎docs/app/docs/tile/tile/page.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import LinkBadgeGroup from '@/components/ui/link-badge/link-badge-group.tsx';
66

77
# Tile
88

9-
A specialized [Item](/docs/foundation/item) for touch devices, typically used to group related information together.
9+
A specialized [Item](/docs/data/item) for touch devices, typically used to group related information together.
1010

1111
<LinkBadgeGroup>
1212
<LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.widgets.tile/"/>

‎forui/CHANGELOG.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -115,11 +115,11 @@ An `FItem` is typically used to group related information together. It is a more
115115
to build more complex widgets.
116116

117117
* Add `FItem`.
118+
* Add `FItemData`.
118119
* Add `FItemDivider`.
120+
* Add `FItemGroup`.
119121
* Add `FItemStyle`.
120122
* Add `FItemContentStyle`.
121-
* Add `FItemContainerData`.
122-
* Add `FItemContainerItemData`.
123123

124124

125125
### `FPopover`
@@ -242,8 +242,8 @@ We have refactored `FTile`'s implementation to be simpler & its styling to be ea
242242
* Change `FTile`'s focused outline to be a rounded rectangle even if the tile is inside a `FTileGroup`.
243243
* Change `FTile` to no longer wrap its content inside a `FTileData` if it is not part of a `FTileGroup`.
244244
* **Breaking** Remove `FTileDivider` - use `FItemDivider` instead.
245-
* **Breaking** Remove `FTileData` - use `FItemContainerItemData` instead.
246-
* **Breaking** Remove `FTileGroupData` - use `FItemContainerData`s instead.
245+
* **Breaking** Remove `FTileData` - use `FItemData` instead.
246+
* **Breaking** Remove `FTileGroupData` - use `FItemData`s instead.
247247
* **Breaking** Change `FTileStyle` to extend `FItemStyle`.
248248
* **Breaking** Remove `FTileStateStyle`.
249249
* **Breaking** Remove `FTileStateStyle.backgroundColor` - use `FTileStyle.decoration` instead.

‎forui/bin/commands/style/style.dart‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎forui/lib/forui.dart‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export 'widgets/date_field.dart';
2020
export 'widgets/dialog.dart';
2121
export 'widgets/divider.dart';
2222
export 'widgets/header.dart';
23+
export 'widgets/item.dart';
2324
export 'widgets/label.dart';
2425
export 'widgets/line_calendar.dart';
2526
export 'widgets/pagination.dart';

‎forui/lib/foundation.dart‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,6 @@ export 'src/foundation/collapsible.dart';
77
export 'src/foundation/doc_templates.dart' hide Focus, Scroll, Semantics, WidgetStates;
88
export 'src/foundation/focused_outline.dart';
99
export 'src/foundation/form_field_properties.dart';
10-
export 'src/foundation/item/item.dart';
11-
export 'src/foundation/item/item_container_data.dart';
12-
export 'src/foundation/item/item_content.dart' hide ItemContent;
13-
export 'src/foundation/item/raw_item_content.dart' hide RawItemContent;
1410
export 'src/foundation/notifiers.dart';
1511
export 'src/foundation/rendering.dart' hide Alignments, DefaultData, RenderBoxes;
1612
export 'src/foundation/tappable.dart' hide AnimatedTappable, AnimatedTappableState;

0 commit comments

Comments
 (0)