# Fliin > Copy-paste Flutter widgets, checked on 16 variants, kept up to date by a three-way merge, and wired to your agents through MCP. Each item below has a Markdown page for agents. In a Flutter app where `fliin init` has run, `fliin add ` copies an item and its dependencies into the app, and `fliin verify ` renders it on 16 variants (iOS and Android, light and dark, text at 1× and 2×, left to right and right to left). For coding agents: `fliin agents` in the app wires the local MCP server (search_items, get_item, request_selection) into Claude Code, Cursor, Gemini CLI, Codex and VS Code, and writes the workflow into AGENTS.md. ## Start here - [Getting started](https://fliin.dev/getting-started/index.md): Install the CLI, set up a Flutter app and add a first component. Then theme it, check it on 16 variants and keep it up to date. ## Foundation - [Core](https://fliin.dev/components/core/index.md): Gives every component its tokens, light and dark themes, density, platform typography, reduced motion and an accessible pressable surface. No Material, no Cupertino. ## Components - [Accordion](https://fliin.dev/components/accordion/index.md): Groups sections that open one at a time or together from their header, with a spring height, a content fade and a turning chevron. - [Inline alert](https://fliin.dev/components/alert/index.md): Reports information, success, a warning or an error in the page, with the status icon and color, a title, a description and an action. - [App bar](https://fliin.dev/components/app-bar/index.md): Shows where the user is and leads back: the screen title, a back chevron and up to three actions, with a large title that collapses into the bar on scroll. - [Avatar](https://fliin.dev/components/avatar/index.md): Shows a person by their round photo, which fades in once loaded, or else by their initials or a silhouette. - [Avatar group](https://fliin.dev/components/avatar-group/index.md): Groups the people of a conversation or a project into a row of overlapping avatars, with a +N counter past a maximum. - [Badge](https://fliin.dev/components/badge/index.md): Flags an unread count, a short word or a status dot on the corner of an icon, an avatar or a tab, capped at 99+ and read out with what it marks. - [Breadcrumbs](https://fliin.dev/components/breadcrumbs/index.md): Shows where the current page sits in a hierarchy and goes back up a level: pressable levels between chevrons, on one line that scrolls and cuts long names. - [Button](https://fliin.dev/components/button/index.md): Triggers the main action of a screen or form. Primary, secondary or ghost, with loading, leading icon, visible keyboard focus and the platform tap target. - [Button group](https://fliin.dev/components/button-group/index.md): Joins related actions into one bar of attached buttons, such as copy, paste and cut: rounded only at both ends, hairlines between the buttons. - [Calendar](https://fliin.dev/components/calendar/index.md): Picks one day from a month grid, for an appointment or a delivery: previous and next month, a quick year picker, unavailable and out-of-range days, each day read out in full. - [Card](https://fliin.dev/components/card/index.md): Groups a header, a title, a description and actions on a shadowed surface: a product, an offer, an account summary. - [Chart](https://fliin.dev/components/chart/index.md): Plots one or two series over time as bars or a line, shows the value of a point on touch, drag or arrow keys, reads a summary and every point to screen readers, and offers the same data as a table. - [Checkbox](https://fliin.dev/components/checkbox/index.md): Lets people check one option, or several in a list. A box with a check drawn stroke by stroke, mixed and invalid states, visible keyboard focus. - [Checkbox group](https://fliin.dev/components/checkbox-group/index.md): Ticks several options under one label, description and error, such as interests or alert channels, read by screen readers as one named group. - [Chip](https://fliin.dev/components/chip/index.md): Shows a status, a category or a filter as a short label in a colored capsule, pressable when needed. - [Close button](https://fliin.dev/components/close-button/index.md): Closes a dialog, a window, a popover or a menu: a round button with a cross, named for screen readers. - [Color area](https://fliin.dev/components/color-area/index.md): Sets two channels of a color at once on a gradient square, saturation and brightness under the chosen hue by default. - [Color field](https://fliin.dev/components/color-field/index.md): Types a color as a hex code, with its swatch at the start of the field; a code that is not a color gives the previous one back on leaving. - [Color picker](https://fliin.dev/components/color-picker/index.md): Opens, under a swatch and its label, the color area, the hue slider, opacity, the hex code and presets, all in sync. - [Color slider](https://fliin.dev/components/color-slider/index.md): Sets one channel of a color, hue, saturation, brightness, lightness or opacity, on a track painted with the colors it goes through. - [Color swatch](https://fliin.dev/components/color-swatch/index.md): Shows a color the app picked in a round or square swatch, over a checkerboard that shows through a translucent tint. Screen readers read its name. - [Color swatch picker](https://fliin.dev/components/color-swatch-picker/index.md): Picks a shade from a palette the app provides, such as a product or label color: the chosen dot shrinks inside a ring and gets a check mark, and each dot is read by its name. - [Combo box](https://fliin.dev/components/combo-box/index.md): Suggests matches under a text field as you type, from a local list or a remote lookup, with loading, no-result and error states; arrow keys pick a suggestion while focus stays in the field. - [Labeled control](https://fliin.dev/components/control-field/index.md): Lets people tap the whole label of a switch, checkbox or radio: label, helper text and error message around the control. - [Date field](https://fliin.dev/components/date-field/index.md): Types a known date on the keyboard, day, month and year in the order of the language, each segment read out by name and value and adjustable by swipe. - [Date picker](https://fliin.dev/components/date-picker/index.md): Picks a date from a form field that opens the calendar, as a bottom sheet on phones and a popover on tablets, with the chosen date written out in full and a button to clear it. - [Date range picker](https://fliin.dev/components/date-range-picker/index.md): Picks a period from a form field that opens the range calendar, as a bottom sheet on phones: the field shows the first and last day, and a start alone is never sent. - [Modal dialog](https://fliin.dev/components/dialog/index.md): Asks for a decision or a confirmation before going on, over a dimmed page. Title, scrolling text, actions, close button, swipe down to dismiss, trapped focus, Escape and focus returned on close. - [Drawer](https://fliin.dev/components/drawer/index.md): Opens a navigation panel from the side of the screen over a scrim, mirrored in right-to-left layouts, and closes by swipe, tap outside, Escape or back. - [Field label, description and error](https://fliin.dev/components/field/index.md): Says what a field asks for, explains it and reports its error: label with a required asterisk, description, announced error message. - [Fieldset](https://fliin.dev/components/fieldset/index.md): Gathers fields that belong together under a title, such as an address or a profile: legend, the group's description or error, spaced fields and action buttons. - [Icons](https://fliin.dev/components/icons/index.md): Gives 44 mobile icons as Flutter paths, from Gravity UI, Lucide, Tabler or Phosphor as the preset says: arrows, chevrons, search, cart, heart, play. Directional ones flip right to left. - [Input group](https://fliin.dev/components/input-group/index.md): Puts a prefix and a suffix around an input: an icon, a unit, a protocol or a button inside the field frame, the text between them. - [One-time code](https://fliin.dev/components/input-otp/index.md): Takes a code received by text message or email: one box per digit, in groups, a single field for screen readers, paste and the code the system suggests. - [Keyboard key](https://fliin.dev/components/kbd/index.md): Shows a key or a shortcut to type on a keyboard, such as ⌘ K: Apple symbols on iOS and macOS, Ctrl or Alt elsewhere, on a key cap or bare. - [Link](https://fliin.dev/components/link-button/index.md): Opens a related page from a sentence, such as terms or help: a pressable label with no background or padding, in three sizes. - [List row](https://fliin.dev/components/list-row/index.md): Shows list or settings entries grouped on a surface between dividers, pressable by touch or keyboard, with prefix, title, subtitle, value and chevron. - [Action menu](https://fliin.dev/components/menu/index.md): Lets people pick an action from a list opened by a control, by touch or keyboard. Checked options, a submenu that unfolds in place, or a bottom sheet. - [Meter](https://fliin.dev/components/meter/index.md): Shows a quantity within a known range, such as storage used or battery: label, value and a filled track, in three sizes and five colors. - [Number field](https://fliin.dev/components/number-field/index.md): Sets a quantity or a number of guests between two limits, typed or nudged with minus and plus buttons that repeat while held, read out as an adjustable value. - [Page](https://fliin.dev/components/page/index.md): Frames a whole mobile screen: safe areas, an app bar tied to scrolling, scrolling content, a tab bar, the keyboard and pull to refresh with each platform gesture. - [Page indicator](https://fliin.dev/components/page-indicator/index.md): Shows the current page of an onboarding or a carousel as dots whose active one stretches into a pill, bound to a page view, and lets people change page by touch. - [Pagination](https://fliin.dev/components/pagination/index.md): Moves from one page of results to another: previous, numbers with ellipses, next, and a summary; compact on a phone, it folds what does not fit. - [Anchored popover](https://fliin.dev/components/popover/index.md): Opens free content next to the control that opens it, closed by a tap outside or Escape. A panel with a title, text, a close button and an arrow, or a bottom sheet. - [Progress indicator](https://fliin.dev/components/progress/index.md): Shows how far a task has gone, or that it is running. A bar and a ring in three sizes and five colors, with label and percentage; the running bar stands still when motion is reduced. - [Radio button](https://fliin.dev/components/radio/index.md): Lets people choose exactly one option among several. A group and options, labels included, on the Flutter RadioGroup: one Tab stop, arrows change the option. - [Range calendar](https://fliin.dev/components/range-calendar/index.md): Picks a period from a month grid, a first then a last day, for a stay or a rental: the days between are highlighted, and the range never crosses an unavailable day. - [Scroll shadow](https://fliin.dev/components/scroll-shadow/index.md): Fades the edges of a scrolling list into the page to show there is more to scroll, vertically or horizontally. - [Search field](https://fliin.dev/components/search-field/index.md): Searches or filters a list: a field with a magnifier, the search key of the keyboard and a button that clears the query. - [Section header](https://fliin.dev/components/section-header/index.md): Names the group of rows or the grid below it: a muted title aligned with the group, and an optional see all link. - [Segmented control](https://fliin.dev/components/segmented/index.md): Picks one of two to five short options shown side by side, such as day, week or month, with a sliding selection and radio group semantics. - [Select](https://fliin.dev/components/select/index.md): Offers one or several choices from a closed list, from a trigger that shows the current choice. A list as wide as the trigger, or a bottom sheet or a dialog. - [Separator](https://fliin.dev/components/separator/index.md): Marks the limit between two rows, two blocks or two columns with a thin or thick line, sharp to the pixel. - [Bottom sheet](https://fliin.dev/components/sheet/index.md): Opens a panel from the bottom of the screen for a short task, dragged or closed. Spring snap points, icon, title, text, actions, close button, scrim, trapped focus and Escape. - [Skeleton](https://fliin.dev/components/skeleton/index.md): Holds the place of loading content with animated grey shapes, then fades the content in. Includes a single bone and a bone group. - [Slider](https://fliin.dev/components/slider/index.md): Lets people pick a value or a range by dragging, tapping the track or with the keyboard. One or two thumbs, divisions, label and value, horizontal or vertical. - [Spinner](https://fliin.dev/components/spinner/index.md): Shows that something is loading with a spinning arc, in three sizes and four colors, still when motion is reduced. - [Stepper](https://fliin.dev/components/stepper/index.md): Sets a small count one step at a time, with round minus and plus buttons around the number at the end of a row: guests, quantity, seats. Each button turns off at its limit. - [Surface](https://fliin.dev/components/surface/index.md): Groups content on a raised, shadowed background with continuous corners: the base of cards, row groups and alerts. - [Switch](https://fliin.dev/components/switch/index.md): Turns a setting on or off with a tap or a drag. The track turns to the accent, a spring thumb, still when motion is reduced. - [Switch group](https://fliin.dev/components/switch-group/index.md): Gathers independent on/off settings under one label, description and error, such as alerts or sync options, read as one named group. - [Tab bar](https://fliin.dev/components/tab-bar/index.md): Switches between the main sections of an app from the bottom of the screen: three to five tabs with icon, label and badge, and a selection that springs from tab to tab. - [Data table](https://fliin.dev/components/table/index.md): Presents rows of data in columns: sort by header, selection, empty and loading states. On a phone it scrolls sideways with the first column held, or stacks each row. - [Tabs](https://fliin.dev/components/tabs/index.md): Moves between views at the same level of a screen. Segmented or underlined tabs with a spring indicator, disabled tabs, separators and arrow key navigation. - [Tag group](https://fliin.dev/components/tag-group/index.md): Lets people pick tags among wrapping capsules, such as interests or filters, and remove them with their cross. Single or multiple selection, two backgrounds, three sizes. - [Text](https://fliin.dev/components/text/index.md): Gives the headings, paragraphs and inline code of the type scale, in the regular or muted color. - [Text field](https://fliin.dev/components/text-field/index.md): Takes a line or a paragraph of text: label, helper and announced error, required field, prefix, suffix, obscured input, text area and a cut, copy, paste toolbar. - [Time field](https://fliin.dev/components/time-field/index.md): Types a time on the keyboard, hours and minutes, with AM or PM when the language counts twelve hours; the value counts as soon as it is complete. - [Toast](https://fliin.dev/components/toast/index.md): Reports the result of an action with a short message at the top or bottom of the screen, stacked with the previous ones, closed by time, swipe or its button. - [Toggle button](https://fliin.dev/components/toggle-button/index.md): Turns an option on or off with one button that stays pressed, such as a favorite or an editor's bold: with text or an icon alone, filled or ghost. - [Toolbar](https://fliin.dev/components/toolbar/index.md): Gathers the commands that act on the same content in one bar, floating or not, such as text formatting: the arrow keys move from one button to the next. - [Tooltip](https://fliin.dev/components/tooltip/index.md): Explains an icon or a control on hover, long press or keyboard focus, and closes on Escape. An anchored bubble, read by screen readers. ## Blocks - [Access form](https://fliin.dev/blocks/auth-form/index.md): Groups the fields of an access screen and its main button: autofill, a form frozen while sending, an alert on top, and the field and button kept above the keyboard. - [Access header](https://fliin.dev/blocks/auth-header/index.md): Tells people which access screen they are on: the app mark or an icon, the title, the only announced heading, and a sentence on what to do, centered. - [Cart line](https://fliin.dev/blocks/cart-line/index.md): Shows an item in a cart with its thumbnail, name, variant and price, a quantity stepper and remove, or a read-only summary on a past order. - [Comment row](https://fliin.dev/blocks/comment-row/index.md): Shows one comment under a post: avatar, name, age and text, replies indented on a single level, posting or failed with retry, and its actions as links. - [Message composer](https://fliin.dev/blocks/composer/index.md): Lets people write a chat message: an input that grows up to a few lines, a send button enabled only with text, and the reply being written above it. - [Delete confirmation](https://fliin.dev/blocks/confirm-delete/index.md): Asks to confirm a destructive action: an alert that says what will be erased, a red delete button and a button to back out. - [Conversation row](https://fliin.dev/blocks/conversation-row/index.md): Shows one conversation in a list: avatar or group of avatars, name, last message on two lines at most, its age, an unread count, muted and pinned marks, and its actions on long press. - [Empty state](https://fliin.dev/blocks/empty-state/index.md): Explains why a list or a search has nothing to show, after an error or without a network, with an icon, a title, a text and up to two actions. - [Event card](https://fliin.dev/blocks/event-card/index.md): Shows an agenda event in its own card: the times it starts and ends in a column, its title, the word now while it is happening, and its place, description and attendees, read as one node. - [Event row](https://fliin.dev/blocks/event-row/index.md): Shows an agenda event with the time it starts and the time it stops, its place, and the word now while it is happening, read as one node. - [Message bubble](https://fliin.dev/blocks/message-bubble/index.md): Shows one message of a chat thread: sent at the end, received at the start, grouped by author, with the quoted reply, the time, and sending, sent, read or failed with retry. - [Mini player](https://fliin.dev/blocks/mini-player/index.md): Keeps the song now playing at the bottom of a screen with its artwork, title and artist, a play or pause button that acts in place, and opens the player when tapped. - [Order row](https://fliin.dev/blocks/order-row/index.md): Shows an order in a list with the photo of its first item, its number, date, item count and total, and its status written in words, read as one node. - [Order summary](https://fliin.dev/blocks/order-summary/index.md): Lists the amounts of an order, subtotal, shipping, discount and taxes, above the total, as given by the service, and hides them while they are recalculated. - [Plan card](https://fliin.dev/blocks/plan-card/index.md): Presents a subscription plan to pick among others, as a radio button: name, billed price and period, trial, perks, and the recommended and current plan marks. - [Post card](https://fliin.dev/blocks/post-card/index.md): Shows one post of a social feed: author, age, text, a gallery of one to four photos, a like toggle, comments and share with short counts, and the post menu. It reads as a single node. - [Account card](https://fliin.dev/blocks/profile-card/index.md): Introduces the signed-in person above the topics of their account: avatar, name and address, and opens the account on tap. - [Result card](https://fliin.dev/blocks/result-card/index.md): Presents a search result or a product with its thumbnail, name, price and a rating or delivery line, as a list row or a grid tile, and opens it on tap. - [List section](https://fliin.dev/blocks/settings-section/index.md): Groups rows under a heading, with an optional link at the end of the heading: a topic of an account screen or a day of notifications. - [Provider sign-in](https://fliin.dev/blocks/social-sign-in/index.md): Lets people sign in with Apple, Google or another identity provider: one outlined button per provider, in a column or a row of logos, under an "or" divider. - [Stat card](https://fliin.dev/blocks/stat-card/index.md): Shows a key figure such as a balance in large type, with its change in a signed pill, a short note and an optional action to hide it. - [Task row](https://fliin.dev/blocks/task-row/index.md): Shows a to-do with its checkbox, due day, priority and lateness written in words, read by screen readers as one checkbox node. - [Track row](https://fliin.dev/blocks/track-row/index.md): Shows a song in a list with its artwork, title, artist and length spoken in words, the song now playing marked by bars that move, read as one node. - [Tracking steps](https://fliin.dev/blocks/tracking-steps/index.md): Shows where a delivery or a request stands as dated vertical steps, the current step written out in words and read with its rank by screen readers. - [Transaction row](https://fliin.dev/blocks/transaction-row/index.md): Shows one transaction in a list: avatar, merchant, category and time, and the signed amount, readable without color, with its direction spoken to screen readers. ## Screens - [Account settings](https://fliin.dev/screens/account-settings/index.md): Groups the profile, security and notifications of an account, and lets the user delete it after a confirmation, with its loading, error and offline states. - [Agenda](https://fliin.dev/screens/agenda/index.md): Shows a week one day at a time: seven days with the busy ones marked, then the chosen day’s events in cards, all-day ones first and the current one marked. - [App settings](https://fliin.dev/screens/app-settings/index.md): Groups the settings of the app: appearance, text size, language, haptics, a cache to clear after a confirmation, version, licenses and legal notices, with a link to the account. - [Stay booking](https://fliin.dev/screens/booking/index.md): Books a stay in a holiday rental: check-in and check-out around nights already taken, adults and children, an optional arrival time, and the price details that follow the choice. - [Chat thread](https://fliin.dev/screens/chat/index.md): Shows a conversation anchored at the bottom, grouped by author and day, with older messages loaded while scrolling up, optimistic sending with retry, typing, and copy, reply or delete. - [Cart and checkout](https://fliin.dev/screens/checkout/index.md): Shows the cart and pays for it: quantities, undoable removal, promo code, saved address and payment method in a sheet, the totals from the service and a single payment at a time. - [Contact support](https://fliin.dev/screens/contact-support/index.md): Lets people write to support with a subject, a reference, a bounded message and attachments, sent only once even without an answer, then follow the request and read the latest reply. - [Conversations](https://fliin.dev/screens/conversations/index.md): Lists the conversations of a messaging app, pinned first, with search, pull to refresh, a new conversation, archive, mute and delete, and its empty, loading, error and offline states. - [Edit profile](https://fliin.dev/screens/edit-profile/index.md): Lets people change the photo, name, username checked while typing and bio of their profile, and asks before discarding unsaved changes. - [Social feed](https://fliin.dev/screens/feed/index.md): Shows the posts of followed people with their photos, optimistic likes, comments and share, hide or report with undo, older posts on scroll and new posts on demand without moving the reading. - [Finance dashboard](https://fliin.dev/screens/finance-dashboard/index.md): Shows the balance that can be hidden, spending for the week, month or year as a chart or a table, savings goals and the latest transactions by day, with loading, empty, error and offline states. - [Forgot password](https://fliin.dev/screens/forgot-password/index.md): Lets people get an email link to choose a new password, then check their inbox, resend the link or go back to sign in, offline included. - [Help center](https://fliin.dev/screens/help-center/index.md): Shows frequently asked questions by topic in accordions, searchable without accents with the matching words in bold, a helpful or not vote on each answer, and readable offline. - [Music library](https://fliin.dev/screens/library/index.md): Lists a listener's songs, albums as a grid of artwork and playlists in tabs, searchable by title or artist, loaded page by page, with a mini player for the song now playing. - [Notification center](https://fliin.dev/screens/notifications/index.md): Groups received notifications by day, marks the unread ones and lets people mark all as read or refresh, with its empty, loading, error and offline states. - [Onboarding](https://fliin.dev/screens/onboarding/index.md): Introduces the service on first launch in two to five illustrated pages that people swipe or skip, ending on a call to action and a link for people who already have an account. - [Order tracking](https://fliin.dev/screens/order/index.md): Shows an order with its dated delivery steps, items, amounts paid and address, with a confirmed cancellation sent only once, returns and support. - [Order confirmation](https://fliin.dev/screens/order-confirmation/index.md): Confirms a paid order with its number, estimated delivery, address, items and amounts paid, then tracking or home, with no way back to the payment. - [Order history](https://fliin.dev/screens/orders/index.md): Lists a customer's orders in two tabs, current and past, searchable by number or item, loaded page by page and refreshed by pulling. - [Plans and subscription](https://fliin.dev/screens/plans/index.md): Offers subscription plans with a monthly or yearly switch, plan cards, the current plan, a free trial, in-app purchase through the store, restore purchases and the terms. - [Music player](https://fliin.dev/screens/player/index.md): Plays a song from the app's audio player: artwork, title and artist, a position slider read in minutes and seconds, play and pause, next and previous, shuffle, repeat and favorite. - [Post and comments](https://fliin.dev/screens/post/index.md): Shows one post with its paged comments and one level of replies, a composer that posts in order without waiting, retry, and deleting your own comments after confirmation. - [Product page](https://fliin.dev/screens/product/index.md): Presents a product with its photo gallery, price, rating, color, size and quantity, a collapsible description and add to cart always in reach, with loading, sold out, error and offline states. - [Public profile](https://fliin.dev/screens/profile/index.md): Shows someone’s public page: avatar, bio and short counters, an optimistic Follow toggle or Edit profile for yourself, then posts as a list and media as a grid. - [Filtered search](https://fliin.dev/screens/search/index.md): Searches products while people type, with a row of categories, advanced filters in a sheet, recent searches, results that load more as you scroll, and its empty, no results, error and offline states. - [Sign in](https://fliin.dev/screens/sign-in/index.md): Lets people sign in with email and password or an identity provider, with forgotten password, rejected credentials, offline and the wait after too many attempts. - [Sign up](https://fliin.dev/screens/sign-up/index.md): Lets people create an account with name, email and a password whose rules are checked while typing, accept the terms, or use a provider; email taken and offline included. - [Tasks](https://fliin.dev/screens/tasks/index.md): Groups tasks into overdue, today, upcoming, undated and done, each with its checkbox, with a quick add line and a sheet to edit the due day and priority. - [Verification code](https://fliin.dev/screens/verify-code/index.md): Lets people enter the six-digit code received by email or text message, with the masked destination, a resend countdown, a wrong or expired code and offline. ## Every page in one file - [llms-full.txt](https://fliin.dev/llms-full.txt)