flet-box 1.0.3 → 1.0.5

package/docs/widget/CollapsibleSideBar.md

@@ -0,0 +1,112 @@
+# CollapsibleSideBar
+
+## Overview
+`CollapsibleSideBar` is a vertical side panel that can expand and collapse with a 300 ms width transition. The expanded width is `widthExpanded` (default `260px`), the collapsed width is `widthCollapsed` (default `60px`), and a chevron button at the top toggles between them. The expanded/collapsed state is persisted through `useState` under a key (use `id` to give each sidebar its own stored state), so the choice survives route changes and re-renders.
+
+## When to use
+- Provide a compact-to-full side navigation on desktop without a full drawer.
+- Let users reclaim screen space when they do not need the menu.
+
+## Import
+
+```javascript
+import { CollapsibleSideBar, DrawerItem } from "flet-box";
+```
+
+## Basic example
+
+The smallest useful version. Start here if this widget is new to you.
+
+```javascript
+import { CollapsibleSideBar, DrawerItem } from "flet-box";
+
+CollapsibleSideBar({
+  children: [
+    DrawerItem({ icon: "home", label: "Home", route: "/" }),
+    DrawerItem({ icon: "settings", label: "Settings", route: "/settings" }),
+  ],
+});
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | Widget | — | The sidebar content. |
+| `expanded` | boolean | `true` | Initial expanded state. |
+| `id` | string | `"collapsible-sidebar"` | State key — give each sidebar its own `id` so they keep separate collapsed states. |
+| `widthExpanded` | number | `260` | Width in px when expanded. |
+| `widthCollapsed` | number | `60` | Width in px when collapsed. |
+| `iconSize` | number | `24` | Size of the chevron toggle button. |
+| `onToggle` | function | — | Fired with the new boolean state after toggling. |
+| `bgColor` | Color | `colors.surface` | Background. |
+| `borderRight` | string | `1px solid colors.border` | Right border CSS. |
+
+These are the props specific to `CollapsibleSideBar`. It also accepts every [common prop](COMMON_PROPS.md); extra props and `style` are applied to the container.
+
+## Instance methods
+
+- `updateWidth(width)` — resize the panel directly (a number is treated as pixels; a string is passed through).
+
+## Examples
+
+### Everyday example
+
+```javascript
+import { CollapsibleSideBar, DrawerItem } from "flet-box";
+
+CollapsibleSideBar({
+  id: "main-sidebar",
+  children: [
+    DrawerItem({ icon: "dashboard", label: "Dashboard", route: "/" }),
+    DrawerItem({ icon: "report", label: "Reports", route: "/reports" }),
+  ],
+});
+```
+
+### Full example
+
+```javascript
+import { runApp, Scaffold, CollapsibleSideBar, DrawerItem, Text } from "flet-box";
+
+const sidebar = CollapsibleSideBar({
+  id: "admin-sidebar",
+  widthExpanded: 280,
+  widthCollapsed: 64,
+  children: [
+    DrawerItem({ icon: "admin_panel_settings", label: "Admin", route: "/admin" }),
+    DrawerItem({ icon: "group", label: "Users", route: "/users" }),
+  ],
+  onToggle: (expanded) => console.log("sidebar", expanded ? "open" : "closed"),
+});
+
+const app = Scaffold({
+  leftNavBar: sidebar,
+  body: Text({ text: "Admin area" }),
+});
+
+runApp(app, "root");
+```
+
+## Notes
+
+- When collapsed, the content fades to `opacity: 0` and `pointer-events: none`; the chevron flips direction (`chevron_left` ↔ `chevron_right`).
+- The collapsed/expanded state is stored via `useState` under the `id` key, so it is shared by every sidebar with the same `id`. Give unique `id`s to separate sidebars.
+- It is the desktop-side layout that [AdaptiveScaffold](AdaptiveScaffold.md) produces automatically from a `leftNavBar`.
+- Place it in a fix-width flex column (like `Scaffold`'s `leftNavBar` or a `Row`) — its `flex-shrink: 0` keeps the rest of the layout from squishing.
+
+## Related widgets
+- [AdaptiveScaffold](AdaptiveScaffold.md)
+- [Scaffold](Scaffold.md)
+- [DrawerItem](DrawerItem.md)
+- [Drawer](Drawer.md)
+
+---
+
+## Continue reading
+
+- **Previous:** [Tabs](Tabs.md)
+- **Next:** [State with `useState`](../guides/state.md) — Chapter 9 · State, Router & Services
+- **Index:** [Widget index](README.md) · [Start here](START_HERE.md)
+
+You are reading **Chapter 8 · App navigation** (8 of 8).

package/docs/widget/Column.md

@@ -0,0 +1,129 @@
+# Column
+
+Vertical flex layout that stacks its children one below another. It is full width and leaves height at auto by default.
+
+## When to use it
+
+Use Column for forms, lists of blocks, and any content that reads from top to bottom.
+
+## Quick start
+
+```javascript
+import { Column, Text } from "flet-box";
+
+const column = Column({
+  gap: 8,
+  children: [
+    Text({ text: "First" }),
+    Text({ text: "Second" }),
+  ],
+});
+```
+
+> The prop table is generated from `src/index.d.ts`; the examples use only documented props.
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `gap` | `number \| string` | Space between children along the layout axis. |
+| `justifyContent` | `ContainerProps['justifyContent']` | Aligns children along the main axis (CSS `justify-content`). |
+| `alignItems` | `ContainerProps['alignItems']` | Aligns children across the cross axis (CSS `align-items`). |
+| `children` | `Widget[]` | An array of child widgets. Alias: `child` for a single child. |
+| `onPress` | `(widget: Widget) => void` | Callback fired when the widget is pressed. Alias: `onClick`. |
+
+### Common props
+
+Every widget also accepts these shared props — see [common props](COMMON_PROPS.md) for the full rules and aliases.
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `width` | `Size` | Width of the widget. A number is pixels; a string uses any CSS unit. |
+| `height` | `Size` | Height of the widget. A number is pixels; a string uses any CSS unit. |
+| `size` | `Size` | Overall size preset or pixel value, depending on the widget. |
+| `padding` | `Padding` | Space inside the widget, between its content and its border. |
+| `margin` | `Margin` | Space outside the widget, between it and its neighbors. |
+| `bgColor` | `Color` | Background color. Alias: `backgroundColor`. |
+| `color` | `Color` | Foreground color, usually the text or icon color. |
+| `borderRadius` | `number \| string` | Rounds the corners of the widget. |
+| `elevation` | `number` | Shadow depth. Higher values lift the widget off the page. |
+| `shadow` | `string` | Raw CSS `box-shadow` value, for a custom shadow. |
+| `opacity` | `number` | Opacity from 0 (invisible) to 1 (fully opaque). |
+| `visible` | `boolean` | Whether the widget is rendered and visible. |
+| `disabled` | `boolean` | Disables interaction and shows the non-interactive state. |
+| `onPress` | `(widget: Widget) => void` | Callback fired when the widget is pressed. Alias: `onClick`. |
+| `onClick` | `(widget: Widget) => void` | Callback fired when the widget is clicked. Alias: `onPress`. |
+| `id` | `string` | DOM `id` for the rendered element. |
+| `className` | `string` | CSS class names applied to the rendered element. |
+| `ref` | `(widget: Widget) => void` | Callback that receives the underlying DOM node. |
+| `disableTransform` | `boolean` | Disables the default press/scale transform animation. |
+
+## Examples
+
+### Everyday
+
+```javascript
+import { Column, Text, flex } from "flet-box";
+
+const column = Column({
+  gap: 12,
+  padding: 16,
+  alignItems: "flex-start",
+  children: [
+    Text({ text: "Account settings", type: "h3", weight: "bold" }),
+    Text({ text: "Update your profile details." }),
+  ],
+});
+```
+
+### Full
+
+```javascript
+import { Button, Column, Text, flex } from "flet-box";
+
+const column = Column({
+  gap: 16,
+  justifyContent: "flex-start",
+  alignItems: "stretch",
+  padding: 24,
+  bgColor: "#ffffff",
+  borderRadius: 16,
+  children: [
+    Text({ text: "Sign in", type: "h2", weight: "bold" }),
+    Button({ text: "Continue", fullWidth: true, onPress: () => console.log("go") }),
+    Button({ text: "Cancel", variant: "text" }),
+  ],
+});
+```
+
+## Tips
+
+- `gap` controls the space between stacked children.
+- Set `alignItems: "center"` to center children horizontally in the column.
+- Give children `expand` to split the available height between them.
+
+## Accessibility
+
+- Maintain reading order from top to bottom and avoid purely visual reordering of the children.
+
+## Behavior
+
+- The element is `display: flex` with `flex-direction: column`; passing `onPress` makes the whole column interactive.
+- Children stack in the order given, and `justifyContent` controls how leftover vertical space is used.
+
+## Related widgets
+
+- [Row](Row.md)
+- [Container](Container.md)
+- [Stack](Stack.md)
+- [ListView](ListView.md)
+
+---
+
+## Continue reading
+
+- **Previous:** [Row](Row.md)
+- **Next:** [Stack](Stack.md)
+- **Index:** [Widget index](README.md) · [Start here](START_HERE.md)
+
+You are reading **Chapter 1 · First steps: the core mental model** (4 of 7).

package/docs/widget/Container.md

@@ -0,0 +1,136 @@
+# Container
+
+General-purpose surface box. It is a flex column by default and groups children while controlling spacing, background, sizing, and overflow.
+
+## When to use it
+
+Reach for Container whenever you need a rectangular surface to group content or apply padding, background, and size.
+
+## Quick start
+
+```javascript
+import { Container, Text } from "flet-box";
+
+const panel = Container({
+  padding: 16,
+  bgColor: "#f8fafc",
+  child: Text({ text: "Hello FletBox" }),
+});
+```
+
+> The prop table is generated from `src/index.d.ts`; the examples use only documented props.
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `direction` | `'row' \| 'column'` | Main-axis direction for layout widgets (`row` or `column`). |
+| `gap` | `number \| string` | Space between children along the layout axis. |
+| `justifyContent` | `'flex-start' \| 'center' \| 'flex-end' \| 'space-between' \| 'space-around' \| 'space-evenly'` | Aligns children along the main axis (CSS `justify-content`). |
+| `alignItems` | `'flex-start' \| 'center' \| 'flex-end' \| 'stretch'` | Aligns children across the cross axis (CSS `align-items`). |
+| `wrap` | `boolean \| 'wrap' \| 'nowrap' \| 'wrap-reverse'` | Lets children wrap onto multiple lines. |
+| `child` | `Widget` | A single child widget. Alias: `children` for a list. |
+| `children` | `Widget[]` | An array of child widgets. Alias: `child` for a single child. |
+| `expand` | `boolean \| number` | Lets a flex child grow to fill available space. |
+| `flex` | `number` | Flex grow/shrink/basis shorthand for a flex child. |
+| `minHeight` | `Size` | Minimum height the widget may shrink to. |
+| `maxHeight` | `Size` | Maximum height the widget may grow to. |
+| `minWidth` | `Size` | Minimum width the widget may shrink to. |
+| `maxWidth` | `Size` | Maximum width the widget may grow to. |
+| `overflow` | `'auto' \| 'hidden' \| 'visible' \| 'scroll'` | How overflowing content is handled (`hidden`, `auto`, `scroll`). |
+
+### Common props
+
+Every widget also accepts these shared props — see [common props](COMMON_PROPS.md) for the full rules and aliases.
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `width` | `Size` | Width of the widget. A number is pixels; a string uses any CSS unit. |
+| `height` | `Size` | Height of the widget. A number is pixels; a string uses any CSS unit. |
+| `size` | `Size` | Overall size preset or pixel value, depending on the widget. |
+| `padding` | `Padding` | Space inside the widget, between its content and its border. |
+| `margin` | `Margin` | Space outside the widget, between it and its neighbors. |
+| `bgColor` | `Color` | Background color. Alias: `backgroundColor`. |
+| `color` | `Color` | Foreground color, usually the text or icon color. |
+| `borderRadius` | `number \| string` | Rounds the corners of the widget. |
+| `elevation` | `number` | Shadow depth. Higher values lift the widget off the page. |
+| `shadow` | `string` | Raw CSS `box-shadow` value, for a custom shadow. |
+| `opacity` | `number` | Opacity from 0 (invisible) to 1 (fully opaque). |
+| `visible` | `boolean` | Whether the widget is rendered and visible. |
+| `disabled` | `boolean` | Disables interaction and shows the non-interactive state. |
+| `onPress` | `(widget: Widget) => void` | Callback fired when the widget is pressed. Alias: `onClick`. |
+| `onClick` | `(widget: Widget) => void` | Callback fired when the widget is clicked. Alias: `onPress`. |
+| `id` | `string` | DOM `id` for the rendered element. |
+| `className` | `string` | CSS class names applied to the rendered element. |
+| `ref` | `(widget: Widget) => void` | Callback that receives the underlying DOM node. |
+| `disableTransform` | `boolean` | Disables the default press/scale transform animation. |
+
+## Examples
+
+### Everyday
+
+```javascript
+import { Container, Text } from "flet-box";
+
+const panel = Container({
+  direction: "column",
+  gap: 12,
+  padding: 16,
+  borderRadius: 12,
+  child: Text({ text: "Account settings" }),
+});
+```
+
+### Full
+
+```javascript
+import { Container, Text } from "flet-box";
+
+const panel = Container({
+  direction: "column",
+  gap: 16,
+  padding: 24,
+  margin: 16,
+  borderRadius: 16,
+  bgColor: "#ffffff",
+  elevation: 2,
+  maxWidth: 480,
+  overflow: "auto",
+  children: [
+    Text({ text: "Account settings", type: "h3", weight: "bold" }),
+    Text({ text: "Update your profile details." }),
+  ],
+});
+```
+
+## Tips
+
+- Container is a column by default; set `direction: "row"` to lay children out horizontally.
+- `bgColor` defaults to the theme surface and `overflow` defaults to `"auto"`, so long content scrolls.
+- Use `expand` or `flex` to let a container share free space inside a parent flex layout.
+
+## Accessibility
+
+- Keep one logical section per Container so screen-reader navigation lands on meaningful groups.
+
+## Behavior
+
+- One child uses `child`; several use `children`; `gap` controls the space between them.
+- `minWidth`, `maxWidth`, `minHeight`, and `maxHeight` constrain the surface, while `overflow` decides how excess content behaves.
+
+## Related widgets
+
+- [Row](Row.md)
+- [Column](Column.md)
+- [Stack](Stack.md)
+- [Card](Card.md)
+
+---
+
+## Continue reading
+
+- **Previous:** [Text](Text.md)
+- **Next:** [Row](Row.md)
+- **Index:** [Widget index](README.md) · [Start here](START_HERE.md)
+
+You are reading **Chapter 1 · First steps: the core mental model** (2 of 7).

package/docs/widget/DataTable.md

@@ -0,0 +1,150 @@
+# DataTable
+
+DataTable renders tabular rows using a columns definition, with optional striping, hover and borders. Column entries can be plain strings or DataTableColumn objects.
+
+## When to use it
+
+Use it to present structured, comparable data such as reports, lists or admin grids.
+
+## Quick start
+
+```javascript
+import { DataTable } from "flet-box";
+
+const table = DataTable({
+  columns: ["Name", "Role"],
+  rows: [{ Name: "Ada", Role: "Engineer" }],
+});
+```
+
+> The prop table is generated from `src/index.d.ts`; the examples use only documented props.
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `columns` | `(string \| DataTableColumn)[]` | Number of grid columns. |
+| `rows` | `Record<string, any>[]` | Data rows rendered by the table. |
+| `striped` | `boolean` | Draws diagonal stripes across the bar. |
+| `hoverable` | `boolean` | Highlights rows on hover. |
+| `bordered` | `boolean` | Draws borders around cells. |
+| `onRowClick` | `(row: any, index: number) => void` | Fired with the clicked row. |
+| `headerBgColor` | `Color` | Background color of the header row. |
+| `headerTextColor` | `Color` | Text color of the header row. |
+| `headerFontWeight` | `string` | The `headerFontWeight` value for the widget. |
+| `headerFontSize` | `number` | Size of the header font. |
+| `rowBgColor` | `Color` | Background color for the row. |
+| `rowTextColor` | `Color` | Color used for the row text. |
+| `rowFontSize` | `number` | Size of the row font. |
+| `stripedRowBgColor` | `Color` | Background color for alternating rows. |
+| `hoverRowBgColor` | `Color` | Background color for the hover row. |
+| `borderColor` | `Color` | Color used for the border. |
+| `borderWidth` | `number` | Width of the border. |
+| `cellPadding` | `Padding` | Padding inside each cell. |
+| `headerCellPadding` | `Padding` | Padding for the header cell. |
+
+### Common props
+
+Every widget also accepts these shared props — see [common props](COMMON_PROPS.md) for the full rules and aliases.
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `width` | `Size` | Width of the widget. A number is pixels; a string uses any CSS unit. |
+| `height` | `Size` | Height of the widget. A number is pixels; a string uses any CSS unit. |
+| `size` | `Size` | Overall size preset or pixel value, depending on the widget. |
+| `padding` | `Padding` | Space inside the widget, between its content and its border. |
+| `margin` | `Margin` | Space outside the widget, between it and its neighbors. |
+| `bgColor` | `Color` | Background color. Alias: `backgroundColor`. |
+| `color` | `Color` | Foreground color, usually the text or icon color. |
+| `borderRadius` | `number \| string` | Rounds the corners of the widget. |
+| `elevation` | `number` | Shadow depth. Higher values lift the widget off the page. |
+| `shadow` | `string` | Raw CSS `box-shadow` value, for a custom shadow. |
+| `opacity` | `number` | Opacity from 0 (invisible) to 1 (fully opaque). |
+| `visible` | `boolean` | Whether the widget is rendered and visible. |
+| `disabled` | `boolean` | Disables interaction and shows the non-interactive state. |
+| `onPress` | `(widget: Widget) => void` | Callback fired when the widget is pressed. Alias: `onClick`. |
+| `onClick` | `(widget: Widget) => void` | Callback fired when the widget is clicked. Alias: `onPress`. |
+| `id` | `string` | DOM `id` for the rendered element. |
+| `className` | `string` | CSS class names applied to the rendered element. |
+| `ref` | `(widget: Widget) => void` | Callback that receives the underlying DOM node. |
+| `disableTransform` | `boolean` | Disables the default press/scale transform animation. |
+
+## Examples
+
+### Everyday
+
+```javascript
+import { DataTable } from "flet-box";
+
+const table = DataTable({
+  columns: ["Name", "Role", "Status"],
+  rows: [
+    { Name: "Ada", Role: "Engineer", Status: "Active" },
+    { Name: "Linus", Role: "Maintainer", Status: "Away" },
+  ],
+  striped: true,
+  hoverable: true,
+  onRowClick: (row) => console.log(row),
+});
+```
+
+### Full
+
+```javascript
+import { DataTable } from "flet-box";
+
+const table = DataTable({
+  columns: ["Name", "Role", "Status"],
+  rows: [
+    { Name: "Ada", Role: "Engineer", Status: "Active" },
+    { Name: "Linus", Role: "Maintainer", Status: "Away" },
+  ],
+  striped: true,
+  hoverable: true,
+  bordered: true,
+  headerBgColor: "#f1f5f9",
+  headerTextColor: "#0f172a",
+  headerFontWeight: "600",
+  headerFontSize: 14,
+  rowFontSize: 13,
+  stripedRowBgColor: "#f8fafc",
+  hoverRowBgColor: "#eff6ff",
+  borderColor: "#e2e8f0",
+  borderWidth: 1,
+  cellPadding: 12,
+  headerCellPadding: 14,
+  onRowClick: (row, index) => console.log(row, index),
+});
+```
+
+## Tips
+
+- Use string column keys that match your row objects, or pass column objects for explicit headers.
+- Turn on striped and hoverable on wide tables to keep rows readable.
+- Attach onRowClick when rows should open details or a drill-down view.
+
+## Accessibility
+
+- Keep header text descriptive so the table has a clear structure for assistive technology.
+- Do not encode meaning in color alone, such as striping, and keep text contrast sufficient.
+
+## Behavior
+
+- Rows render from rows in order and re-render when rows or columns change.
+- onRowClick receives the row object and its index.
+
+## Related widgets
+
+- [ListView](ListView.md)
+- [Card](Card.md)
+- [Pagination](Pagination.md)
+
+---
+
+## Continue reading
+
+- **Previous:** [InstallButton](InstallButton.md)
+- **Next:** [Chart](Chart.md)
+- **Index:** [Widget index](README.md) · [Start here](START_HERE.md)
+
+You are reading **Chapter 6 · Data, rich content & effects** (1 of 13).

package/docs/widget/Divider.md

@@ -0,0 +1,109 @@
+# Divider
+
+A thin horizontal or vertical line that separates sections of content. Its thickness, color, and spacing are all adjustable.
+
+## When to use it
+
+Use it to break up lists, forms, or toolbars where whitespace alone is not enough.
+
+## Quick start
+
+```javascript
+import { Divider } from "flet-box";
+
+const divider = Divider({});
+```
+
+> The prop table is generated from `src/index.d.ts`; the examples use only documented props.
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `color` | `Color` | Foreground color, usually the text or icon color. |
+| `thickness` | `number` | The `thickness` value for the widget. |
+| `margin` | `number \| { top?: number; right?: number; bottom?: number; left?: number }` | Space outside the widget, between it and its neighbors. |
+| `orientation` | `'horizontal' \| 'vertical'` | Orientation of the widget or control. |
+
+### Common props
+
+Every widget also accepts these shared props — see [common props](COMMON_PROPS.md) for the full rules and aliases.
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `width` | `Size` | Width of the widget. A number is pixels; a string uses any CSS unit. |
+| `height` | `Size` | Height of the widget. A number is pixels; a string uses any CSS unit. |
+| `size` | `Size` | Overall size preset or pixel value, depending on the widget. |
+| `padding` | `Padding` | Space inside the widget, between its content and its border. |
+| `margin` | `Margin` | Space outside the widget, between it and its neighbors. |
+| `bgColor` | `Color` | Background color. Alias: `backgroundColor`. |
+| `color` | `Color` | Foreground color, usually the text or icon color. |
+| `borderRadius` | `number \| string` | Rounds the corners of the widget. |
+| `elevation` | `number` | Shadow depth. Higher values lift the widget off the page. |
+| `shadow` | `string` | Raw CSS `box-shadow` value, for a custom shadow. |
+| `opacity` | `number` | Opacity from 0 (invisible) to 1 (fully opaque). |
+| `visible` | `boolean` | Whether the widget is rendered and visible. |
+| `disabled` | `boolean` | Disables interaction and shows the non-interactive state. |
+| `onPress` | `(widget: Widget) => void` | Callback fired when the widget is pressed. Alias: `onClick`. |
+| `onClick` | `(widget: Widget) => void` | Callback fired when the widget is clicked. Alias: `onPress`. |
+| `id` | `string` | DOM `id` for the rendered element. |
+| `className` | `string` | CSS class names applied to the rendered element. |
+| `ref` | `(widget: Widget) => void` | Callback that receives the underlying DOM node. |
+| `disableTransform` | `boolean` | Disables the default press/scale transform animation. |
+
+## Examples
+
+### Everyday
+
+```javascript
+import { Divider } from "flet-box";
+
+const divider = Divider({
+  thickness: 1,
+  color: "#e5e7eb",
+  margin: 16,
+});
+```
+
+### Full
+
+```javascript
+import { Divider } from "flet-box";
+
+const divider = Divider({
+  orientation: "vertical",
+  thickness: 2,
+  color: "#cbd5e1",
+  margin: { top: 8, bottom: 8, left: 12, right: 12 },
+});
+```
+
+## Tips
+
+- Use orientation: "vertical" inside Row layouts and horizontal elsewhere.
+- margin accepts a number or an object with per-side values for fine spacing control.
+
+## Accessibility
+
+- Dividers are purely decorative and are hidden from assistive technology.
+
+## Behavior
+
+- Horizontal dividers stretch to the available width; vertical ones need a parent height.
+- thickness sets the line weight and defaults to a hairline.
+
+## Related widgets
+
+- [ListTile](ListTile.md)
+- [Card](Card.md)
+- [Container](Container.md)
+
+---
+
+## Continue reading
+
+- **Previous:** [Card](Card.md)
+- **Next:** [ListTile](ListTile.md)
+- **Index:** [Widget index](README.md) · [Start here](START_HERE.md)
+
+You are reading **Chapter 3 · Layout, cards and lists** (2 of 8).