{"id":28389321,"url":"https://github.com/jozzdart/exui","last_synced_at":"2025-09-25T09:31:20.936Z","repository":{"id":296078634,"uuid":"991768266","full_name":"jozzdart/exui","owner":"jozzdart","description":"Build your UI faster. No boilerplate, no dependencies, just powerful widget extensions.","archived":false,"fork":false,"pushed_at":"2025-06-15T01:23:37.000Z","size":394,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-15T02:21:50.212Z","etag":null,"topics":["dart","flutter","flutterui","ui","ui-design","user-interface"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/exui","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jozzdart.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-28T06:00:04.000Z","updated_at":"2025-06-13T21:58:34.000Z","dependencies_parsed_at":"2025-05-28T22:07:09.505Z","dependency_job_id":"21046fac-fb19-4135-9b63-47671c856d64","html_url":"https://github.com/jozzdart/exui","commit_stats":null,"previous_names":["jozzdart/exui"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/jozzdart/exui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jozzdart%2Fexui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jozzdart%2Fexui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jozzdart%2Fexui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jozzdart%2Fexui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jozzdart","download_url":"https://codeload.github.com/jozzdart/exui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jozzdart%2Fexui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259911735,"owners_count":22930917,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dart","flutter","flutterui","ui","ui-design","user-interface"],"created_at":"2025-05-31T00:38:27.062Z","updated_at":"2025-09-25T09:31:20.839Z","avatar_url":"https://github.com/jozzdart.png","language":"Dart","funding_links":["https://buymeacoffee.com/yosefd99v"],"categories":[],"sub_categories":[],"readme":"![exui logo](https://i.imgur.com/aNY62o9.png)\n\n\u003ch3 align=\"center\"\u003e\u003ci\u003eEverything your widgets wish they had.\u003c/i\u003e\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/codefactor/grade/github/jozzdart/exui/main?style=flat-square\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/license/jozzdart/exui?style=flat-square\"\u003e\n  \u003cimg src=\"https://img.shields.io/pub/points/exui?style=flat-square\"\u003e\n  \u003cimg src=\"https://img.shields.io/pub/v/exui?style=flat-square\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://buymeacoffee.com/yosefd99v\" target=\"https://buymeacoffee.com/yosefd99v\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Buy%20me%20a%20coffee-Support (:-blue?logo=buymeacoffee\u0026style=flat-square\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003e **Accelerate your Flutter UI development, without compromising clarity.**  \n\u003e `exui` helps you build clean, maintainable UIs faster, with no wrappers and zero boilerplate.\n\n**`exui`** is a lightweight, zero-dependency extension library for Flutter that enhances your UI code with expressive, chainable utilities. It streamlines common layout and styling patterns using pure Dart and Flutter, no reliance on Material, Cupertino, or third-party frameworks.\n\nDesigned to work seamlessly in any project, `exui` makes your widget code more concise, readable, and efficient, all while keeping full control over your widget tree.\n\n### ✅ Features\n\n- **Extensions - for most used Flutter widgets. Same names, same behavior.**\n- **Lightweight and efficient** - wraps existing widgets without creating new classes.\n- **Actively maintained** - Production-ready and continuously evolving.\n- **Zero dependencies** - Pure Dart. No bloat. Add it to any project safely.\n- **Battle-tested** - backed by **hundreds of unit tests** to ensure safety and reliability.\n- **Exceptional documentation** - every extension is well documented with clear examples and fast navigation.\n\n---\n\n### ✨ All `exui` Extensions:\n\nEach section below links to detailed documentation for a specific extension group. (Emojis only added to distinguish easily between extensions)\n\n#### Layout Manipulation\n\n[📏 `padding` - Quickly Add Padding](#-padding--add-padding-to-any-widget)  \n[🎯 `center` - Center Widgets](#-center--center-your-widget-with-optional-factors)  \n[↔️ `expanded` - Fill Available Space](#️-expanded---make-widgets-fill-available-space)  \n[🧬 `flex` - fast Flexibles](#-flex--flexible-layouts-with-fine-tuned-control)  \n[📐 `align` - Position Widgets](#-align--position-a-widget-precisely)  \n[📍 `positioned` - Position Inside a Stack](#-positioned--position-widgets-inside-a-stack)  \n[🔳 `intrinsic` - Size Widgets](#-intrinsic--size-widgets-to-their-natural-dimensions)  \n[➖ `margin` - Add Outer Spacing](#-margin--add-outer-spacing-around-widgets)\n\n#### Layout Creation\n\n[↕️ `gap` - Performant gaps](#️-gap---add-spacing-using-number-extensions)  \n[🧱 `row` / `column` - Rapid Layouts](#-row--column--instantly-wrap-widgets-in-flex-layouts)  \n[🧭 `row*` / `column*` - Rapid Aligned Layouts](#-row--column--rapid-alignment-extensions-for-flex-layouts)  \n[🧊 `stack` - Overlay Widgets](#-stack--overlay-widgets-with-full-stack-control)\n\n#### Visibility, Transitions \u0026 Interactions\n\n[👁️ `visible` - Conditional Visibility](#️-visible---conditional-visibility-for-widgets)  \n[🌫️ `opacity` - Widget Transparency](#️-opacity---control-widget-transparency)  \n[📱 `safeArea` - SafeArea Padding](#-safearea--add-safearea-padding-declaratively)  \n[👆 `gesture` - Detect Gestures](#-gesture--add-tap-drag--press-events-easily)  \n[🦸 `hero` - Shared Element Transitions](#-hero--add-seamless-shared-element-transitions)\n\n#### Containers \u0026 Effects\n\n[📦 `sizedBox` - Put in a SizedBox](#-sizedbox--wrap-widgets-in-fixed-size-boxes)  \n[🚧 `constrained` - Limit Widget Sizes](#-constrained--add-size-limits-to-widgets)  \n[🟥 `coloredBox` - Wrap in a Colored Box](#-coloredbox--add-background-color-to-any-widget)  \n[🎨 `decoratedBox` - Borders, Gradients \u0026 Effects](#-decoratedbox--add-backgrounds-borders-gradients--effects)  \n[✂️ `clip` - Clip Widgets into Shapes](#️-clip---clip-widgets-into-shapes)  \n[🪞 `fittedBox` - Fit Widgets](#-fit--control-how-widgets-scale-to-fit)\n\n#### Widget Creation\n\n[📝 `text` - String to Widget](#-text--turn-any-string-into-a-text-widget)  \n[🎛️ `styled text` - Style Text](#️-styled-text---modify-and-style-text-widgets-easily)  \n[🔣 `icon` - Create and Style Icons](#-icon--quickly-create-and-style-icons)\n\n\u003e `exui` is built on **pure Flutter** (`flutter/widgets.dart`) and avoids bundling unnecessary Material or Cupertino designs by default. For convenience, optional libraries are provided for those who want seamless integration with Flutter’s built-in design systems.\n\n#### `exui` Libraries\n\n| Library                                     | Description                                                     |\n| ------------------------------------------- | --------------------------------------------------------------- |\n| [`exui/exui.dart`](lib/exui.dart)           | Core extensions for pure Flutter. Lightweight and universal.    |\n| [`exui/material.dart`](lib/material.dart)   | Adds extensions tailored to Material widgets and components.    |\n| [`exui/cupertino.dart`](lib/cupertino.dart) | Adds extensions for Cupertino widgets and iOS-style components. |\n\n#### Cupertino Extensions (Apple)\n\n- 🍎 [`cupertinoButton` - buttons](#-cupertinobutton--turn-any-widget-into-an-ios-button)\n- 🎨 [`coloredBox` - background color](#-cupertino-coloredbox--apply-ios-themed-background-colors)\n\n#### Material Extensions (Google)\n\n- 🖲️ [`button` - buttons](#️-button---instantly-turn-any-widget-into-a-button)\n- 🎨 [`coloredBox` - background color](#-material-coloredbox--background-color-with-one-line)\n\n---\n\n### `exui` Vision\n\n**`exui`** is a practical toolkit for Flutter UI development — focused on saving time, reducing boilerplate, and writing layout code that’s readable, consistent, and fun.\n\nThis isn’t about replacing widgets — it’s about using **concise, chainable extensions** to help you build better UIs faster. You stay in full control of your widget tree and design system.\n\nWhether you're working on layout, spacing, visibility, or sizing, `exui` gives you expressive helpers for the most common tasks — with zero dependencies and seamless integration into any codebase.\n\n### Here are just a few examples:\n\n---\n\n#### 📏 Padding\n\n**With `exui`:**\n\n```dart\nText(\"Hello\").paddingAll(16)\n```\n\n**Without:**\n\n```dart\nPadding(\n  padding: EdgeInsets.all(16),\n  child: Text(\"Hello\"),\n)\n```\n\nWith additional extensions for quickly adding specific padding: `paddingHorizontal`, `paddingVertical`, `paddingOnly`, `paddingSymmetric`, `paddingLeft`, `paddingRight`, `paddingTop`, `paddingBottom`\n\n---\n\n#### ↔️ Expanded\n\n**With `exui`:**\n\n```dart\nText(\"Stretch me\").expanded3\n```\n\n**Without:**\n\n```dart\nExpanded(\n  flex: 3,\n  child: Text(\"Stretch me\"),\n)\n```\n\nWith additional extensions for quickly adding specific flex values: `expanded2`, `expanded3`, `expanded4`, `expanded5`, `expanded6`, `expanded7`, `expanded8` or `expandedFlex(int)`\n\n---\n\n#### 🎯 Center\n\n**With `exui`:**\n\n```dart\nIcon(Icons.star).center()\n```\n\n**Without:**\n\n```dart\nCenter(\n  child: Icon(Icons.star),\n)\n```\n\nWith additional extensions for quickly adding specific center factors: `centerWidth(double)`, `centerHeight(double)` or with parameters `center({widthFactor, heightFactor})`\n\n---\n\n#### ↕️ Gaps\n\n**With `exui`:**\n\n```dart\nColumn(\n  children: [\n    Text(\"A\"),\n    16.gapColumn,\n    Text(\"B\"),\n  ],\n)\n```\n\n**Without:**\n\n```dart\nColumn(\n  children: [\n    Text(\"A\"),\n    SizedBox(height: 16),\n    Text(\"B\"),\n  ],\n)\n```\n\nWith additional extensions for quickly adding specific gap values: `gapRow`, `gapColumn`, `gapVertical`, `gapHorizontal` etc.\n\n---\n\n#### 👁️ Visibility\n\n**With `exui`:**\n\n```dart\nText(\"Visible?\").visibleIf(showText)\n```\n\n**Without:**\n\n```dart\nshowText ? Text(\"Visible?\") : const SizedBox.shrink()\n```\n\nWith additional extensions for quickly adding specific visibility conditions: `hide()` `visibleIfNot(bool)` or `visibleIfNull(bool)` and more.\n\n---\n\n#### 🚧 Constraints\n\n**With `exui`:**\n\n```dart\nImage.asset(\"logo.png\").maxWidth(200)\n```\n\n**Without:**\n\n```dart\nConstrainedBox(\n  constraints: BoxConstraints(maxWidth: 200),\n  child: Image.asset(\"logo.png\"),\n)\n```\n\nWith additional extensions for quickly adding specific constraints: `constrainedWidth`, `constrainedHeight`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight` or with parameters `constrained({minWidth, maxWidth, minHeight, maxHeight})` or `constrainedBox(BoxConstraints)`\n\n---\n\nThese are just a few of the 200+ utilities in `exui`. Every method is chainable, production-safe, and built with clarity in mind.\n\n\u003e **From layout to constraints, visibility to spacing — `exui` keeps your UI code clean, fast, and Flutter-native.**\n\nWelcome to **`exui`**, I hope it'll save you time like it did for me (:\n\n---\n\n### 📏 `padding` — Add Padding to Any Widget\n\nApply padding effortlessly with readable, chainable methods. These extensions wrap your widget in a `Padding` widget using concise, expressive syntax.\n\n- `padding(EdgeInsets)` — Use any `EdgeInsets` object directly.\n- `paddingAll(double)` — Uniform padding on all sides.\n- `paddingOnly({left, top, right, bottom})` — Custom padding per side.\n- `paddingSymmetric({horizontal, vertical})` — Padding for x/y axes.\n- `paddingHorizontal(double)` — Shorthand for horizontal-only padding.\n- `paddingVertical(double)` — Shorthand for vertical-only padding.\n- Per-side utilities:\n  - `paddingLeft(double)`\n  - `paddingRight(double)`\n  - `paddingTop(double)`\n  - `paddingBottom(double)`\n\nAll methods return a wrapped `Padding` widget and can be freely chained with other extensions.\n\n#### 🧪 Examples\n\n```dart\n// 12px padding on all sides\nMyWidget().paddingAll(12);\n```\n\n```dart\n// 16px left and right, 8px top and bottom\nMyWidget().paddingSymmetric(horizontal: 16, vertical: 8);\n```\n\n```dart\n// 10px padding only on the left\nMyWidget().paddingLeft(10);\n```\n\n```dart\n// Custom per-side padding\nMyWidget().paddingOnly(left: 8, top: 4, bottom: 12);\n```\n\n\u003e 💡 **Why use this?**\n\u003e Instead of writing:\n\u003e\n\u003e ```dart\n\u003e Padding(\n\u003e   padding: EdgeInsets.symmetric(horizontal: 16),\n\u003e   child: MyWidget(),\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e MyWidget().paddingHorizontal(16)\n\u003e ```\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 🎯 `center` — Center Your Widget with Optional Factors\n\nEffortlessly center any widget with precise control over layout behavior. These extensions wrap your widget in a `Center` and offer intuitive access to `widthFactor` and `heightFactor` when needed.\n\n- `center({widthFactor, heightFactor})` — Fully customizable centering.\n- `centerWidth(double?)` — Center with horizontal shrink-wrapping only.\n- `centerHeight(double?)` — Center with vertical shrink-wrapping only.\n\nAll methods return a `Center` widget and can be seamlessly chained with other extensions.\n\n#### 🧪 Examples\n\n```dart\n// Center without size constraints\nMyWidget().center();\n```\n\n```dart\n// Center and shrink-wrap width only\nMyWidget().centerWidth(1);\n```\n\n```dart\n// Center and shrink-wrap height only\nMyWidget().centerHeight(1);\n```\n\n```dart\n// Fully customized centering\nMyWidget().center(widthFactor: 0.8, heightFactor: 0.5);\n```\n\n\u003e 💡 Instead of writing:\n\u003e\n\u003e ```dart\n\u003e Center(\n\u003e   widthFactor: 1,\n\u003e   child: MyWidget(),\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e MyWidget().centerWidth(1)\n\u003e ```\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### ↔️ `expanded` - Make Widgets Fill Available Space\n\nAdd layout flexibility with zero boilerplate. These extensions wrap your widget in an `Expanded`, allowing you to quickly define how much space it should take relative to its siblings.\n\n- `expandedFlex([int flex = 1])` — Wraps the widget in `Expanded` with an optional `flex`.\n- `expanded1` — Shorthand for `Expanded(flex: 1)`.\n\n* Predefined shorthand getters for fixed flex values:  \n  `expanded2`, `expanded3`, `expanded4`, `expanded5`, `expanded6`, `expanded7`, `expanded8`\n\nUse them in `Row`, `Column`, or `Flex` to control space distribution without nesting or repetition.\n\n#### 🧪 Examples\n\n```dart\n// Flex: 1 (default)\nMyWidget().expanded1;\n```\n\n```dart\n// Flex: 2\nMyWidget().expanded2;\n```\n\n```dart\n// Flex: 5\nMyWidget().expandedFlex(5);\n```\n\n\u003e 💡 Instead of writing:\n\u003e\n\u003e ```dart\n\u003e Expanded(\n\u003e   flex: 3,\n\u003e   child: MyWidget(),\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e MyWidget().expanded3\n\u003e ```\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 🧬 `flex` — Flexible Layouts with Fine-Tuned Control\n\nWrap any widget in a `Flexible` with full control over `flex` and `fit`. These extensions reduce verbosity while giving you precise layout behavior in `Row`, `Column`, or `Flex` widgets.\n\n- `flex({int flex, FlexFit fit})` — Custom flex and fit values (default: `flex: 1`, `fit: FlexFit.loose`)\n- `flexLoose(int)` — Loose-fit shortcut\n- `flexTight(int)` — Tight-fit shortcut\n\n* Predefined `flex` shortcuts (default fit: `loose`):  \n  `flex2()`, `flex3()`, `flex4()`, `flex5()`, `flex6()`, `flex7()`, `flex8()`\n\nAll methods return a `Flexible` widget and are safe to chain with other layout or styling extensions.\n\n#### 🧪 Examples\n\n```dart\n// Default: flex 1, loose fit\nMyWidget().flex();\n```\n\n```dart\n// Predefined: flex 3, loose fit\nMyWidget().flex3();\n```\n\n```dart\n// Custom: flex 4, tight fit\nMyWidget().flex(flex: 4, fit: FlexFit.tight);\n```\n\n```dart\n// Loose-fit with custom flex\nMyWidget().flexLoose(2);\n```\n\n```dart\n// Tight-fit with custom flex\nMyWidget().flexTight(6);\n```\n\n\u003e 💡 Instead of writing:\n\u003e\n\u003e ```dart\n\u003e Flexible(\n\u003e   flex: 3,\n\u003e   fit: FlexFit.tight,\n\u003e   child: MyWidget(),\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e MyWidget().flexTight(3)\n\u003e ```\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 📐 `align` — Position a Widget Precisely\n\nAlign your widget anywhere inside its parent with expressive, chainable methods. These extensions wrap your widget in an `Align` widget, giving you fine-grained control over its position.\n\n- `align({ alignment, widthFactor, heightFactor })` — Custom alignment with optional size factors.\n- `alignCenter()` — Center of parent (default).\n- Top alignment:\n  - `alignTopLeft()`\n  - `alignTopCenter()`\n  - `alignTopRight()`\n- Center alignment:\n  - `alignCenterLeft()`\n  - `alignCenterRight()`\n- Bottom alignment:\n  - `alignBottomLeft()`\n  - `alignBottomCenter()`\n  - `alignBottomRight()`\n\nAll methods return an `Align` widget and are safe to use inside any layout context.\n\n#### 🧪 Examples\n\n```dart\n// Center the widget (default)\nMyWidget().alignCenter();\n```\n\n```dart\n// Align to bottom-right\nMyWidget().alignBottomRight();\n```\n\n```dart\n// Top-left aligned with width factor\nMyWidget().alignTopLeft(widthFactor: 2);\n```\n\n\u003e 💡 Instead of writing:\n\u003e\n\u003e ```dart\n\u003e Align(\n\u003e   alignment: Alignment.bottomRight,\n\u003e   child: MyWidget(),\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e MyWidget().alignBottomRight()\n\u003e ```\n\n\u003e 🧭 **When to use `positioned` vs `aligned`**  \n\u003e Use `.positioned()` inside a `Stack` when you need **precise pixel placement** (`top`, `left`, etc.).  \n\u003e Use `.aligned()` when you want **relative alignment** (like centering) within any parent.\n\u003e\n\u003e ⚠️ `.positioned()` only works inside a `Stack`. `.aligned()` works almost anywhere.\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 📍 `positioned` — Position Widgets Inside a Stack\n\nEasily wrap widgets with `Positioned` using expressive, side-specific methods. These extensions let you declare layout constraints cleanly inside a `Stack` without cluttering your build logic.\n\n- `positioned({left, top, right, bottom, width, height})` — Full `Positioned` wrapper with optional constraints.\n- `positionedTop(double)` — Position from top.\n- `positionedBottom(double)` — Position from bottom.\n- `positionedLeft(double)` — Position from left.\n- `positionedRight(double)` — Position from right.\n- `positionedWidth(double)` — Set width directly.\n- `positionedHeight(double)` — Set height directly.\n\nAll methods return a `Positioned` widget and are designed to be composed fluently.\n\n#### 🧪 Examples\n\n```dart\n// Position 10px from top and left\nMyWidget().positioned(top: 10, left: 10);\n```\n\n```dart\n// Set only the width, auto-positioned\nMyWidget().positionedWidth(200);\n```\n\n```dart\n// Position from bottom with fixed height\nMyWidget().positionedBottom(0).positionedHeight(60);\n```\n\n```dart\n// Custom full placement\nMyWidget().positioned(top: 12, right: 16, width: 150);\n```\n\n\u003e 💡 Instead of writing:\n\u003e\n\u003e ```dart\n\u003e Positioned(\n\u003e   top: 12,\n\u003e   right: 16,\n\u003e   width: 150,\n\u003e   child: MyWidget(),\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e MyWidget().positioned(top: 12, right: 16, width: 150)\n\u003e ```\n\n\u003e 🧭 **When to use `positioned` vs `aligned`**  \n\u003e Use `.positioned()` inside a `Stack` when you need **precise pixel placement** (`top`, `left`, etc.).  \n\u003e Use `.aligned()` when you want **relative alignment** (like centering) within any parent.\n\u003e\n\u003e ⚠️ `.positioned()` only works inside a `Stack`. `.aligned()` works almost anywhere.\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 🔳 `intrinsic` — Size Widgets to Their Natural Dimensions\n\nWrap widgets with `IntrinsicWidth` or `IntrinsicHeight` to size them based on their intrinsic (natural) dimensions. These extensions make it easy to apply intrinsic sizing with expressive, chainable syntax.\n\n- `intrinsicHeight()` — Wraps in `IntrinsicHeight`.\n- `intrinsicWidth()` — Wraps in `IntrinsicWidth` with default options.\n- `intrinsicWidthWith({stepWidth, stepHeight})` — Custom step values.\n- `intrinsicWidthStepWidth(double)` — Set `stepWidth` only.\n- `intrinsicWidthStepHeight(double)` — Set `stepHeight` only.\n\nAll methods return intrinsic wrappers that measure content and size accordingly—ideal for fine-tuned layout control.\n\n#### 🧪 Examples\n\n```dart\n// Wrap with IntrinsicHeight\nMyWidget().intrinsicHeight();\n```\n\n```dart\n// Wrap with IntrinsicWidth (default)\nMyWidget().intrinsicWidth();\n```\n\n```dart\n// Set stepWidth to 100\nMyWidget().intrinsicWidthStepWidth(100);\n```\n\n```dart\n// Set both stepWidth and stepHeight\nMyWidget().intrinsicWidthWith(\n  stepWidth: 80,\n  stepHeight: 40,\n);\n```\n\n\u003e 💡 Instead of writing:\n\u003e\n\u003e ```dart\n\u003e IntrinsicWidth(\n\u003e   stepHeight: 40,\n\u003e   child: MyWidget(),\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e MyWidget().intrinsicWidthStepHeight(40)\n\u003e ```\n\n\u003e ⚠️ Use intrinsic widgets with care — they can be expensive to layout and should only be used when needed for dynamic content sizing.\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### ➖ `margin` — Add Outer Spacing Around Widgets\n\nAdd clean, configurable margins around any widget with chainable extensions. These methods wrap the widget in a `Container` with `margin`, avoiding cluttered layout nesting and improving code clarity.\n\n- `margin(EdgeInsets)` — Use any `EdgeInsets` object directly.\n- `marginAll(double)` — Equal margin on all sides.\n- `marginOnly({left, top, right, bottom})` — Custom margin per side.\n- `marginSymmetric({horizontal, vertical})` — Horizontal \u0026 vertical margin.\n- `marginHorizontal(double)` — Shorthand for horizontal-only margin.\n- `marginVertical(double)` — Shorthand for vertical-only margin.\n- One-sided margin helpers:\n  - `marginLeft(double)`\n  - `marginRight(double)`\n  - `marginTop(double)`\n  - `marginBottom(double)`\n\nAll methods return a wrapped `Container` and can be freely chained with other extensions.\n\n#### 🧪 Examples\n\n```dart\n// 16px margin on all sides\n\"Card\".text().marginAll(16);\n```\n\n```dart\n// 24px horizontal, 12px vertical\n\"Tile\".text().marginSymmetric(horizontal: 24, vertical: 12);\n```\n\n```dart\n// 8px margin only on top\n\"Header\".text().marginTop(8);\n```\n\n```dart\n// Custom side-by-side margin\n\"Box\".text().marginOnly(left: 6, bottom: 10);\n```\n\n\u003e 💡 **Why use this?**\n\u003e Instead of writing:\n\u003e\n\u003e ```dart\n\u003e Container(\n\u003e   margin: EdgeInsets.only(left: 8, top: 4),\n\u003e   child: MyWidget(),\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e MyWidget().marginOnly(left: 8, top: 4)\n\u003e ```\n\n\u003e ⚖️ **Margin vs Padding**  \n\u003e Use **`padding`** to add spacing _inside_ a widget's boundary — like space around text in a button.  \n\u003e Use **`margin`** to add spacing _outside_ a widget — like separating it from other widgets.\n\u003e\n\u003e 🟢 For most layout needs, **`padding` is the preferred and safer default**. Use `margin` when you need to push the widget away from surrounding elements, but be cautious with nesting to avoid layout issues.\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### ↕️ `gap` - Add Spacing Using Number Extensions\n\nUse doubles or ints to create `SizedBox` widgets with clear, expressive syntax. These extensions turn raw numbers into layout spacing—perfect for columns, rows, and consistent vertical/horizontal gaps.\n\n- `sizedWidth` — `SizedBox(width: this)`\n- `sizedHeight` — `SizedBox(height: this)`\n- `gapHorizontal` / `gapRow` / `gapWidth` — Aliases for horizontal spacing\n- `gapVertical` / `gapColumn` / `gapHeight` — Aliases for vertical spacing\n\nAll extensions return a `SizedBox` and are ideal for use in layouts to avoid magic numbers and improve readability.\n\n#### 🧪 Examples\n\n```dart\n// Horizontal space of 16\n16.gapHorizontal,\n```\n\n```dart\n// Vertical space of 8\n8.gapVertical,\n```\n\n```dart\n// SizedBox with explicit width\n2.5.sizedWidth,\n```\n\n```dart\n// SizedBox with explicit height\n32.sizedHeight,\n```\n\n```dart\n// Clean Row layout\nRow(\n  children: [\n    WidgetOne(),\n    12.gapRow,\n    WidgetTwo(),\n  ],\n)\n```\n\n```dart\n// Clean Column layout\nColumn(\n  children: [\n    WidgetOne(),\n    16.gapColumn,\n    WidgetTwo(),\n  ],\n)\n```\n\n\u003e 💡 Use `.gapRow` and `.gapColumn` when working inside `Row` or `Column` widgets for clarity and intent-based naming.\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 🧱 `row` / `column` — Instantly Wrap Widgets in Flex Layouts\n\nEffortlessly create `Row` and `Column` layouts with readable, inline extensions. Whether you're working with a single widget or a whole list, these helpers make layout structure fast, chainable, and more expressive.\n\n- `[].row()` / `[].column()` — Wrap a **list** of widgets in a `Row` or `Column`.\n- `.row()` / `.column()` — Wrap a **single** widget in a `Row` or `Column`.\n\n\u003e ✅ Fully supports **all `Row` and `Column` parameters**, including:  \n\u003e  `spacing`, `mainAxisAlignment`, `crossAxisAlignment`, and more.\n\n#### 🧪 Examples\n\n```dart\n// Two widgets in a Row with spacing\n[\n  WidgetOne(),\n  WidgetTwo(),\n].row(spacing: 12);\n```\n\n```dart\n// Vertical layout with alignment and spacing\n[\n  WidgetOne(),\n  WidgetTwo(),\n].column(\n  mainAxisAlignment: MainAxisAlignment.center,\n  spacing: 8,\n);\n```\n\n```dart\n// Single widget inside a Row\nMyWidget().row();\n```\n\n```dart\n// Puts a single widget in a column with center alignment\nMyWidget().column(\n  mainAxisAlignment: MainAxisAlignment.center,\n);\n```\n\n\u003e 💡 Instead of writing:\n\u003e\n\u003e ```dart\n\u003e Column(\n\u003e   spacing: 8,\n\u003e   children: [\n\u003e     WidgetOne(),\n\u003e     WidgetTwo(),\n\u003e   ],\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e [\n\u003e    WidgetOne(),\n\u003e    WidgetTwo(),\n\u003e ].column(spacing: 8)\n\u003e ```\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 🧭 `row*` / `column*` — Rapid Alignment Extensions for Flex Layouts\n\nStop repeating alignment boilerplate in your `Row` and `Column` widgets. These expressive extensions let you instantly apply common combinations of `mainAxisAlignment` and `crossAxisAlignment`, all while preserving full layout control. They make **UI creation dramatically faster and more readable**, especially in complex layouts or dynamic widget lists.\n\n#### 🧩 Functional Groups\n\nAll extensions are available for both `Row` and `Column`, following the same structure:\n\n- ✅ `columnMain*` — Sets `mainAxisAlignment`, customize others\n- ✅ `columnCross*` — Sets `crossAxisAlignment`, customize others\n- ✅ `column\u003cMain\u003e\u003cCross\u003e()` — Aligns both axes (e.g., `columnCenterStart`)\n\n* ✅ `rowMain*` — Sets `mainAxisAlignment`, customize others\n* ✅ `rowCross*` — Sets `crossAxisAlignment`, customize others\n* ✅ `row\u003cMain\u003e\u003cCross\u003e()` — Aligns both axes (e.g., `rowCenterStart`)\n\nAll methods accept **all standard layout parameters**, including:\n\n- `mainAxisSize`\n- `textDirection`\n- `verticalDirection`\n- `textBaseline`\n- `spacing`\n\n#### ✅ Why Use These?\n\n\u003e 💡 Instead of writing:\n\u003e\n\u003e ```dart\n\u003e Column(\n\u003e   mainAxisAlignment: MainAxisAlignment.center,\n\u003e   crossAxisAlignment: CrossAxisAlignment.start,\n\u003e   children: [...],\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e [...].columnCenterStart()\n\u003e ```\n\n\u003e Or instead of:\n\u003e\n\u003e ```dart\n\u003e Row(\n\u003e   spacing: 12,\n\u003e   mainAxisAlignment: MainAxisAlignment.spaceBetween,\n\u003e   crossAxisAlignment: CrossAxisAlignment.end,\n\u003e   children: [...],\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e [...].rowSpaceBetweenEnd(spacing: 12)\n\u003e ```\n\nThese shortcuts reduce boilerplate and keep your layout code highly consistent and declarative—perfect for design systems, builder UIs, and everyday Flutter apps.\n\n#### 📚 Available `column` Methods\n\n##### `columnMain`\\\u003cchoose alignment\u003e`()`\n\n- `columnMainStart()` — `MainAxisAlignment.start`\n- `columnMainCenter()` — `MainAxisAlignment.center`\n- `columnMainEnd()` — `MainAxisAlignment.end`\n- `columnMainSpaceAround()` — `MainAxisAlignment.spaceAround`\n- `columnMainSpaceBetween()` — `MainAxisAlignment.spaceBetween`\n- `columnMainSpaceEvenly()` — `MainAxisAlignment.spaceEvenly`\n\n##### `columnCross`\\\u003cchoose alignment\u003e`()`\n\n- `columnCrossStart()` — `CrossAxisAlignment.start`\n- `columnCrossCenter()` — `CrossAxisAlignment.center`\n- `columnCrossEnd()` — `CrossAxisAlignment.end`\n- `columnCrossBaseline()` — `CrossAxisAlignment.baseline`\n- `columnCrossStretch()` — `CrossAxisAlignment.stretch`\n\n##### `column`\\\u003cchoose main alignment\u003e\\\u003cchoose cross alignment\u003e`()`\n\n- `columnStartStart()`\n- `columnStartCenter()`\n- `columnStartEnd()`\n- `columnStartBaseline()`\n- `columnStartStretch()`\n\n* `columnCenterStart()`\n* `columnCenterCenter()`\n* `columnCenterEnd()`\n* `columnCenterBaseline()`\n* `columnCenterStretch()`\n\n- `columnEndStart()`\n- `columnEndCenter()`\n- `columnEndEnd()`\n- `columnEndBaseline()`\n- `columnEndStretch()`\n\n* `columnSpaceAroundStart()`\n* `columnSpaceAroundCenter()`\n* `columnSpaceAroundEnd()`\n* `columnSpaceAroundBaseline()`\n* `columnSpaceAroundStretch()`\n\n- `columnSpaceBetweenStart()`\n- `columnSpaceBetweenCenter()`\n- `columnSpaceBetweenEnd()`\n- `columnSpaceBetweenBaseline()`\n- `columnSpaceBetweenStretch()`\n\n* `columnSpaceEvenlyStart()`\n* `columnSpaceEvenlyCenter()`\n* `columnSpaceEvenlyEnd()`\n* `columnSpaceEvenlyBaseline()`\n* `columnSpaceEvenlyStretch()`\n\n#### 🧪 Examples\n\n```dart\n// A vertically-centered column, aligned to start\n[\n  Icons.image.icon(), // same as Icon(Icons.image)\n  Text(\"Profile\"),\n].columnCenterStart();\n```\n\n```dart\n// Use main alignment only, keep full control of cross\n[\n  Text(\"Hello\"),\n  Text(\"World\"),\n].columnMainSpaceAround(crossAxisAlignment: CrossAxisAlignment.end);\n```\n\n```dart\n// Use cross alignment only, keep full control of main\n[\n  Text(\"Item 1\"),\n  \"Item 2\".text(), // same as Text(\"Item 2\")\n].columnCrossStretch(mainAxisAlignment: MainAxisAlignment.end);\n```\n\n#### 📚 Available `row` Methods\n\n##### `rowMain`\\\u003cchoose alignment\u003e`()`\n\n- `rowMainStart()`\n- `rowMainCenter()`\n- `rowMainEnd()`\n- `rowMainSpaceAround()`\n- `rowMainSpaceBetween()`\n- `rowMainSpaceEvenly()`\n\n##### `rowCross`\\\u003cchoose alignment\u003e`()`\n\n- `rowCrossStart()`\n- `rowCrossCenter()`\n- `rowCrossEnd()`\n- `rowCrossBaseline()`\n- `rowCrossStretch()`\n\n##### `row`\\\u003cchoose main alignment\u003e\\\u003cchoose cross alignment\u003e`()`\n\n- `rowStartStart()`\n- `rowStartCenter()`\n- `rowStartEnd()`\n- `rowStartBaseline()`\n- `rowStartStretch()`\n\n* `rowCenterStart()`\n* `rowCenterCenter()`\n* `rowCenterEnd()`\n* `rowCenterBaseline()`\n* `rowCenterStretch()`\n\n- `rowEndStart()`\n- `rowEndCenter()`\n- `rowEndEnd()`\n- `rowEndBaseline()`\n- `rowEndStretch()`\n\n* `rowSpaceAroundStart()`\n* `rowSpaceAroundCenter()`\n* `rowSpaceAroundEnd()`\n* `rowSpaceAroundBaseline()`\n* `rowSpaceAroundStretch()`\n\n- `rowSpaceBetweenStart()`\n- `rowSpaceBetweenCenter()`\n- `rowSpaceBetweenEnd()`\n- `rowSpaceBetweenBaseline()`\n- `rowSpaceBetweenStretch()`\n\n* `rowSpaceEvenlyStart()`\n* `rowSpaceEvenlyCenter()`\n* `rowSpaceEvenlyEnd()`\n* `rowSpaceEvenlyBaseline()`\n* `rowSpaceEvenlyStretch()`\n\n#### 🧪 Examples\n\n```dart\n// Centered row, aligned to top\n[\n  WidgetOne(),\n  WidgetTwo(),\n].rowCenterStart();\n```\n\n```dart\n// Horizontal space between, vertically stretched\n[\n  WidgetOne(),\n  WidgetTwo(),\n].rowSpaceBetweenStretch();\n```\n\n```dart\n// Apply only main alignment, customize cross\n[\n  WidgetOne(),\n  WidgetTwo(),\n].rowMainEnd(crossAxisAlignment: CrossAxisAlignment.start);\n```\n\n```dart\n// Apply only cross alignment, keep full control of main\n[\n  WidgetOne(),\n  WidgetTwo(),\n].rowCrossEnd(mainAxisAlignment: MainAxisAlignment.center);\n```\n\n\u003e 💡 These extensions make horizontal layout code extremely fast and clean — especially when building repetitive layouts across your app.\n\n\u003e ✅ Full support for layout parameters like `spacing`, `mainAxisSize`, `textDirection`, and more — no flexibility lost.\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 🧊 `stack` — Overlay Widgets with Full Stack Control\n\nBuild layered UI structures with intuitive, chainable extensions. These methods let you create `Stack` layouts directly from a `List\u003cWidget\u003e` and configure fit modes easily with named variants.\n\n- `stack()` — Wrap a list in a standard `Stack` (`StackFit.loose` by default).\n- `stackLoose()` — Equivalent to `StackFit.loose` (default).\n- `stackExpand()` — Children fill the available space (`StackFit.expand`).\n- `stackPassthrough()` — Children keep their intrinsic size (`StackFit.passthrough`).\n\n✅ Fully supports all native `Stack` parameters:\n`alignment`, `textDirection`, `fit`, and `clipBehavior`.\n\n#### 🧪 Examples\n\n```dart\n// Default stack with loose fit\n[\n  WidgetOne(),\n  WidgetTwo().positionedTop(0),\n].stack();\n```\n\n```dart\n// Stack with expanded fit\n[\n  WidgetOne(),\n  WidgetTwo().positionedBottom(0),\n].stackExpand();\n```\n\n```dart\n// Stack with passthrough sizing\n[\n  WidgetOne(),\n  WidgetTwo(),\n].stackPassthrough();\n```\n\n```dart\n// Stack with custom alignment and clip behavior\n[\n  ...someWidgets,\n].stack(\n  alignment: Alignment.center,\n  clipBehavior: Clip.none,\n);\n```\n\n```dart\n// A single widget wrapped in a Stack\nMyWidget().stack();\n```\n\n\u003e 💡 Instead of writing:\n\u003e\n\u003e ```dart\n\u003e Stack(\n\u003e   fit: StackFit.expand,\n\u003e   alignment: Alignment.center,\n\u003e   children: [ ... ],\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e [...].stackExpand(alignment: Alignment.center)\n\u003e ```\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 👁️ `visible` - Conditional Visibility for Widgets\n\nSimplify visibility logic in your widget tree with expressive, chainable methods. These extensions replace repetitive ternary conditions and help keep your UI code declarative and clean.\n\n- `visibleIf(bool)` — Show this widget only if the condition is `true`; otherwise returns an empty box.\n- `visibleIfNot(bool)` — Inverse of `visibleIf`.\n- `visibleIfNull(Object?)` — Show this widget only if the given value is `null`.\n- `visibleIfNotNull(Object?)` — Show this widget only if the given value is **not** `null`.\n- `hide()` — Always returns an empty widget (`SizedBox.shrink()`).\n- `invisible()` — Alias of `hide()` for readability.\n- `boxShrink()` — Returns `SizedBox.shrink()` directly.\n\nAll methods return valid widgets and are safe to chain inside build methods.\n\n#### 🧪 Examples\n\n```dart\nMyWidget().visibleIf(isLoggedIn); // Show only if condition is true\n```\n\n```dart\nMyWidget().visibleIfNot(isLoggedIn); // Show only if condition is false\n```\n\n```dart\nMyWidget().visibleIfNull(user); // Show only if value is null\n```\n\n```dart\nMyWidget().visibleIfNotNull(user); // Show only if value is not null\n```\n\n```dart\nMyWidget().hide(); // Always hidden\n```\n\n```dart\nMyWidget().invisible(); // Same as hide(), for clarity\n```\n\n```dart\nfinal emptyBox = MyWidget().boxShrink(); // Returns an empty widget directly\n```\n\n\u003e 💡 **Why use this?**\n\u003e Instead of writing:\n\u003e\n\u003e ```dart\n\u003e condition ? MyWidget() : const SizedBox.shrink()\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e MyWidget().visibleIf(condition)\n\u003e ```\n\n\u003e 🔒 These methods **never break layout structure** — they return a valid widget in all cases and help you write safer conditional UI.\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 🌫️ `opacity` - Control Widget Transparency\n\nQuickly apply opacity to any widget using clean, expressive methods. These extensions eliminate the need to wrap widgets manually in `Opacity` and support percentage-based and common preset values.\n\n- `opacity(double)` — Set widget transparency using a `0.0–1.0` value.\n- `opacityPercent(double)` — Use percentage (`0–100`) for readability.\n- `opacityHalf()` — Set opacity to 50%.\n- `opacityQuarter()` — Set opacity to 25%.\n- `opacityZero()` — Set opacity to 0.\n- `opacityTransparent()` — Alias of `opacityZero()`.\n- `opacityInvisible()` — Alias of `opacityZero()`.\n\nAll methods return a wrapped `Opacity` widget and are safe to chain with other extensions.\n\n#### 🧪 Examples\n\nSet to `70%` visible\n\n```dart\nMyWidget().opacity(0.7);\n```\n\nSet to `40%` using percent\n\n```dart\nMyWidget().opacityPercent(40);\n```\n\n```dart\nMyWidget().opacityHalf(); // Half visible (0.5)\n```\n\n```dart\nMyWidget().opacityQuarter(); // Quarter visible (0.25)\n```\n\n\u003e 💡 Instead of writing:\n\u003e\n\u003e ```dart\n\u003e Opacity(\n\u003e   opacity: value,\n\u003e   child: MyWidget(),\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e MyWidget().opacity(value)\n\u003e ```\n\u003e\n\u003e Use `.opacityPercent()` when working with designer specs or to make your code more intuitive at a glance.\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 📱 `safeArea` — Add SafeArea Padding Declaratively\n\nEasily wrap widgets in `SafeArea` using expressive, chainable extensions. These methods let you control which sides are padded—without nesting or verbose boilerplate.\n\n- `safeArea({left, top, right, bottom, minimum, maintainBottomViewPadding})` — Full control over all sides and padding behavior.\n- `safeAreaAll()` — Padding on all sides.\n- `safeAreaNone()` — No padding at all.\n- `safeAreaOnlyTop()` / `safeAreaOnlyBottom()` — Top or bottom only.\n- `safeAreaOnlyLeft()` / `safeAreaOnlyRight()` — Left or right only.\n- `safeAreaOnlyHorizontal()` — Left + right.\n- `safeAreaOnlyVertical()` — Top + bottom.\n\nAll methods return a `SafeArea` widget wrapping the original widget.\n\n#### 🧪 Examples\n\n```dart\nMyWidget().safeArea(); // Same as wrap in SafeArea;\n```\n\n```dart\n// Only top padded (e.g., below status bar)\nMyWidget().safeAreaOnlyTop();\n```\n\n```dart\n// Bottom safe area only (e.g., above iPhone home indicator)\nMyWidget().safeAreaOnlyBottom();\n```\n\n```dart\n// Custom safe area: only horizontal\nMyWidget().safeAreaOnlyHorizontal();\n```\n\n```dart\n// No SafeArea applied\nMyWidget().safeAreaNone();\n```\n\n\u003e 💡 Instead of writing:\n\u003e\n\u003e ```dart\n\u003e SafeArea(\n\u003e   child: MyWidget(),\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e MyWidget().safeArea()\n\u003e ```\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 👆 `gesture` — Add Tap, Drag \u0026 Press Events Easily\n\nEliminate manual `GestureDetector` nesting with intuitive, chainable gesture methods. These extensions make it effortless to attach any gesture to any widget.\n\n- `onTap(VoidCallback)` — Handle basic tap gestures.\n- `onDoubleTap(VoidCallback)` — Respond to double-tap gestures.\n- `onLongPress(VoidCallback)` — Handle long presses.\n- `onTapDown(...)`, `onTapUp(...)`, `onTapCancel(...)` — Full tap phase handling.\n- `onSecondaryTap(...)`, `onTertiaryTapDown(...)`, etc. — Full multi-touch support.\n- `onVerticalDrag...`, `onHorizontalDrag...`, `onPan...` — Add drag gestures with full phase support.\n- `onScale...` — Handle pinch-to-zoom gestures.\n- `onForcePress...` — Support for pressure-sensitive gestures.\n- `gestureDetector(...)` — Attach multiple gestures at once in one call.\n\nAll methods return a wrapped `GestureDetector` and support optional customization of behavior, semantics, and supported devices.\n\n#### 🧪 Examples\n\n```dart\n// Basic tap interaction\nMyWidget().onTap(() =\u003e print(\"Tapped!\"));\n```\n\n```dart\n// Double tap\nMyWidget().onDoubleTap(() =\u003e print(\"Double tapped\"));\n```\n\n```dart\n// Handle tap down position\nMyWidget().onTapDown((details) {\n  print(\"Tap down at ${details.globalPosition}\");\n});\n```\n\n```dart\n// Add vertical drag support\nMyWidget().onVerticalDragUpdate((details) {\n  print(\"Dragging: ${details.delta.dy}\");\n});\n```\n\n```dart\n// Combine multiple gestures\nMyWidget().gestureDetector(\n  onTap: () =\u003e print(\"Tap\"),\n  onLongPress: () =\u003e print(\"Long press\"),\n  onPanUpdate: (details) =\u003e print(\"Panning\"),\n);\n```\n\n\u003e 💡 Instead of writing:\n\u003e\n\u003e ```dart\n\u003e GestureDetector(\n\u003e   onTap: () =\u003e doSomething(),\n\u003e   child: MyWidget(),\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e MyWidget().onTap(() =\u003e doSomething())\n\u003e ```\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 🦸 `hero` — Add Seamless Shared Element Transitions\n\nEffortlessly wrap any widget in a `Hero` for smooth page-to-page transitions. Customize behavior with optional parameters for animations, flight behavior, and placeholders.\n\n- `hero(String tag)` — Wraps the widget in a `Hero` with the given tag.\n- Optional parameters:\n  - `createRectTween(...)` — Customize the transition animation path.\n  - `flightShuttleBuilder(...)` — Override the animation widget during flight.\n  - `placeholderBuilder(...)` — Placeholder shown during transition loading.\n  - `transitionOnUserGestures` — Allow gesture-driven transitions.\n\nAll options mirror the native `Hero` widget and can be configured inline.\n\n#### 🧪 Examples\n\n```dart\n// Basic shared element transition\nMyWidget().hero(\"profile-avatar\");\n```\n\n```dart\n// Custom placeholder\nMyWidget()\n  .hero(\n    \"title-hero\",\n    placeholderBuilder: (context, size, child) =\u003e\n        SizedBox.fromSize(size: size),\n  );\n```\n\n```dart\n// With custom flight behavior\nMyWidget().hero(\n  \"star-icon\",\n  flightShuttleBuilder: (context, animation, direction, from, to) {\n    return ScaleTransition(scale: animation, child: to.widget);\n  },\n);\n```\n\n\u003e 💡 Instead of writing:\n\u003e\n\u003e ```dart\n\u003e Hero(\n\u003e   tag: \"avatar\",\n\u003e   child: Image.asset(\"avatar.png\"),\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e Image.asset(\"avatar.png\").hero(\"avatar\")\n\u003e ```\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 📦 `sizedBox` — Wrap Widgets in Fixed-Size Boxes\n\nQuickly wrap any widget in a `SizedBox` with a specified width, height, or both. These extensions improve readability and reduce boilerplate when sizing widgets inline.\n\n- `sizedBox({width, height})` — Wrap with custom width and/or height.\n- `sizedWidth(double)` — Set only the width.\n- `sizedHeight(double)` — Set only the height.\n\nAll methods return a `SizedBox` with your widget as the child, and are safe to chain.\n\n#### 🧪 Examples\n\n```dart\n// Fixed width and height\nMyWidget().sizedBox(width: 120, height: 40);\n```\n\n```dart\n// Only width\nMyWidget().sizedWidth(200);\n```\n\n```dart\n// Only height\nMyWidget().sizedHeight(60);\n```\n\n\u003e 💡 Instead of writing:\n\u003e\n\u003e ```dart\n\u003e SizedBox(width: 120, height: 40, child: MyWidget())\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e MyWidget().sizedBox(width: 120, height: 40)\n\u003e ```\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 🎨 `decoratedBox` — Add Backgrounds, Borders, Gradients \u0026 Effects\n\nDecorate any widget with rich visuals using a clean, expressive API. These extensions wrap your widget in a `DecoratedBox` with common presets like gradients, shadows, images, borders, and shapes — no boilerplate required.\n\n- `decoratedBox(...)` — Core method using any `Decoration`.\n- `decoratedBoxDecoration(...)` — Configure `BoxDecoration` inline with full control.\n- `imageBox(...)` — Add a background image with all `DecorationImage` options.\n- `gradientBox(Gradient)` — Add a linear, radial, or sweep gradient.\n- `shadowedBox(...)` — Apply shadow effects with offset, blur, spread.\n- `borderedBox(...)` — Add a border (and optional border radius).\n- `shapedBox(BoxShape)` — Change the shape (e.g., circle, rectangle).\n- `circularBorderBox(...)` — Draw a colored, circular border with width and radius.\n\nAll methods return a `DecoratedBox` and can be safely combined with padding, opacity, or gesture extensions.\n\n#### 🧪 Examples\n\n```dart\n// Apply a gradient background\nMyWidget().gradientBox(\n  LinearGradient(colors: [Colors.purple, Colors.blue]),\n);\n```\n\n```dart\n// Add a background image\nMyWidget().imageBox(\n  image: NetworkImage(\"https://example.com/image.png\"),\n  fit: BoxFit.cover,\n);\n```\n\n```dart\n// Add a shadow\nMyWidget().shadowedBox(\n  offset: Offset(2, 2),\n  blurRadius: 6,\n);\n```\n\n```dart\n// Circular border\nMyWidget().circularBorderBox(\n  radius: 12,\n  color: Colors.red,\n  width: 2,\n);\n```\n\n```dart\n// Full decorated box manually\nMyWidget().decoratedBoxDecoration(\n  color: Colors.grey.shade100,\n  border: Border.all(color: Colors.black26),\n  borderRadius: BorderRadius.circular(8),\n);\n```\n\n\u003e 💡 Instead of wrapping your widget manually like this:\n\u003e\n\u003e ```dart\n\u003e DecoratedBox(\n\u003e   decoration: BoxDecoration(\n\u003e     color: Colors.red,\n\u003e     borderRadius: BorderRadius.circular(12),\n\u003e   ),\n\u003e   child: MyWidget(),\n\u003e )\n\u003e ```\n\u003e\n\u003e You can write:\n\u003e\n\u003e ```dart\n\u003e MyWidget().decoratedBoxDecoration(\n\u003e   color: Colors.red,\n\u003e   borderRadius: BorderRadius.circular(12),\n\u003e )\n\u003e ```\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 🚧 `constrained` — Add Size Limits to Widgets\n\nApply size constraints directly to any widget without manually wrapping in `ConstrainedBox`. These extensions make layout constraints clean, readable, and fully chainable.\n\n- `constrained({minWidth, maxWidth, minHeight, maxHeight})` — General constraint utility.\n- `constrainedBox(BoxConstraints)` — Use custom `BoxConstraints` directly.\n- `constrainedWidth({min, max})` — Horizontal size limits.\n- `constrainedHeight({min, max})` — Vertical size limits.\n- `minWidth(double)` / `maxWidth(double)` — Individual width constraints.\n- `minHeight(double)` / `maxHeight(double)` — Individual height constraints.\n\nAll methods return a `ConstrainedBox` and are safe to chain in layout compositions.\n\n#### 🧪 Examples\n\n```dart\n// Limit to a width between 100–200\nMyWidget().constrainedWidth(min: 100, max: 200);\n```\n\n```dart\n// Limit to a height between 50–100\nMyWidget().constrainedHeight(min: 50, max: 100);\n```\n\n```dart\n// Only limit max height\nMyWidget().maxHeight(120);\n```\n\n```dart\n// Fully custom constraints\nMyWidget().constrained(\n  minWidth: 80,\n  maxWidth: 150,\n  minHeight: 40,\n  maxHeight: 90,\n);\n```\n\n```dart\n// Using BoxConstraints directly\nMyWidget().constrainedBox(\n  constraints: BoxConstraints.tightFor(width: 100, height: 40),\n);\n```\n\n\u003e 💡 Instead of writing:\n\u003e\n\u003e ```dart\n\u003e ConstrainedBox(\n\u003e   constraints: BoxConstraints(\n\u003e     minWidth: 100,\n\u003e     maxWidth: 200,\n\u003e   ),\n\u003e   child: MyWidget(),\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e MyWidget().constrainedWidth(min: 100, max: 200)\n\u003e ```\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 🟥 `coloredBox` — Add Background Color to Any Widget\n\nWrap any widget with a solid background using `ColoredBox`, without nesting manually. This extension is a clean and efficient way to apply color without additional containers.\n\n- `coloredBox(Color)` — Wraps the widget in a `ColoredBox` with the given background color.\n\nUse this to apply color styling in layout compositions without using `Container`, keeping your UI lightweight.\n\n#### 🧪 Example\n\n```dart\n// Red background\nMyWidget().coloredBox(Colors.red);\n```\n\n\u003e 💡 **Why use this?**\n\u003e Instead of writing:\n\u003e\n\u003e ```dart\n\u003e ColoredBox(\n\u003e   color: Colors.blue,\n\u003e   child: MyWidget(),\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e MyWidget().coloredBox(Colors.blue)\n\u003e ```\n\n\u003e ✅ A minimal, performant way to color backgrounds without unnecessary overhead.\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 🎨 `Material coloredBox` — Background Color with One Line\n\nApply colorful backgrounds to any widget using expressive `.colorBox()` helpers. These extensions wrap your widget in a `ColoredBox` with a specific `Color` from the Material palette.\n\nNo need to write `Container` or manage `BoxDecoration`—just add color directly to any widget in one line.\n\nAll extensions return a `ColoredBox`.\n\n#### 🌈 Available Colors\n\n- `redBox()` / `redAccentBox()`\n- `greenBox()` / `greenAccentBox()`\n- `blueBox()` / `blueAccentBox()`\n- `yellowBox()` / `yellowAccentBox()`\n- `orangeBox()` / `orangeAccentBox()`\n- `purpleBox()` / `purpleAccentBox()`\n- `deepPurpleBox()` / `deepPurpleAccentBox()`\n- `pinkBox()` / `pinkAccentBox()`\n- `brownBox()`\n- `tealBox()` / `tealAccentBox()`\n- `cyanBox()` / `cyanAccentBox()`\n- `lightBlueBox()` / `lightBlueAccentBox()`\n- `lightGreenBox()` / `lightGreenAccentBox()`\n- `limeBox()` / `limeAccentBox()`\n- `greyBox()`\n- `blackBox()`\n- `whiteBox()`\n\n#### 🧪 Examples\n\n```dart\n// Add a red background\nMyWidget().redBox();\n```\n\n```dart\n// Success message with green accent\nMyWidget().greenAccentBox();\n```\n\n```dart\n// Stylized button background\nMyWidget().blueBox().paddingAll(12);\n```\n\n\u003e 💡 Instead of writing:\n\u003e\n\u003e ```dart\n\u003e ColoredBox(\n\u003e   color: Colors.red,\n\u003e   child: MyWidget(),\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e MyWidget().redBox()\n\u003e ```\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 🎨 `Cupertino coloredBox` — Apply iOS-Themed Background Colors\n\nQuickly apply Cupertino-style background colors to any widget using expressive, pre-named methods. These extensions wrap your widget in a `ColoredBox` using native `CupertinoColors`.\n\n- `redBox()` / `destructiveRedBox()`\n- `greenBox()` / `activeGreenBox()`\n- `blueBox()` / `activeBlueBox()`\n- `orangeBox()` / `orangeAccentBox()`\n- `yellowBox()` / `purpleBox()` / `pinkBox()`\n- `tealBox()` / `cyanBox()` / `brownBox()`\n- `greyBox()` / `blackBox()` / `whiteBox()`\n- `darkGrayBox()` / `lightGrayBox()`\n\nAll methods return a `ColoredBox` using system-consistent Cupertino color values, ideal for quick prototyping and iOS-native look and feel.\n\n#### 🧪 Examples\n\n```dart\n// Apply iOS system red background\nMyWidget().redBox();\n```\n\n```dart\n// Use active Cupertino blue\nMyWidget().activeBlueBox();\n```\n\n```dart\n// Style with light gray background\nMyWidget().lightGrayBox();\n```\n\n```dart\n// Warning or alert color\nMyWidget().orangeAccentBox();\n```\n\n\u003e 💡 Instead of writing:\n\u003e\n\u003e ```dart\n\u003e ColoredBox(\n\u003e   color: CupertinoColors.systemTeal,\n\u003e   child: MyWidget(),\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e MyWidget().tealBox()\n\u003e ```\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 🪞 `fit` — Control How Widgets Scale to Fit\n\nWrap your widget with a `FittedBox` to control how it resizes within its parent. These extensions provide clean, expressive access to `BoxFit` options — without the boilerplate.\n\n- `fittedBox({fit, alignment, clipBehavior})` — Base method with full control.\n- `fitContain()` — Preserves aspect ratio, fits within bounds.\n- `fitCover()` — Fills bounds, possibly cropping.\n- `fitFill()` — Stretches to fill bounds, ignoring aspect ratio.\n- `fitScaleDown()` — Only scales down, never up.\n- `fitHeight()` — Scales to match parent height.\n\nAll methods return a `FittedBox` and preserve your widget tree cleanly.\n\n#### 🧪 Examples\n\n```dart\n// Scale to fit within constraints\nMyWidget().fitContain();\n```\n\n```dart\n// Fill the available space\nMyWidget().fitCover();\n```\n\n```dart\n// Scale down only if too large\nMyWidget().fitScaleDown();\n```\n\n```dart\n// Stretch to fill all dimensions\nMyWidget().fitFill();\n```\n\n\u003e 💡 Instead of writing:\n\u003e\n\u003e ```dart\n\u003e FittedBox(\n\u003e   fit: BoxFit.cover,\n\u003e   child: MyWidget(),\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e MyWidget().fitCover()\n\u003e ```\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 📦 `container` — Wrap Any Widget in a Container\n\nEasily apply layout, styling, and decoration to any widget by wrapping it in a `Container`—without cluttering your code. This extension saves you from manual nesting while exposing all the powerful layout features of `Container`.\n\n- `container({...})` — Adds padding, margin, size, decoration, alignment, and more in a single call.\n\nSupports all `Container` options:\n\n- `width`, `height` — Size constraints\n- `color`, `decoration` — Background and border styling\n- `padding`, `margin` — Inner and outer spacing\n- `alignment` — Align child within the container\n- `clipBehavior`, `constraints` — Additional layout control\n\n#### 🧪 Examples\n\n```dart\n// Wrap with background color and padding\nMyWidget().container(\n  color: const Color(0xFFE0E0E0),\n  padding: const EdgeInsets.all(12),\n);\n```\n\n```dart\n// Add margin and align center\nMyWidget().container(\n  margin: const EdgeInsets.symmetric(vertical: 16),\n  alignment: Alignment.center,\n);\n```\n\n```dart\n// Fully customized container\nMyWidget().container(\n  width: 150,\n  height: 80,\n  decoration: BoxDecoration(\n    color: const Color(0xFF2196F3),\n    borderRadius: BorderRadius.circular(12),\n  ),\n  alignment: Alignment.center,\n);\n```\n\n\u003e 💡 Instead of writing:\n\u003e\n\u003e ```dart\n\u003e Container(\n\u003e   padding: EdgeInsets.all(12),\n\u003e   color: Colors.grey,\n\u003e   child: MyWidget(),\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e MyWidget().container(padding: EdgeInsets.all(12), color: Colors.grey)\n\u003e ```\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### ✂️ `clip` - Clip Widgets into Shapes\n\nEasily apply clipping to any widget using expressive, chainable methods. These extensions eliminate boilerplate when working with `ClipPath`, `ClipRRect`, `ClipOval`, and even advanced shapes like squircles.\n\n- `clipRRect({borderRadius})` — Clip with rounded corners using `ClipRRect`.\n- `clipCircular([radius])` — Clip into a circle.\n- `clipOval()` — Clip into an oval or circle.\n- `clipCircle()` — Alias for `clipOval()` (semantic clarity).\n- `clipPath({clipper})` — General-purpose custom path clipping.\n- `clipSquircle([radiusFactor])` — Clip into a modern \"squircle\" shape.\n- `clipContinuousRectangle([radiusFactor])` — Alias for `clipSquircle()`.\n\nAll methods return wrapped `Clip*` widgets and are safe to chain.\n\n#### 🧪 Examples\n\n```dart\n// Rounded corners (16 radius)\nContainer().clipRRect(borderRadius: BorderRadius.circular(16));\n```\n\n```dart\n// Circular/oval clip\nImage.asset(\"avatar.png\").clipCircle();\n```\n\n```dart\n// Custom path clip (e.g. star shape)\nMyWidget().clipPath(clipper: StarClipper());\n```\n\n```dart\n// Squircle shape (iOS-style corners)\nMyWidget().clipSquircle(2.5);\n```\n\n```dart\n// Same as above but with alternative naming\nMyWidget().clipContinuousRectangle(2.5);\n```\n\n\u003e 💡 Instead of writing:\n\u003e\n\u003e ```dart\n\u003e ClipRRect(\n\u003e   borderRadius: BorderRadius.circular(12),\n\u003e   child: MyWidget(),\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e MyWidget().clipRRect(borderRadius: BorderRadius.circular(12))\n\u003e ```\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 📝 `text` — Turn Any String into a Text Widget\n\nEffortlessly convert a `String` into a fully configurable `Text` widget. The `.text()` and `.styledText()` extensions make your UI code clean, readable, and expressive — no more boilerplate, no more clutter.\n\n- `.text({...})` — Create a `Text` widget with any native `Text` constructor parameters.\n- `.styledText({...})` — Configure full `TextStyle` in one place: font, color, spacing, shadows, decoration, and more.\n\nBoth methods return a standard Flutter `Text` widget — no wrappers, no magic.\n\n#### 🔹 Basic Text\n\n```dart\n\"Hello world\".text(); // same as Text(\"Hello world\");\n```\n\n```dart\nText(\"Hello world\"); // same as \"Hello world\".text();\n```\n\n#### 🔹 Styled Text with Alignment\n\n```dart\n\"Hello exui\".text(\n  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),\n  textAlign: TextAlign.center,\n);\n```\n\n```dart\nText(\n  \"Hello exui\",\n  style: TextStyle(\n    fontSize: 18,\n    fontWeight: FontWeight.bold,\n  ),\n  textAlign: TextAlign.center,\n);\n```\n\n#### 🔹 Rich Styling in One Call\n\n```dart\n\"Stylish!\".styledText(\n  fontSize: 24,\n  fontWeight: FontWeight.w600,\n  color: Colors.purple,\n);\n```\n\n```dart\nText(\n  \"Stylish!\",\n  style: TextStyle(\n    fontSize: 24,\n    fontWeight: FontWeight.w600,\n    color: Colors.purple,\n  ),\n);\n```\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 🎛️ `styled text` - Modify and Style `Text` Widgets Easily\n\nPowerfully enhance your `Text` widgets with dozens of chainable extensions. Control alignment, overflow, semantics, and apply fine-grained styling—without verbose `TextStyle` blocks.\n\nThese extensions are non-intrusive, composable, and maintain the immutability of the original widget.\n\n#### 📐 Layout \u0026 Metadata Modifiers\n\n- `textAlign(...)`\n- `textDirection(...)`\n- `locale(...)`\n- `softWrap(...)`\n- `overflow(...)`\n- `maxLines(...)`\n- `semanticsLabel(...)`\n- `widthBasis(...)`\n- `heightBehavior(...)`\n- `selectionColor(...)`\n- `strutStyle(...)`\n- `textScaler(...)`\n\n#### 🎨 Style Extensions\n\nApply full or partial `TextStyle` changes with expressive one-liners:\n\n- `fontSize(...)`\n- `fontWeight(...)`\n- `fontStyle(...)`\n- `letterSpacing(...)`\n- `wordSpacing(...)`\n- `height(...)`\n- `foreground(...)` / `background(...)`\n- `shadows(...)`\n- `fontFeatures(...)` / `fontVariations(...)`\n- `decoration(...)`\n- `decorationColor(...)`\n- `decorationStyle(...)`\n- `decorationThickness(...)`\n- `fontFamily(...)` / `fontFamilyFallback(...)`\n- `leadingDistribution(...)`\n- `debugLabel(...)`\n\n#### ⚡ Expressive Shortcuts\n\nUse simple methods for common typography tasks:\n\n- `bold()`\n- `italic()`\n- `underline()`\n- `strikethrough()`\n- `boldItalic()`\n- `boldUnderline()`\n- `boldStrikethrough()`\n\n#### 🧪 Example\n\n```dart\n\"Hello World\"\n  .text()\n  .fontSize(20)\n  .boldItalic()\n  .textAlign(TextAlign.center)\n  .maxLines(2)\n  .overflow(TextOverflow.ellipsis);\n```\n\nOr, apply full styling in one go:\n\n```dart\n\"Sale!\"\n  .text()\n  .styled(\n    fontSize: 24,\n    fontWeight: FontWeight.w900,\n    decoration: TextDecoration.lineThrough,\n    color: Colors.red,\n  );\n```\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 🔣 `icon` — Quickly Create and Style Icons\n\nEasily create and customize `Icon` widgets from an `IconData`, or update existing `Icon` instances with expressive, chainable methods. These extensions support all styling parameters available on Flutter's `Icon`.\n\n#### 🧩 On `IconData`\n\n- `icon({...})` — Create an `Icon` from `IconData` with full styling options.\n- `iconSized(double)` — Shorthand for setting size.\n- `iconFilled(double)` — Set the fill level (for Material symbols).\n- `iconColored(Color)` — Apply color.\n\n#### 🧩 On `Icon`\n\n- `.sized(double)` — Change icon size.\n- `.filled(double)` — Set fill level.\n- `.weight(double)` / `.grade(double)` / `.opticalSize(double)` — Fine-tune variable font icons.\n- `.colored(Color)` — Change icon color.\n- `.shadowed(List\u003cShadow\u003e)` — Add text-style shadows.\n- `.semanticLabeled(String)` — Set semantic label for accessibility.\n- `.textDirectioned(TextDirection)` — Set directionality.\n- `.applyTextScaling(bool)` — Respect or ignore text scaling.\n- `.blendMode(BlendMode)` — Control blend behavior.\n\nAll methods return a new `Icon` and preserve other properties unless overwritten.\n\n---\n\n#### 🧪 Examples\n\n```dart\nIcons.settings.icon(size: 32, color: Colors.amber,);\n```\n\n```dart\n// Create a red icon at 24px\nIcons.home.iconSized(24).colored(Colors.red);\n```\n\n```dart\n// Create and fill a Material symbol icon\nIcons.favorite.iconFilled(1.0);\n```\n\n```dart\n// Chain multiple style changes\nIcons.star.icon().sized(32).filled(0.8).colored(Colors.amber);\n```\n\n\u003e 💡 Instead of:\n\u003e\n\u003e ```dart\n\u003e Icon(\n\u003e   Icons.star,\n\u003e   size: 32,\n\u003e   color: Colors.amber,\n\u003e   fill: 0.8,\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e Icons.star.icon(size: 32, color: Colors.amber, fill: 0.8)\n\u003e ```\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 🍎 `cupertinoButton` — Turn Any Widget into an iOS Button\n\nTransform any widget into a fully styled `CupertinoButton`, with fluent syntax and optional variants for filled or tinted styles. These extensions reduce boilerplate while preserving full configurability.\n\n- `cupertinoButton(...)` — Standard iOS-style button.\n- `cupertinoFilledButton(...)` — Filled style, best for emphasis.\n- `cupertinoTintedButton(...)` — Tinted (outlined) style with subtle color emphasis.\n\nEach method returns a `CupertinoButton` and supports all common options, including `pressedOpacity`, `autofocus`, `borderRadius`, and `onLongPress`.\n\n#### 🧪 Examples\n\n```dart\n// Basic Cupertino button\nText(\"Continue\").cupertinoButton(onPressed: () {});\n```\n\n```dart\n// Filled iOS-style button\nText(\"Submit\").cupertinoFilledButton(onPressed: () {});\n```\n\n```dart\n// Tinted iOS-style button with border and color\nText(\"Retry\").cupertinoTintedButton(\n  color: CupertinoColors.systemRed,\n  onPressed: () {},\n);\n```\n\n\u003e 💡 Instead of writing:\n\u003e\n\u003e ```dart\n\u003e CupertinoButton(\n\u003e   child: Text(\"Continue\"),\n\u003e   onPressed: () {},\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e \"Continue\".text().cupertinoButton(onPressed: () {})\n\u003e ```\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n### 🖲️ `button` - Instantly Turn Any Widget into a Button\n\nWrap any widget in a Material Design button with a single method. These extensions let you create `ElevatedButton`, `FilledButton`, `OutlinedButton`, and `TextButton` variants with or without icons—without boilerplate.\n\n#### ✅ Supported Types\n\n- `elevatedButton({onPressed})`\n- `elevatedIconButton({onPressed, icon})`\n- `filledButton({onPressed})`\n- `filledTonalButton({onPressed})`\n- `filledIconButton({onPressed, icon})`\n- `filledTonalIconButton({onPressed, icon})`\n- `outlinedButton({onPressed})`\n- `outlinedIconButton({onPressed, icon})`\n- `textButton({onPressed})`\n- `textIconButton({onPressed, icon})`\n\nEach method supports full customization via Flutter's native parameters:\n`style`, `focusNode`, `clipBehavior`, `onHover`, `autofocus`, `statesController`, and more.\n\n---\n\n#### 🧪 Examples\n\n```dart\n// Basic elevated button\nText(\"Submit\").elevatedButton(onPressed: () =\u003e print(\"Tapped\"))\n```\n\n```dart\n// Filled button with icon\nText(\"Send\").filledIconButton(\n  onPressed: () =\u003e print(\"Sent\"),\n  icon: const Icon(Icons.send),\n)\n```\n\n```dart\n// Text button, semantic only\nText(\"Cancel\").textButton(onPressed: () =\u003e print(\"Canceled\"))\n```\n\n```dart\n// Outlined button with icon and custom style\nText(\"Info\").outlinedIconButton(\n  onPressed: () {},\n  icon: const Icon(Icons.info_outline),\n  style: OutlinedButton.styleFrom(\n    foregroundColor: Colors.blue,\n  ),\n)\n```\n\n---\n\n\u003e 💡 Instead of writing:\n\u003e\n\u003e ```dart\n\u003e ElevatedButton(\n\u003e   onPressed: () {},\n\u003e   child: Text(\"Confirm\"),\n\u003e )\n\u003e ```\n\u003e\n\u003e Just write:\n\u003e\n\u003e ```dart\n\u003e \"Confirm\".text().elevatedButton(onPressed: () {})\n\u003e ```\n\n_[⤴️ Back](#-all-exui-extensions) → All `exui` Extensions_\n\n---\n\n## 🔗 License MIT © Jozz\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://buymeacoffee.com/yosefd99v\" target=\"https://buymeacoffee.com/yosefd99v\"\u003e\n    ☕ Enjoying this package? You can support it here.\n  \u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjozzdart%2Fexui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjozzdart%2Fexui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjozzdart%2Fexui/lists"}