# Components Every built-in, with the JSX you write and the native render it produces — screenshots straight off the iOS Simulator, regenerated from the [gallery app](https://github.com/skal-multiplatform/skal/tree/main/examples/gallery). Capitalized tags compile to binary ops; styling is props; `testID` and `semanticLabel` ride Flutter's real semantics tree. [Content](#content) · [Layout](#layout) · [Input](#input) · [Lists](#lists) · [Navigation](#navigation) · [Effects](#effects) ## Content ### → Text Styled text — size, weight, family, color, alignment, maxLines, overflow. ```jsx ```  ### → Text.rich Inline spans — each Text child becomes a styled TextSpan. ```jsx ```  ### → Image Network, file://, or asset:// sources; BoxFit via contentScale. ```jsx ```  ### → CustomPaint A chainable 2-D drawing context — rects, circles, paths, text. Reads signals; redraws when they change. ```jsx { [60, 110, 80, 140, 95].forEach((v, i) => c.fillStyle(i === 3 ? '#FF0A84FF' : '#FFBF5AF2') .fillRect(24 + i * 58, 170 - v, 40, v)); c.fillStyle('#FF1C1C1E').fontSize(13).fillText('rendered on a signal', 24, 24); }} /> ```  ### → CircularProgressIndicator Indeterminate spinner; color and size are props. ```jsx ```  ### → LinearProgressIndicator Determinate with progress 0..1, indeterminate without. ```jsx {/* indeterminate */} ```  ## Layout ### → Container The decorated box — padding, background, corners, borders, shadows, tap/hover/drag handlers. ```jsx setLiked(!liked())}> ```  ### → Column Vertical flex; gap, padding, alignment; children flex with weight. ```jsx ```  ### → Row Horizontal flex; weight distributes leftover space. ```jsx ```  ### → Stack Layered children; top/right/bottom/left props position them absolutely. ```jsx ```  ### → Wrap Flow layout — children wrap to the next line; gap sets both spacings. ```jsx {(t) => } ```  ### → SingleChildScrollView Eager scrolling for short content; axis 0 = vertical, 1 = horizontal. Use ListView for long lists. ```jsx {(c) => } ```  ## Input ### → ElevatedButton label + onClick; disable with enabled={false}. ```jsx submit()} /> ```  ### → TextField Controlled text field — onChange per keystroke, onSubmit on Enter, secureEntry for passwords. ```jsx save(v)} /> ```  ### → Switch Boolean toggle; the app owns the state. ```jsx ```  ### → Checkbox Checked/unchecked; onChange(bool). ```jsx ```  ### → Radio One option in a group the app owns — onChange fires with true. ```jsx {(opt, i) => setSel(i())} /> } ```  ### → FilterChip Toggleable filter chip — label, checked, onChange(bool). ```jsx toggle('solid', v)} /> ```  ### → SegmentedButton One-of-N selector; children are the segment labels. ```jsx ```  ### → DropdownButton Select from a menu; children are the options. ```jsx ```  ### → Slider Continuous value between min and max. ```jsx ```  ### → Stepper Multi-step flows; each Step has a title and a body. ```jsx ```  ## Lists ### → ListView.builder Lazy, virtualized list — thousands of rows stay smooth. axis 1 for horizontal. ```jsx {(r) => } ```  ### → ListTile title, subtitle, leading/trailing icons, onTap — the settings-row workhorse. ```jsx open('notifications')} /> ```  ### → GridView.builder Virtualized grid; crossAxisCount columns, aspectRatio per cell. ```jsx {(c) => } ```  ### → ReorderableListView.builder Drag rows to reorder; onReorder(from, to) updates your source array. ```jsx move(from, to)}> {(r) => } ```  ### → PageView Swipeable pages; activeTab is the page index. ```jsx ```  ### → AnimatedList Items animate in and out as your array changes. ```jsx {(t) => } ```  ### → Dismissible Swipe a row away; onDismiss removes it from your data. ```jsx remove(item.id)}> ```  ## Navigation ### → NavigationBar + IndexedStack Bottom tab navigation; every tab stays mounted (state survives switching). ```jsx ```  ### → ExpansionTile Collapsible section; the host animates open/close. ```jsx ```  ### → CustomScrollView + SliverAppBar Collapsing header inside a sliver scroll — pinned, floating, or both. ```jsx {(r) => } ```  ### → DraggableScrollableSheet Drag-resizable sheet anchored to the bottom of a Stack. ```jsx ```  ## Effects ### → BackdropFilter Frosted-glass blur over whatever is behind it in a Stack. ```jsx {/* colorful content… */} ```  ### → InteractiveViewer Pinch-zoom and pan around a child. ```jsx ```  ### → AnimatedSwitcher Cross-fades between children when the content swaps. ```jsx {day() ? : } ```  ### → Draggable + DragTarget Native drag-and-drop; the drop zone receives the item id. ```jsx setDropped(id)}> ```  ## Not pictured `Navigator`/`Screen` and `Hero` are navigation transitions (see [createRouter](architecture.html)), `Drawer` is the edge-swipe panel, `SafeArea` is inset plumbing, and dialogs/snackbars/pickers are imperative calls (`showDialog`, `showActionSheet`, `showSnackbar`, `showDatePicker`, `showTimePicker`) — one-liners from `skal/renderer`. Web escape hatches: `HtmlEmbed` and `FlutterEmbed`. [Previous← Architecture](architecture.html) [NextState & the Store →](state.html)