eskiueskiu-lang/ui
Components and APIs
What an app is made of: the elements it draws, the hooks that hold its state, and the services of the phone and the browser. Each one works on iOS, Android and the web.
Layout
Containers take their content as a block, and every element takes a Style. The guide →
Column(Style, block)Children top to bottom.Row(Style, block)Children left to right.Scroll(Style, block)A column whose content scrolls when it is taller than the space it gets.Pressable(Style, on_press, block)A column that reacts to a press anywhere in it.Scope(name, Key, block)A component's own scope: its state, its identity and its name in diagnostics.StyleSize, flexbox, colors, linear gradients, borders, radius, shadow, a frosted-glass blur, a font file from the assets, transforms and transitions.Text, buttons and input
Text, buttons and controls are the platform's own, with its accessibility. The guide →
Text, TextWithText, copied when it is given.Button, ButtonWithA button with a title.TextInput(Input, on_change)A controlled text field, told about each edit and, if asked, about focus.Switch(Style, value, on_change)A controlled on/off switch.Slider(Style, value, min, max, on_change)A controlled slider in whole steps: UISlider, SeekBar or a range input.Media and lists
Lists mount only the rows near the viewport, so a million rows cost what a screenful does. The guide →
Image(Style, source)An image from a URL, the app's assets or a file; with pixelated it scales pixel art without smoothing.ActivityIndicator(Style, animating)The platform's busy indicator.FlatList(Style, count, height, render)A virtual list of rows of a fixed height.SectionList(Style, sizes, header, height, render)The same, in sections with headers.RefreshControl(refreshing, on_refresh)Pull to refresh for the scroll or list after it.Overlays
Layers over the screen. Back on Android, Escape on the web and a tap outside close them. The guide →
Modal(visible, on_request_close, block)Content over the whole screen, over a dim backdrop.Overlay(visible, on_dismiss, block)The same layer without the dim, for content placed next to something.Alert(title, message, buttons, on_choice)The platform's alert.Motion and gestures
Transforms are drawn, not laid out, and the platform animates them. The guide →
translate_x, translate_y, scale, rotateMove, scale and turn the drawn element.transition_ms, easingAnimate the changes of the opacity, the transforms and the colors; a spring is one of the curves.use_animated(target, ms, easing)A number on its way to a new value.use_animated_then, use_repeat, use_sequenceAn animation that says when it ends, one that repeats (also back and forth), and keyframes one after another.use_frame(running, fn(Tick))Code on each frame of the display, with the time since the last one, for games and drawing.ui_on_long_press(fn())A long press on the next element.ui_on_pan(fn(Pan))A drag on the next element, with its distance and speed.ui_on_hover(fn(bool))A pointer over the next element.ui_on_layout(fn(Frame))The next element's frame, in its parent and in the window.State
A block records the signals it reads and runs again when one changes. The guide →
use_signal<T>(initial)State kept by the scope while it is mounted.use_memo<T>(compute)A derived value, computed when read.use_effect(callback), on_cleanupWork after a commit, with its cleanup.use_string(initial)Text state, reference counted.signal_new<T>(initial)A model signal that no scope owns.use_interval, use_timeoutTimers kept by the platform's clock.ErrorBoundary(fallback, block)When a render inside it throws, shows the fallback instead, until ui_boundary_reset.ui_on_error(handler)Told every error the runtime catches: renders, handlers, effects.Navigation
A stack of routes: screens on the phone, URLs and history on the web. The guide →
router_new(root)A stack of routes, owned by the app's model.Navigator(router, screen)The stack as screens; the ones under the top stay mounted.push, back, replace, resetChange the stack.route_param(pattern, route, index)A route's parameter for its screen, kept while the route is on the stack.route_match(pattern, route, params)"/places/:id" against a route.use_back(handler)Take the back button or gesture while mounted.ui_link(), ui_open_url(url)The link the app was opened with, and opening one.The system
One name on every platform, answered by the platform's own service. The guide →
ui_platform()iOS, Android, the web or macOS.ui_color_scheme()Light or dark, as the system is.ui_screen_reader(), ui_reduce_motion(), ui_font_scale()The accessibility settings.ui_locale(), ui_is_rtl()The language and its direction.ui_insets(), ui_window(), ui_is_active()The safe area and the keyboard, the window, the foreground.StatusBar(style, hidden)The system status bar.ui_fetch(request, on_result)HTTP through the platform's networking.ui_storage_get, set, removeSmall values that outlive the app.ui_data_dir()The app's data directory, for files.ui_share(text, url)The system's share sheet.ui_clipboard_set, ui_clipboard_getCopy and paste.ui_haptic(kind)Selection, impact and notification feedback.ui_announce(text)Read text aloud with the screen reader.ui_keyboard_dismiss()Hide the software keyboard.use_app_state(fn(bool))Told when the app goes to the background and comes back.ui_app_version(), ui_config(key)The version and build, and values from ui.toml [env], with [env.release] for the stores.ui_splash_hold(), ui_splash_hide()Keep the launch screen up while fonts or saved state load.use_cached_file(url)A remote file downloaded once into the app's cache, as a path.ui_asset_path(name)A file of the app's assets as a path, for packages that read files.ui_open_settings()The app's page in the system settings, after a permission was denied.Native code
Code per platform in native/, called through extern functions. The guide →
NativeView(Style, type, on_event)A view the app registered with each host.ui_native_prop(name, value)A named prop for the NativeView after it.use_native_event(channel, handler)A native module's events while mounted.ui.tomlFrameworks, permissions, plist entries, Maven libraries and Swift packages.Packages
Packages for ui apps: platform services with their native code and permissions, and drawing. The guide →
location: use_location(precise)Where the device is, through CoreLocation, LocationManager and the browser's geolocation.location_distance(a, b)The distance between two positions over the Earth's surface.notifications: notification_schedule(id, title, body, seconds)A local notification, shown also with the app closed; use_notification_opened gets the one the user opens.camera: CameraView, camera_captureThe camera live, and what it shows as a photo.camera: camera_pick_photo, camera_take_photoThe system's photo library and camera.barcode: BarcodeScanner(Style, formats, scanning, on_code)QR codes and barcodes read live from the camera.pedometer: use_steps(), use_steps_between(from, to)Steps walked, live and between two times, also those walked with the app closed.securestore: secure_set, secure_get, secure_removeSmall secrets in the Keychain and the Android Keystore.svg: Svg(Style, svg)SVG drawings scaled to their box and tinted by the style's color.canvas: CanvasView(Style, running, draw)A 2D canvas drawn every frame: sprites, atlas cells and pixel art, on the GPU on phones.ui-package-templateA package to start from: native code on each platform, tests and an example.The kit
import <ui/kit>: themed components made from the elements above, light and dark. The guide →
Title, Heading, Body, Secondary, CaptionText in the theme's type scale.Card, Badge, Avatar, SeparatorSurfaces, labels and pictures.KitButton, TextField, CheckboxButtons in variants, fields and checkboxes.RadioGroup, SegmentedControl, TabBarOne choice among options.NavBar, Toolbar, ListItemBars and rows.Collapsible, AccordionSections that open and close.ProgressBarProgress that moves to its new value.Popover, DropdownMenu, Select, TooltipPanels and menus next to what opened them.Calendar, DatePicker, ColorPickerChoosing a day or a color.kit_toast, ToastHostA short message at the bottom.SwipeToDeleteA row the user drags away.kit_light, kit_dark, kit_follow_systemThe themes.