Skip to content

Commit 8faa6d8

Browse files
divyanshub024divyanshub024
authored
Merge pull request #89 from khanjasir90/khanjasir90/listview-docs
feat: added listview docs
2 parents db4615d + 0cffe71 commit 8faa6d8

File tree

1 file changed

+207
-0
lines changed

1 file changed

+207
-0
lines changed

‎website/docs/widgets/listview.md‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
# ListView
2+
3+
Mirai listview allows you to build the Flutter listview widget using JSON.
4+
To know more about the listview widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/ListView-class.html).
5+
6+
## Properties
7+
8+
| Property | Type | Description |
9+
| --- |-------------------|---------------------------------------------------|
10+
| scrollDirection | `Axis` | The Axis along which the scroll view's offset increases. |
11+
| reverse | `bool` | Whether the scroll view scrolls in the reading direction. |
12+
| primary | `bool` | Whether this is the primary scroll view. |
13+
| physics | `MiraiScrollPhysics` | How the scroll view should respond to user input. |
14+
| shrinkWrap | `bool` | Whether the extent of the scroll view in the scrollDirection should be determined by the contents being viewed. |
15+
| padding | `MiraiEdgeInsets` | The amount of space by which to inset the children. |
16+
| addAutomaticKeepAlives | `bool` | Determines whether the children should be automatically kept alive (cached) when they are no longer visible, preserving their state. |
17+
| addRepaintBoundaries | `bool` | Determines whether each child widget is wrapped in a RepaintBoundary to optimize rendering by reducing unnecessary repaints. |
18+
| addSemanticIndexes | `bool` | Determines whether semantic indexes are assigned to the children, enabling accessibility tools to understand the order and structure of the list items. |
19+
| cacheExtent | `double` | The viewport has an area before and after the visible area to cache items that are about to become visible when the user scrolls. |
20+
| children | `List<Map<String,dynamic>>` | The widgets below this widget in the tree. |
21+
| separator | `Map<String,dynamic>` | Defines a widget, to display between each pair of list items. |
22+
| semanticChildCount | `int` | The number of children that will contribute semantic information. |
23+
| dragStartBehavior | `DragStartBehavior` | Determines the way that drag start behavior is handled. |
24+
| keyboardDismissBehavior | `ScrollViewKeyboardDismissBehavior` | Defines how this ScrollView will dismiss the keyboard automatically. |
25+
| restorationId | `String` | Restoration ID to save and restore the scroll offset of the scrollable. |
26+
| clipBehavior | `Clip` | The content will be clipped (or not) according to this option. |
27+
28+
## Example JSON
29+
30+
```json
31+
{
32+
"type": "listView",
33+
"shrinkWrap": true,
34+
"separator": {
35+
"type": "container",
36+
"height": 10
37+
},
38+
"children": [
39+
{
40+
"type": "listTile",
41+
"leading": {
42+
"type": "container",
43+
"height": 50,
44+
"width": 50,
45+
"color": "#165FC7",
46+
"child": {
47+
"type": "column",
48+
"mainAxisAlignment": "center",
49+
"crossAxisAlignment": "center",
50+
"children": [
51+
{
52+
"type": "text",
53+
"data": "1",
54+
"style": {
55+
"fontSize": 21
56+
}
57+
}
58+
]
59+
}
60+
},
61+
"title": {
62+
"type": "padding",
63+
"padding": {
64+
"top": 10
65+
},
66+
"child": {
67+
"type": "text",
68+
"data": "Item 1",
69+
"style": {
70+
"fontSize": 18
71+
}
72+
}
73+
},
74+
"subtitle": {
75+
"type": "padding",
76+
"padding": {
77+
"top": 10
78+
},
79+
"child": {
80+
"type": "text",
81+
"data": "Item description",
82+
"style": {
83+
"fontSize": 14
84+
}
85+
}
86+
},
87+
"trailing": {
88+
"type": "icon",
89+
"iconType": "material",
90+
"icon": "more_vert",
91+
"size": 24
92+
}
93+
},
94+
{
95+
"type": "listTile",
96+
"leading": {
97+
"type": "container",
98+
"height": 50,
99+
"width": 50,
100+
"color": "#165FC7",
101+
"child": {
102+
"type": "column",
103+
"mainAxisAlignment": "center",
104+
"crossAxisAlignment": "center",
105+
"children": [
106+
{
107+
"type": "text",
108+
"data": "2",
109+
"style": {
110+
"fontSize": 21
111+
}
112+
}
113+
]
114+
}
115+
},
116+
"title": {
117+
"type": "padding",
118+
"padding": {
119+
"top": 10
120+
},
121+
"child": {
122+
"type": "text",
123+
"data": "Item 2",
124+
"style": {
125+
"fontSize": 18
126+
}
127+
}
128+
},
129+
"subtitle": {
130+
"type": "padding",
131+
"padding": {
132+
"top": 10
133+
},
134+
"child": {
135+
"type": "text",
136+
"data": "Item description",
137+
"style": {
138+
"fontSize": 14
139+
}
140+
}
141+
},
142+
"trailing": {
143+
"type": "icon",
144+
"iconType": "material",
145+
"icon": "more_vert",
146+
"size": 24
147+
}
148+
},
149+
{
150+
"type": "listTile",
151+
"leading": {
152+
"type": "container",
153+
"height": 50,
154+
"width": 50,
155+
"color": "#165FC7",
156+
"child": {
157+
"type": "column",
158+
"mainAxisAlignment": "center",
159+
"crossAxisAlignment": "center",
160+
"children": [
161+
{
162+
"type": "text",
163+
"data": "3",
164+
"style": {
165+
"fontSize": 21
166+
}
167+
}
168+
]
169+
}
170+
},
171+
"title": {
172+
"type": "padding",
173+
"padding": {
174+
"top": 10
175+
},
176+
"child": {
177+
"type": "text",
178+
"data": "Item 3",
179+
"style": {
180+
"fontSize": 18
181+
}
182+
}
183+
},
184+
"subtitle": {
185+
"type": "padding",
186+
"padding": {
187+
"top": 10
188+
},
189+
"child": {
190+
"type": "text",
191+
"data": "Item description",
192+
"style": {
193+
"fontSize": 14
194+
}
195+
}
196+
},
197+
"trailing": {
198+
"type": "icon",
199+
"iconType": "material",
200+
"icon": "more_vert",
201+
"size": 24
202+
}
203+
}
204+
]
205+
}
206+
```
207+

0 commit comments

Comments
 (0)