GitHub - jozzdart/exui: Build your UI faster. No boilerplate, no dependencies, just powerful widget extensions.

Everything your widgets wish they had.

Accelerate your Flutter UI development, without compromising clarity.
exui helps you build clean, maintainable UIs faster, with no wrappers and zero boilerplate.

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.

Designed 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.

✅ Features

Extensions - for most used Flutter widgets. Same names, same behavior.
Lightweight and efficient - wraps existing widgets without creating new classes.
Actively maintained - Production-ready and continuously evolving.
Zero dependencies - Pure Dart. No bloat. Add it to any project safely.
Battle-tested - backed by hundreds of unit tests to ensure safety and reliability.
Exceptional documentation - every extension is well documented with clear examples and fast navigation.

✨ All `exui` Extensions:

Each section below links to detailed documentation for a specific extension group. (Emojis only added to distinguish easily between extensions)

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.

`exui` Libraries

Library	Description
`exui/exui.dart`	Core extensions for pure Flutter. Lightweight and universal.
`exui/material.dart`	Adds extensions tailored to Material widgets and components.
`exui/cupertino.dart`	Adds extensions for Cupertino widgets and iOS-style components.

Material Extensions (Google)

🖲️ button - buttons
🎨 coloredBox - background color

`exui` Vision

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.

This 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.

Whether 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.

Here are just a few examples:

📏 Padding

With exui:

Text("Hello").paddingAll(16)

Without:

Padding(
  padding: EdgeInsets.all(16),
  child: Text("Hello"),
)

With additional extensions for quickly adding specific padding: paddingHorizontal, paddingVertical, paddingOnly, paddingSymmetric, paddingLeft, paddingRight, paddingTop, paddingBottom

↔️ Expanded

With exui:

Text("Stretch me").expanded3

Without:

Expanded(
  flex: 3,
  child: Text("Stretch me"),
)

With additional extensions for quickly adding specific flex values: expanded2, expanded3, expanded4, expanded5, expanded6, expanded7, expanded8 or expandedFlex(int)

🎯 Center

With exui:

Icon(Icons.star).center()

Without:

Center(
  child: Icon(Icons.star),
)

With additional extensions for quickly adding specific center factors: centerWidth(double), centerHeight(double) or with parameters center({widthFactor, heightFactor})

↕️ Gaps

With exui:

Column(
  children: [
    Text("A"),
    16.gapColumn,
    Text("B"),
  ],
)

Without:

Column(
  children: [
    Text("A"),
    SizedBox(height: 16),
    Text("B"),
  ],
)

With additional extensions for quickly adding specific gap values: gapRow, gapColumn, gapVertical, gapHorizontal etc.

👁️ Visibility

With exui:

Text("Visible?").visibleIf(showText)

Without:

showText ? Text("Visible?") : const SizedBox.shrink()

With additional extensions for quickly adding specific visibility conditions: hide() visibleIfNot(bool) or visibleIfNull(bool) and more.

🚧 Constraints

With exui:

Image.asset("logo.png").maxWidth(200)

Without:

ConstrainedBox(
  constraints: BoxConstraints(maxWidth: 200),
  child: Image.asset("logo.png"),
)

With additional extensions for quickly adding specific constraints: constrainedWidth, constrainedHeight, minWidth, maxWidth, minHeight, maxHeight or with parameters constrained({minWidth, maxWidth, minHeight, maxHeight}) or constrainedBox(BoxConstraints)

These are just a few of the 200+ utilities in exui. Every method is chainable, production-safe, and built with clarity in mind.

From layout to constraints, visibility to spacing — exui keeps your UI code clean, fast, and Flutter-native.

Welcome to exui, I hope it'll save you time like it did for me (:

📏 `padding` — Add Padding to Any Widget

Apply padding effortlessly with readable, chainable methods. These extensions wrap your widget in a Padding widget using concise, expressive syntax.

padding(EdgeInsets) — Use any EdgeInsets object directly.
paddingAll(double) — Uniform padding on all sides.
paddingOnly({left, top, right, bottom}) — Custom padding per side.
paddingSymmetric({horizontal, vertical}) — Padding for x/y axes.
paddingHorizontal(double) — Shorthand for horizontal-only padding.
paddingVertical(double) — Shorthand for vertical-only padding.
Per-side utilities:
- paddingLeft(double)
- paddingRight(double)
- paddingTop(double)
- paddingBottom(double)

All methods return a wrapped Padding widget and can be freely chained with other extensions.

🧪 Examples

// 12px padding on all sides
MyWidget().paddingAll(12);

// 16px left and right, 8px top and bottom
MyWidget().paddingSymmetric(horizontal: 16, vertical: 8);

// 10px padding only on the left
MyWidget().paddingLeft(10);

// Custom per-side padding
MyWidget().paddingOnly(left: 8, top: 4, bottom: 12);

💡 Why use this? Instead of writing:

Padding(
  padding: EdgeInsets.symmetric(horizontal: 16),
  child: MyWidget(),
)

Just write:

MyWidget().paddingHorizontal(16)

⤴️ Back → All exui Extensions

🎯 `center` — Center Your Widget with Optional Factors

Effortlessly 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.

center({widthFactor, heightFactor}) — Fully customizable centering.
centerWidth(double?) — Center with horizontal shrink-wrapping only.
centerHeight(double?) — Center with vertical shrink-wrapping only.

All methods return a Center widget and can be seamlessly chained with other extensions.

🧪 Examples

// Center without size constraints
MyWidget().center();

// Center and shrink-wrap width only
MyWidget().centerWidth(1);

// Center and shrink-wrap height only
MyWidget().centerHeight(1);

// Fully customized centering
MyWidget().center(widthFactor: 0.8, heightFactor: 0.5);

💡 Instead of writing:
Center(
  widthFactor: 1,
  child: MyWidget(),
)
Just write:
MyWidget().centerWidth(1)

⤴️ Back → All exui Extensions

↔️ `expanded` - Make Widgets Fill Available Space

Add 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.

expandedFlex([int flex = 1]) — Wraps the widget in Expanded with an optional flex.
expanded1 — Shorthand for Expanded(flex: 1).

Predefined shorthand getters for fixed flex values:
expanded2, expanded3, expanded4, expanded5, expanded6, expanded7, expanded8

Use them in Row, Column, or Flex to control space distribution without nesting or repetition.

🧪 Examples

// Flex: 1 (default)
MyWidget().expanded1;

// Flex: 2
MyWidget().expanded2;

// Flex: 5
MyWidget().expandedFlex(5);

💡 Instead of writing:
Expanded(
  flex: 3,
  child: MyWidget(),
)
Just write:
MyWidget().expanded3

⤴️ Back → All exui Extensions

🧬 `flex` — Flexible Layouts with Fine-Tuned Control

Wrap 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.

flex({int flex, FlexFit fit}) — Custom flex and fit values (default: flex: 1, fit: FlexFit.loose)
flexLoose(int) — Loose-fit shortcut
flexTight(int) — Tight-fit shortcut

Predefined flex shortcuts (default fit: loose):
flex2(), flex3(), flex4(), flex5(), flex6(), flex7(), flex8()

All methods return a Flexible widget and are safe to chain with other layout or styling extensions.

🧪 Examples

// Default: flex 1, loose fit
MyWidget().flex();

// Predefined: flex 3, loose fit
MyWidget().flex3();

// Custom: flex 4, tight fit
MyWidget().flex(flex: 4, fit: FlexFit.tight);

// Loose-fit with custom flex
MyWidget().flexLoose(2);

// Tight-fit with custom flex
MyWidget().flexTight(6);

💡 Instead of writing:

Flexible(
  flex: 3,
  fit: FlexFit.tight,
  child: MyWidget(),
)

Just write:

MyWidget().flexTight(3)

⤴️ Back → All exui Extensions

📐 `align` — Position a Widget Precisely

Align 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.

align({ alignment, widthFactor, heightFactor }) — Custom alignment with optional size factors.
alignCenter() — Center of parent (default).
Top alignment:
- alignTopLeft()
- alignTopCenter()
- alignTopRight()
Center alignment:
- alignCenterLeft()
- alignCenterRight()
Bottom alignment:
- alignBottomLeft()
- alignBottomCenter()
- alignBottomRight()

All methods return an Align widget and are safe to use inside any layout context.

🧪 Examples

// Center the widget (default)
MyWidget().alignCenter();

// Align to bottom-right
MyWidget().alignBottomRight();

// Top-left aligned with width factor
MyWidget().alignTopLeft(widthFactor: 2);

💡 Instead of writing:

Align(
  alignment: Alignment.bottomRight,
  child: MyWidget(),
)

Just write:

MyWidget().alignBottomRight()

🧭 When to use positioned vs aligned
Use .positioned() inside a Stack when you need precise pixel placement (top, left, etc.).
Use .aligned() when you want relative alignment (like centering) within any parent.

⚠️ .positioned() only works inside a Stack. .aligned() works almost anywhere.

⤴️ Back → All exui Extensions

📍 `positioned` — Position Widgets Inside a Stack

Easily 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.

positioned({left, top, right, bottom, width, height}) — Full Positioned wrapper with optional constraints.
positionedTop(double) — Position from top.
positionedBottom(double) — Position from bottom.
positionedLeft(double) — Position from left.
positionedRight(double) — Position from right.
positionedWidth(double) — Set width directly.
positionedHeight(double) — Set height directly.

All methods return a Positioned widget and are designed to be composed fluently.

🧪 Examples

// Position 10px from top and left
MyWidget().positioned(top: 10, left: 10);

// Set only the width, auto-positioned
MyWidget().positionedWidth(200);

// Position from bottom with fixed height
MyWidget().positionedBottom(0).positionedHeight(60);

// Custom full placement
MyWidget().positioned(top: 12, right: 16, width: 150);

💡 Instead of writing:

Positioned(
  top: 12,
  right: 16,
  width: 150,
  child: MyWidget(),
)

Just write:

MyWidget().positioned(top: 12, right: 16, width: 150)

🧭 When to use positioned vs aligned
Use .positioned() inside a Stack when you need precise pixel placement (top, left, etc.).
Use .aligned() when you want relative alignment (like centering) within any parent.

⚠️ .positioned() only works inside a Stack. .aligned() works almost anywhere.

⤴️ Back → All exui Extensions

🔳 `intrinsic` — Size Widgets to Their Natural Dimensions

Wrap 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.

intrinsicHeight() — Wraps in IntrinsicHeight.
intrinsicWidth() — Wraps in IntrinsicWidth with default options.
intrinsicWidthWith({stepWidth, stepHeight}) — Custom step values.
intrinsicWidthStepWidth(double) — Set stepWidth only.
intrinsicWidthStepHeight(double) — Set stepHeight only.

All methods return intrinsic wrappers that measure content and size accordingly—ideal for fine-tuned layout control.

🧪 Examples

// Wrap with IntrinsicHeight
MyWidget().intrinsicHeight();

// Wrap with IntrinsicWidth (default)
MyWidget().intrinsicWidth();

// Set stepWidth to 100
MyWidget().intrinsicWidthStepWidth(100);

// Set both stepWidth and stepHeight
MyWidget().intrinsicWidthWith(
  stepWidth: 80,
  stepHeight: 40,
);

💡 Instead of writing:

IntrinsicWidth(
  stepHeight: 40,
  child: MyWidget(),
)

Just write:

MyWidget().intrinsicWidthStepHeight(40)

⚠️ Use intrinsic widgets with care — they can be expensive to layout and should only be used when needed for dynamic content sizing.

⤴️ Back → All exui Extensions

➖ `margin` — Add Outer Spacing Around Widgets

Add 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.

margin(EdgeInsets) — Use any EdgeInsets object directly.
marginAll(double) — Equal margin on all sides.
marginOnly({left, top, right, bottom}) — Custom margin per side.
marginSymmetric({horizontal, vertical}) — Horizontal & vertical margin.
marginHorizontal(double) — Shorthand for horizontal-only margin.
marginVertical(double) — Shorthand for vertical-only margin.
One-sided margin helpers:
- marginLeft(double)
- marginRight(double)
- marginTop(double)
- marginBottom(double)

All methods return a wrapped Container and can be freely chained with other extensions.

🧪 Examples

// 16px margin on all sides
"Card".text().marginAll(16);

// 24px horizontal, 12px vertical
"Tile".text().marginSymmetric(horizontal: 24, vertical: 12);

// 8px margin only on top
"Header".text().marginTop(8);

// Custom side-by-side margin
"Box".text().marginOnly(left: 6, bottom: 10);

💡 Why use this? Instead of writing:

Container(
  margin: EdgeInsets.only(left: 8, top: 4),
  child: MyWidget(),
)

Just write:

MyWidget().marginOnly(left: 8, top: 4)

⚖️ Margin vs Padding
Use padding to add spacing inside a widget's boundary — like space around text in a button.
Use margin to add spacing outside a widget — like separating it from other widgets.

🟢 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.

⤴️ Back → All exui Extensions

↕️ `gap` - Add Spacing Using Number Extensions

Use 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.

sizedWidth — SizedBox(width: this)
sizedHeight — SizedBox(height: this)
gapHorizontal / gapRow / gapWidth — Aliases for horizontal spacing
gapVertical / gapColumn / gapHeight — Aliases for vertical spacing

All extensions return a SizedBox and are ideal for use in layouts to avoid magic numbers and improve readability.

🧪 Examples

// Horizontal space of 16
16.gapHorizontal,

// Vertical space of 8
8.gapVertical,

// SizedBox with explicit width
2.5.sizedWidth,

// SizedBox with explicit height
32.sizedHeight,

// Clean Row layout
Row(
  children: [
    WidgetOne(),
    12.gapRow,
    WidgetTwo(),
  ],
)

// Clean Column layout
Column(
  children: [
    WidgetOne(),
    16.gapColumn,
    WidgetTwo(),
  ],
)

💡 Use .gapRow and .gapColumn when working inside Row or Column widgets for clarity and intent-based naming.

⤴️ Back → All exui Extensions

🧱 `row` / `column` — Instantly Wrap Widgets in Flex Layouts

Effortlessly 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.

[].row() / [].column() — Wrap a list of widgets in a Row or Column.
.row() / .column() — Wrap a single widget in a Row or Column.

✅ Fully supports all Row and Column parameters, including:
spacing, mainAxisAlignment, crossAxisAlignment, and more.

🧪 Examples

// Two widgets in a Row with spacing
[
  WidgetOne(),
  WidgetTwo(),
].row(spacing: 12);

// Vertical layout with alignment and spacing
[
  WidgetOne(),
  WidgetTwo(),
].column(
  mainAxisAlignment: MainAxisAlignment.center,
  spacing: 8,
);

// Single widget inside a Row
MyWidget().row();

// Puts a single widget in a column with center alignment
MyWidget().column(
  mainAxisAlignment: MainAxisAlignment.center,
);

💡 Instead of writing:

Column(
  spacing: 8,
  children: [
    WidgetOne(),
    WidgetTwo(),
  ],
)

Just write:

[
   WidgetOne(),
   WidgetTwo(),
].column(spacing: 8)

⤴️ Back → All exui Extensions

🧭 `row` / `column` — Rapid Alignment Extensions for Flex Layouts

Stop 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.

🧩 Functional Groups

All extensions are available for both Row and Column, following the same structure:

✅ columnMain* — Sets mainAxisAlignment, customize others
✅ columnCross* — Sets crossAxisAlignment, customize others
✅ column<Main><Cross>() — Aligns both axes (e.g., columnCenterStart)

✅ rowMain* — Sets mainAxisAlignment, customize others
✅ rowCross* — Sets crossAxisAlignment, customize others
✅ row<Main><Cross>() — Aligns both axes (e.g., rowCenterStart)

All methods accept all standard layout parameters, including:

mainAxisSize
textDirection
verticalDirection
textBaseline
spacing

✅ Why Use These?

💡 Instead of writing:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [...],
)

Just write:

[...].columnCenterStart()

Or instead of:

Row(
  spacing: 12,
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [...],
)

Just write:

[...].rowSpaceBetweenEnd(spacing: 12)

These shortcuts reduce boilerplate and keep your layout code highly consistent and declarative—perfect for design systems, builder UIs, and everyday Flutter apps.

📚 Available `column` Methods

`columnMain`<choose alignment>`()`

columnMainStart() — MainAxisAlignment.start
columnMainCenter() — MainAxisAlignment.center
columnMainEnd() — MainAxisAlignment.end
columnMainSpaceAround() — MainAxisAlignment.spaceAround
columnMainSpaceBetween() — MainAxisAlignment.spaceBetween
columnMainSpaceEvenly() — MainAxisAlignment.spaceEvenly

`columnCross`<choose alignment>`()`

columnCrossStart() — CrossAxisAlignment.start
columnCrossCenter() — CrossAxisAlignment.center
columnCrossEnd() — CrossAxisAlignment.end
columnCrossBaseline() — CrossAxisAlignment.baseline
columnCrossStretch() — CrossAxisAlignment.stretch

`column`<choose main alignment><choose cross alignment>`()`

columnStartStart()
columnStartCenter()
columnStartEnd()
columnStartBaseline()
columnStartStretch()

columnCenterStart()
columnCenterCenter()
columnCenterEnd()
columnCenterBaseline()
columnCenterStretch()

columnEndStart()
columnEndCenter()
columnEndEnd()
columnEndBaseline()
columnEndStretch()

columnSpaceAroundStart()
columnSpaceAroundCenter()
columnSpaceAroundEnd()
columnSpaceAroundBaseline()
columnSpaceAroundStretch()

columnSpaceBetweenStart()
columnSpaceBetweenCenter()
columnSpaceBetweenEnd()
columnSpaceBetweenBaseline()
columnSpaceBetweenStretch()

columnSpaceEvenlyStart()
columnSpaceEvenlyCenter()
columnSpaceEvenlyEnd()
columnSpaceEvenlyBaseline()
columnSpaceEvenlyStretch()

🧪 Examples

// A vertically-centered column, aligned to start
[
  Icons.image.icon(), // same as Icon(Icons.image)
  Text("Profile"),
].columnCenterStart();

// Use main alignment only, keep full control of cross
[
  Text("Hello"),
  Text("World"),
].columnMainSpaceAround(crossAxisAlignment: CrossAxisAlignment.end);

// Use cross alignment only, keep full control of main
[
  Text("Item 1"),
  "Item 2".text(), // same as Text("Item 2")
].columnCrossStretch(mainAxisAlignment: MainAxisAlignment.end);

📚 Available `row` Methods

`rowMain`<choose alignment>`()`

rowMainStart()
rowMainCenter()
rowMainEnd()
rowMainSpaceAround()
rowMainSpaceBetween()
rowMainSpaceEvenly()

`rowCross`<choose alignment>`()`

rowCrossStart()
rowCrossCenter()
rowCrossEnd()
rowCrossBaseline()
rowCrossStretch()

`row`<choose main alignment><choose cross alignment>`()`

rowStartStart()
rowStartCenter()
rowStartEnd()
rowStartBaseline()
rowStartStretch()

rowCenterStart()
rowCenterCenter()
rowCenterEnd()
rowCenterBaseline()
rowCenterStretch()

rowEndStart()
rowEndCenter()
rowEndEnd()
rowEndBaseline()
rowEndStretch()

rowSpaceAroundStart()
rowSpaceAroundCenter()
rowSpaceAroundEnd()
rowSpaceAroundBaseline()
rowSpaceAroundStretch()

rowSpaceBetweenStart()
rowSpaceBetweenCenter()
rowSpaceBetweenEnd()
rowSpaceBetweenBaseline()
rowSpaceBetweenStretch()

rowSpaceEvenlyStart()
rowSpaceEvenlyCenter()
rowSpaceEvenlyEnd()
rowSpaceEvenlyBaseline()
rowSpaceEvenlyStretch()

🧪 Examples

// Centered row, aligned to top
[
  WidgetOne(),
  WidgetTwo(),
].rowCenterStart();

// Horizontal space between, vertically stretched
[
  WidgetOne(),
  WidgetTwo(),
].rowSpaceBetweenStretch();

// Apply only main alignment, customize cross
[
  WidgetOne(),
  WidgetTwo(),
].rowMainEnd(crossAxisAlignment: CrossAxisAlignment.start);

// Apply only cross alignment, keep full control of main
[
  WidgetOne(),
  WidgetTwo(),
].rowCrossEnd(mainAxisAlignment: MainAxisAlignment.center);

💡 These extensions make horizontal layout code extremely fast and clean — especially when building repetitive layouts across your app.

✅ Full support for layout parameters like spacing, mainAxisSize, textDirection, and more — no flexibility lost.

⤴️ Back → All exui Extensions

🧊 `stack` — Overlay Widgets with Full Stack Control

Build layered UI structures with intuitive, chainable extensions. These methods let you create Stack layouts directly from a List<Widget> and configure fit modes easily with named variants.

stack() — Wrap a list in a standard Stack (StackFit.loose by default).
stackLoose() — Equivalent to StackFit.loose (default).
stackExpand() — Children fill the available space (StackFit.expand).
stackPassthrough() — Children keep their intrinsic size (StackFit.passthrough).

✅ Fully supports all native Stack parameters: alignment, textDirection, fit, and clipBehavior.

🧪 Examples

// Default stack with loose fit
[
  WidgetOne(),
  WidgetTwo().positionedTop(0),
].stack();

// Stack with expanded fit
[
  WidgetOne(),
  WidgetTwo().positionedBottom(0),
].stackExpand();

// Stack with passthrough sizing
[
  WidgetOne(),
  WidgetTwo(),
].stackPassthrough();

// Stack with custom alignment and clip behavior
[
  ...someWidgets,
].stack(
  alignment: Alignment.center,
  clipBehavior: Clip.none,
);

// A single widget wrapped in a Stack
MyWidget().stack();

💡 Instead of writing:

Stack(
  fit: StackFit.expand,
  alignment: Alignment.center,
  children: [ ... ],
)

Just write:

[...].stackExpand(alignment: Alignment.center)

⤴️ Back → All exui Extensions

👁️ `visible` - Conditional Visibility for Widgets

Simplify 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.

visibleIf(bool) — Show this widget only if the condition is true; otherwise returns an empty box.
visibleIfNot(bool) — Inverse of visibleIf.
visibleIfNull(Object?) — Show this widget only if the given value is null.
visibleIfNotNull(Object?) — Show this widget only if the given value is not null.
hide() — Always returns an empty widget (SizedBox.shrink()).
invisible() — Alias of hide() for readability.
boxShrink() — Returns SizedBox.shrink() directly.

All methods return valid widgets and are safe to chain inside build methods.

🧪 Examples

MyWidget().visibleIf(isLoggedIn); // Show only if condition is true

MyWidget().visibleIfNot(isLoggedIn); // Show only if condition is false

MyWidget().visibleIfNull(user); // Show only if value is null

MyWidget().visibleIfNotNull(user); // Show only if value is not null

MyWidget().hide(); // Always hidden

MyWidget().invisible(); // Same as hide(), for clarity

final emptyBox = MyWidget().boxShrink(); // Returns an empty widget directly

💡 Why use this? Instead of writing:
condition ? MyWidget() : const SizedBox.shrink()
Just write:
MyWidget().visibleIf(condition)

🔒 These methods never break layout structure — they return a valid widget in all cases and help you write safer conditional UI.

⤴️ Back → All exui Extensions

🌫️ `opacity` - Control Widget Transparency

Quickly 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.

opacity(double) — Set widget transparency using a 0.0–1.0 value.
opacityPercent(double) — Use percentage (0–100) for readability.
opacityHalf() — Set opacity to 50%.
opacityQuarter() — Set opacity to 25%.
opacityZero() — Set opacity to 0.
opacityTransparent() — Alias of opacityZero().
opacityInvisible() — Alias of opacityZero().

All methods return a wrapped Opacity widget and are safe to chain with other extensions.

🧪 Examples

Set to 70% visible

MyWidget().opacity(0.7);

Set to 40% using percent

MyWidget().opacityPercent(40);

MyWidget().opacityHalf(); // Half visible (0.5)

MyWidget().opacityQuarter(); // Quarter visible (0.25)

💡 Instead of writing:
Opacity(
  opacity: value,
  child: MyWidget(),
)
Just write:
MyWidget().opacity(value)
Use .opacityPercent() when working with designer specs or to make your code more intuitive at a glance.

⤴️ Back → All exui Extensions

📱 `safeArea` — Add SafeArea Padding Declaratively

Easily wrap widgets in SafeArea using expressive, chainable extensions. These methods let you control which sides are padded—without nesting or verbose boilerplate.

safeArea({left, top, right, bottom, minimum, maintainBottomViewPadding}) — Full control over all sides and padding behavior.
safeAreaAll() — Padding on all sides.
safeAreaNone() — No padding at all.
safeAreaOnlyTop() / safeAreaOnlyBottom() — Top or bottom only.
safeAreaOnlyLeft() / safeAreaOnlyRight() — Left or right only.
safeAreaOnlyHorizontal() — Left + right.
safeAreaOnlyVertical() — Top + bottom.

All methods return a SafeArea widget wrapping the original widget.

🧪 Examples

MyWidget().safeArea(); // Same as wrap in SafeArea;

// Only top padded (e.g., below status bar)
MyWidget().safeAreaOnlyTop();

// Bottom safe area only (e.g., above iPhone home indicator)
MyWidget().safeAreaOnlyBottom();

// Custom safe area: only horizontal
MyWidget().safeAreaOnlyHorizontal();

// No SafeArea applied
MyWidget().safeAreaNone();

💡 Instead of writing:
SafeArea(
  child: MyWidget(),
)
Just write:
MyWidget().safeArea()

⤴️ Back → All exui Extensions

👆 `gesture` — Add Tap, Drag & Press Events Easily

Eliminate manual GestureDetector nesting with intuitive, chainable gesture methods. These extensions make it effortless to attach any gesture to any widget.

onTap(VoidCallback) — Handle basic tap gestures.
onDoubleTap(VoidCallback) — Respond to double-tap gestures.
onLongPress(VoidCallback) — Handle long presses.
onTapDown(...), onTapUp(...), onTapCancel(...) — Full tap phase handling.
onSecondaryTap(...), onTertiaryTapDown(...), etc. — Full multi-touch support.
onVerticalDrag..., onHorizontalDrag..., onPan... — Add drag gestures with full phase support.
onScale... — Handle pinch-to-zoom gestures.
onForcePress... — Support for pressure-sensitive gestures.
gestureDetector(...) — Attach multiple gestures at once in one call.

All methods return a wrapped GestureDetector and support optional customization of behavior, semantics, and supported devices.

🧪 Examples

// Basic tap interaction
MyWidget().onTap(() => print("Tapped!"));

// Double tap
MyWidget().onDoubleTap(() => print("Double tapped"));

// Handle tap down position
MyWidget().onTapDown((details) {
  print("Tap down at ${details.globalPosition}");
});

// Add vertical drag support
MyWidget().onVerticalDragUpdate((details) {
  print("Dragging: ${details.delta.dy}");
});

// Combine multiple gestures
MyWidget().gestureDetector(
  onTap: () => print("Tap"),
  onLongPress: () => print("Long press"),
  onPanUpdate: (details) => print("Panning"),
);

💡 Instead of writing:

GestureDetector(
  onTap: () => doSomething(),
  child: MyWidget(),
)

Just write:

MyWidget().onTap(() => doSomething())

⤴️ Back → All exui Extensions

🦸 `hero` — Add Seamless Shared Element Transitions

Effortlessly wrap any widget in a Hero for smooth page-to-page transitions. Customize behavior with optional parameters for animations, flight behavior, and placeholders.

hero(String tag) — Wraps the widget in a Hero with the given tag.
Optional parameters:
- createRectTween(...) — Customize the transition animation path.
- flightShuttleBuilder(...) — Override the animation widget during flight.
- placeholderBuilder(...) — Placeholder shown during transition loading.
- transitionOnUserGestures — Allow gesture-driven transitions.

All options mirror the native Hero widget and can be configured inline.

🧪 Examples

// Basic shared element transition
MyWidget().hero("profile-avatar");

// Custom placeholder
MyWidget()
  .hero(
    "title-hero",
    placeholderBuilder: (context, size, child) =>
        SizedBox.fromSize(size: size),
  );

// With custom flight behavior
MyWidget().hero(
  "star-icon",
  flightShuttleBuilder: (context, animation, direction, from, to) {
    return ScaleTransition(scale: animation, child: to.widget);
  },
);

💡 Instead of writing:

Hero(
  tag: "avatar",
  child: Image.asset("avatar.png"),
)

Just write:

Image.asset("avatar.png").hero("avatar")

⤴️ Back → All exui Extensions

📦 `sizedBox` — Wrap Widgets in Fixed-Size Boxes

Quickly wrap any widget in a SizedBox with a specified width, height, or both. These extensions improve readability and reduce boilerplate when sizing widgets inline.

sizedBox({width, height}) — Wrap with custom width and/or height.
sizedWidth(double) — Set only the width.
sizedHeight(double) — Set only the height.

All methods return a SizedBox with your widget as the child, and are safe to chain.

🧪 Examples

// Fixed width and height
MyWidget().sizedBox(width: 120, height: 40);

// Only width
MyWidget().sizedWidth(200);

// Only height
MyWidget().sizedHeight(60);

💡 Instead of writing:

SizedBox(width: 120, height: 40, child: MyWidget())

Just write:

MyWidget().sizedBox(width: 120, height: 40)

⤴️ Back → All exui Extensions

🎨 `decoratedBox` — Add Backgrounds, Borders, Gradients & Effects

Decorate 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.

decoratedBox(...) — Core method using any Decoration.
decoratedBoxDecoration(...) — Configure BoxDecoration inline with full control.
imageBox(...) — Add a background image with all DecorationImage options.
gradientBox(Gradient) — Add a linear, radial, or sweep gradient.
shadowedBox(...) — Apply shadow effects with offset, blur, spread.
borderedBox(...) — Add a border (and optional border radius).
shapedBox(BoxShape) — Change the shape (e.g., circle, rectangle).
circularBorderBox(...) — Draw a colored, circular border with width and radius.

All methods return a DecoratedBox and can be safely combined with padding, opacity, or gesture extensions.

🧪 Examples

// Apply a gradient background
MyWidget().gradientBox(
  LinearGradient(colors: [Colors.purple, Colors.blue]),
);

// Add a background image
MyWidget().imageBox(
  image: NetworkImage("https://example.com/image.png"),
  fit: BoxFit.cover,
);

// Add a shadow
MyWidget().shadowedBox(
  offset: Offset(2, 2),
  blurRadius: 6,
);

// Circular border
MyWidget().circularBorderBox(
  radius: 12,
  color: Colors.red,
  width: 2,
);

// Full decorated box manually
MyWidget().decoratedBoxDecoration(
  color: Colors.grey.shade100,
  border: Border.all(color: Colors.black26),
  borderRadius: BorderRadius.circular(8),
);

💡 Instead of wrapping your widget manually like this:

DecoratedBox(
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.circular(12),
  ),
  child: MyWidget(),
)

You can write:

MyWidget().decoratedBoxDecoration(
  color: Colors.red,
  borderRadius: BorderRadius.circular(12),
)

⤴️ Back → All exui Extensions

🚧 `constrained` — Add Size Limits to Widgets

Apply size constraints directly to any widget without manually wrapping in ConstrainedBox. These extensions make layout constraints clean, readable, and fully chainable.

constrained({minWidth, maxWidth, minHeight, maxHeight}) — General constraint utility.
constrainedBox(BoxConstraints) — Use custom BoxConstraints directly.
constrainedWidth({min, max}) — Horizontal size limits.
constrainedHeight({min, max}) — Vertical size limits.
minWidth(double) / maxWidth(double) — Individual width constraints.
minHeight(double) / maxHeight(double) — Individual height constraints.

All methods return a ConstrainedBox and are safe to chain in layout compositions.

🧪 Examples

// Limit to a width between 100–200
MyWidget().constrainedWidth(min: 100, max: 200);

// Limit to a height between 50–100
MyWidget().constrainedHeight(min: 50, max: 100);

// Only limit max height
MyWidget().maxHeight(120);

// Fully custom constraints
MyWidget().constrained(
  minWidth: 80,
  maxWidth: 150,
  minHeight: 40,
  maxHeight: 90,
);

// Using BoxConstraints directly
MyWidget().constrainedBox(
  constraints: BoxConstraints.tightFor(width: 100, height: 40),
);

💡 Instead of writing:

ConstrainedBox(
  constraints: BoxConstraints(
    minWidth: 100,
    maxWidth: 200,
  ),
  child: MyWidget(),
)

Just write:

MyWidget().constrainedWidth(min: 100, max: 200)

⤴️ Back → All exui Extensions

🟥 `coloredBox` — Add Background Color to Any Widget

Wrap 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.

coloredBox(Color) — Wraps the widget in a ColoredBox with the given background color.

Use this to apply color styling in layout compositions without using Container, keeping your UI lightweight.

🧪 Example

// Red background
MyWidget().coloredBox(Colors.red);

💡 Why use this? Instead of writing:
ColoredBox(
  color: Colors.blue,
  child: MyWidget(),
)
Just write:
MyWidget().coloredBox(Colors.blue)

✅ A minimal, performant way to color backgrounds without unnecessary overhead.

⤴️ Back → All exui Extensions

🎨 `Material coloredBox` — Background Color with One Line

Apply 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.

No need to write Container or manage BoxDecoration—just add color directly to any widget in one line.

All extensions return a ColoredBox.

🌈 Available Colors

redBox() / redAccentBox()
greenBox() / greenAccentBox()
blueBox() / blueAccentBox()
yellowBox() / yellowAccentBox()
orangeBox() / orangeAccentBox()
purpleBox() / purpleAccentBox()
deepPurpleBox() / deepPurpleAccentBox()
pinkBox() / pinkAccentBox()
brownBox()
tealBox() / tealAccentBox()
cyanBox() / cyanAccentBox()
lightBlueBox() / lightBlueAccentBox()
lightGreenBox() / lightGreenAccentBox()
limeBox() / limeAccentBox()
greyBox()
blackBox()
whiteBox()

🧪 Examples

// Add a red background
MyWidget().redBox();

// Success message with green accent
MyWidget().greenAccentBox();

// Stylized button background
MyWidget().blueBox().paddingAll(12);

💡 Instead of writing:
ColoredBox(
  color: Colors.red,
  child: MyWidget(),
)
Just write:
MyWidget().redBox()

⤴️ Back → All exui Extensions

🎨 `Cupertino coloredBox` — Apply iOS-Themed Background Colors

Quickly apply Cupertino-style background colors to any widget using expressive, pre-named methods. These extensions wrap your widget in a ColoredBox using native CupertinoColors.

redBox() / destructiveRedBox()
greenBox() / activeGreenBox()
blueBox() / activeBlueBox()
orangeBox() / orangeAccentBox()
yellowBox() / purpleBox() / pinkBox()
tealBox() / cyanBox() / brownBox()
greyBox() / blackBox() / whiteBox()
darkGrayBox() / lightGrayBox()

All methods return a ColoredBox using system-consistent Cupertino color values, ideal for quick prototyping and iOS-native look and feel.

🧪 Examples

// Apply iOS system red background
MyWidget().redBox();

// Use active Cupertino blue
MyWidget().activeBlueBox();

// Style with light gray background
MyWidget().lightGrayBox();

// Warning or alert color
MyWidget().orangeAccentBox();

💡 Instead of writing:

ColoredBox(
  color: CupertinoColors.systemTeal,
  child: MyWidget(),
)

Just write:

MyWidget().tealBox()

⤴️ Back → All exui Extensions

🪞 `fit` — Control How Widgets Scale to Fit

Wrap 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.

fittedBox({fit, alignment, clipBehavior}) — Base method with full control.
fitContain() — Preserves aspect ratio, fits within bounds.
fitCover() — Fills bounds, possibly cropping.
fitFill() — Stretches to fill bounds, ignoring aspect ratio.
fitScaleDown() — Only scales down, never up.
fitHeight() — Scales to match parent height.

All methods return a FittedBox and preserve your widget tree cleanly.

🧪 Examples

// Scale to fit within constraints
MyWidget().fitContain();

// Fill the available space
MyWidget().fitCover();

// Scale down only if too large
MyWidget().fitScaleDown();

// Stretch to fill all dimensions
MyWidget().fitFill();

💡 Instead of writing:
FittedBox(
  fit: BoxFit.cover,
  child: MyWidget(),
)
Just write:
MyWidget().fitCover()

⤴️ Back → All exui Extensions

📦 `container` — Wrap Any Widget in a Container

Easily 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.

container({...}) — Adds padding, margin, size, decoration, alignment, and more in a single call.

Supports all Container options:

width, height — Size constraints
color, decoration — Background and border styling
padding, margin — Inner and outer spacing
alignment — Align child within the container
clipBehavior, constraints — Additional layout control

🧪 Examples

// Wrap with background color and padding
MyWidget().container(
  color: const Color(0xFFE0E0E0),
  padding: const EdgeInsets.all(12),
);

// Add margin and align center
MyWidget().container(
  margin: const EdgeInsets.symmetric(vertical: 16),
  alignment: Alignment.center,
);

// Fully customized container
MyWidget().container(
  width: 150,
  height: 80,
  decoration: BoxDecoration(
    color: const Color(0xFF2196F3),
    borderRadius: BorderRadius.circular(12),
  ),
  alignment: Alignment.center,
);

💡 Instead of writing:

Container(
  padding: EdgeInsets.all(12),
  color: Colors.grey,
  child: MyWidget(),
)

Just write:

MyWidget().container(padding: EdgeInsets.all(12), color: Colors.grey)

⤴️ Back → All exui Extensions

✂️ `clip` - Clip Widgets into Shapes

Easily 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.

clipRRect({borderRadius}) — Clip with rounded corners using ClipRRect.
clipCircular([radius]) — Clip into a circle.
clipOval() — Clip into an oval or circle.
clipCircle() — Alias for clipOval() (semantic clarity).
clipPath({clipper}) — General-purpose custom path clipping.
clipSquircle([radiusFactor]) — Clip into a modern "squircle" shape.
clipContinuousRectangle([radiusFactor]) — Alias for clipSquircle().

All methods return wrapped Clip* widgets and are safe to chain.

🧪 Examples

// Rounded corners (16 radius)
Container().clipRRect(borderRadius: BorderRadius.circular(16));

// Circular/oval clip
Image.asset("avatar.png").clipCircle();

// Custom path clip (e.g. star shape)
MyWidget().clipPath(clipper: StarClipper());

// Squircle shape (iOS-style corners)
MyWidget().clipSquircle(2.5);

// Same as above but with alternative naming
MyWidget().clipContinuousRectangle(2.5);

💡 Instead of writing:

ClipRRect(
  borderRadius: BorderRadius.circular(12),
  child: MyWidget(),
)

Just write:

MyWidget().clipRRect(borderRadius: BorderRadius.circular(12))

⤴️ Back → All exui Extensions

📝 `text` — Turn Any String into a Text Widget

Effortlessly 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.

.text({...}) — Create a Text widget with any native Text constructor parameters.
.styledText({...}) — Configure full TextStyle in one place: font, color, spacing, shadows, decoration, and more.

Both methods return a standard Flutter Text widget — no wrappers, no magic.

🔹 Basic Text

"Hello world".text(); // same as Text("Hello world");

Text("Hello world"); // same as "Hello world".text();

🔹 Styled Text with Alignment

"Hello exui".text(
  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
  textAlign: TextAlign.center,
);

Text(
  "Hello exui",
  style: TextStyle(
    fontSize: 18,
    fontWeight: FontWeight.bold,
  ),
  textAlign: TextAlign.center,
);

🔹 Rich Styling in One Call

"Stylish!".styledText(
  fontSize: 24,
  fontWeight: FontWeight.w600,
  color: Colors.purple,
);

Text(
  "Stylish!",
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.w600,
    color: Colors.purple,
  ),
);

⤴️ Back → All exui Extensions

🎛️ `styled text` - Modify and Style `Text` Widgets Easily

Powerfully enhance your Text widgets with dozens of chainable extensions. Control alignment, overflow, semantics, and apply fine-grained styling—without verbose TextStyle blocks.

These extensions are non-intrusive, composable, and maintain the immutability of the original widget.

📐 Layout & Metadata Modifiers

textAlign(...)
textDirection(...)
locale(...)
softWrap(...)
overflow(...)
maxLines(...)
semanticsLabel(...)
widthBasis(...)
heightBehavior(...)
selectionColor(...)
strutStyle(...)
textScaler(...)

🎨 Style Extensions

Apply full or partial TextStyle changes with expressive one-liners:

fontSize(...)
fontWeight(...)
fontStyle(...)
letterSpacing(...)
wordSpacing(...)
height(...)
foreground(...) / background(...)
shadows(...)
fontFeatures(...) / fontVariations(...)
decoration(...)
decorationColor(...)
decorationStyle(...)
decorationThickness(...)
fontFamily(...) / fontFamilyFallback(...)
leadingDistribution(...)
debugLabel(...)

⚡ Expressive Shortcuts

Use simple methods for common typography tasks:

bold()
italic()
underline()
strikethrough()
boldItalic()
boldUnderline()
boldStrikethrough()

🧪 Example

"Hello World"
  .text()
  .fontSize(20)
  .boldItalic()
  .textAlign(TextAlign.center)
  .maxLines(2)
  .overflow(TextOverflow.ellipsis);

Or, apply full styling in one go:

"Sale!"
  .text()
  .styled(
    fontSize: 24,
    fontWeight: FontWeight.w900,
    decoration: TextDecoration.lineThrough,
    color: Colors.red,
  );

⤴️ Back → All exui Extensions

🔣 `icon` — Quickly Create and Style Icons

Easily 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.

🧩 On `IconData`

icon({...}) — Create an Icon from IconData with full styling options.
iconSized(double) — Shorthand for setting size.
iconFilled(double) — Set the fill level (for Material symbols).
iconColored(Color) — Apply color.

🧩 On `Icon`

.sized(double) — Change icon size.
.filled(double) — Set fill level.
.weight(double) / .grade(double) / .opticalSize(double) — Fine-tune variable font icons.
.colored(Color) — Change icon color.
.shadowed(List<Shadow>) — Add text-style shadows.
.semanticLabeled(String) — Set semantic label for accessibility.
.textDirectioned(TextDirection) — Set directionality.
.applyTextScaling(bool) — Respect or ignore text scaling.
.blendMode(BlendMode) — Control blend behavior.

All methods return a new Icon and preserve other properties unless overwritten.

🧪 Examples

Icons.settings.icon(size: 32, color: Colors.amber,);

// Create a red icon at 24px
Icons.home.iconSized(24).colored(Colors.red);

// Create and fill a Material symbol icon
Icons.favorite.iconFilled(1.0);

// Chain multiple style changes
Icons.star.icon().sized(32).filled(0.8).colored(Colors.amber);

💡 Instead of:

Icon(
  Icons.star,
  size: 32,
  color: Colors.amber,
  fill: 0.8,
)

Just write:

Icons.star.icon(size: 32, color: Colors.amber, fill: 0.8)

⤴️ Back → All exui Extensions

🍎 `cupertinoButton` — Turn Any Widget into an iOS Button

Transform 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.

cupertinoButton(...) — Standard iOS-style button.
cupertinoFilledButton(...) — Filled style, best for emphasis.
cupertinoTintedButton(...) — Tinted (outlined) style with subtle color emphasis.

Each method returns a CupertinoButton and supports all common options, including pressedOpacity, autofocus, borderRadius, and onLongPress.

🧪 Examples

// Basic Cupertino button
Text("Continue").cupertinoButton(onPressed: () {});

// Filled iOS-style button
Text("Submit").cupertinoFilledButton(onPressed: () {});

// Tinted iOS-style button with border and color
Text("Retry").cupertinoTintedButton(
  color: CupertinoColors.systemRed,
  onPressed: () {},
);

💡 Instead of writing:

CupertinoButton(
  child: Text("Continue"),
  onPressed: () {},
)

Just write:

"Continue".text().cupertinoButton(onPressed: () {})

⤴️ Back → All exui Extensions

🖲️ `button` - Instantly Turn Any Widget into a Button

Wrap 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.

✅ Supported Types

elevatedButton({onPressed})
elevatedIconButton({onPressed, icon})
filledButton({onPressed})
filledTonalButton({onPressed})
filledIconButton({onPressed, icon})
filledTonalIconButton({onPressed, icon})
outlinedButton({onPressed})
outlinedIconButton({onPressed, icon})
textButton({onPressed})
textIconButton({onPressed, icon})

Each method supports full customization via Flutter's native parameters: style, focusNode, clipBehavior, onHover, autofocus, statesController, and more.

🧪 Examples

// Basic elevated button
Text("Submit").elevatedButton(onPressed: () => print("Tapped"))

// Filled button with icon
Text("Send").filledIconButton(
  onPressed: () => print("Sent"),
  icon: const Icon(Icons.send),
)

// Text button, semantic only
Text("Cancel").textButton(onPressed: () => print("Canceled"))

// Outlined button with icon and custom style
Text("Info").outlinedIconButton(
  onPressed: () {},
  icon: const Icon(Icons.info_outline),
  style: OutlinedButton.styleFrom(
    foregroundColor: Colors.blue,
  ),
)

💡 Instead of writing:

ElevatedButton(
  onPressed: () {},
  child: Text("Confirm"),
)

Just write:

"Confirm".text().elevatedButton(onPressed: () {})

⤴️ Back → All exui Extensions

☕ Enjoying this package? You can support it here.

Name		Name	Last commit message	Last commit date
Latest commit History 166 Commits
example		example
lib		lib
test		test
.gitattributes		.gitattributes
.gitignore		.gitignore
.metadata		.metadata
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
analysis_options.yaml		analysis_options.yaml
pubspec.yaml		pubspec.yaml

License

jozzdart/exui

Folders and files

Latest commit

History

Repository files navigation

Everything your widgets wish they had.

✅ Features

✨ All exui Extensions:

Layout Manipulation

Layout Creation

Visibility, Transitions & Interactions

Containers & Effects

Widget Creation

exui Libraries

Cupertino Extensions (Apple)

Material Extensions (Google)

exui Vision

Here are just a few examples:

📏 Padding

↔️ Expanded

🎯 Center

↕️ Gaps

👁️ Visibility

🚧 Constraints

📏 padding — Add Padding to Any Widget

🧪 Examples

🎯 center — Center Your Widget with Optional Factors

🧪 Examples

↔️ expanded - Make Widgets Fill Available Space

🧪 Examples

🧬 flex — Flexible Layouts with Fine-Tuned Control

🧪 Examples

📐 align — Position a Widget Precisely

🧪 Examples

📍 positioned — Position Widgets Inside a Stack

🧪 Examples

🔳 intrinsic — Size Widgets to Their Natural Dimensions

🧪 Examples

➖ margin — Add Outer Spacing Around Widgets

🧪 Examples

↕️ gap - Add Spacing Using Number Extensions

🧪 Examples

🧱 row / column — Instantly Wrap Widgets in Flex Layouts

🧪 Examples

🧭 row* / column* — Rapid Alignment Extensions for Flex Layouts

🧩 Functional Groups

✅ Why Use These?

📚 Available column Methods

columnMain<choose alignment>()

columnCross<choose alignment>()

column<choose main alignment><choose cross alignment>()

🧪 Examples

📚 Available row Methods

rowMain<choose alignment>()

rowCross<choose alignment>()

row<choose main alignment><choose cross alignment>()

🧪 Examples

🧊 stack — Overlay Widgets with Full Stack Control

🧪 Examples

👁️ visible - Conditional Visibility for Widgets

🧪 Examples

🌫️ opacity - Control Widget Transparency

🧪 Examples

📱 safeArea — Add SafeArea Padding Declaratively

🧪 Examples

👆 gesture — Add Tap, Drag & Press Events Easily

🧪 Examples

🦸 hero — Add Seamless Shared Element Transitions

🧪 Examples

📦 sizedBox — Wrap Widgets in Fixed-Size Boxes

🧪 Examples

🎨 decoratedBox — Add Backgrounds, Borders, Gradients & Effects

🧪 Examples

🚧 constrained — Add Size Limits to Widgets

🧪 Examples

🟥 coloredBox — Add Background Color to Any Widget

🧪 Example

🎨 Material coloredBox — Background Color with One Line

🌈 Available Colors

✨ All `exui` Extensions:

`exui` Libraries

`exui` Vision

📏 `padding` — Add Padding to Any Widget

🎯 `center` — Center Your Widget with Optional Factors

↔️ `expanded` - Make Widgets Fill Available Space

🧬 `flex` — Flexible Layouts with Fine-Tuned Control

📐 `align` — Position a Widget Precisely

📍 `positioned` — Position Widgets Inside a Stack

🔳 `intrinsic` — Size Widgets to Their Natural Dimensions

➖ `margin` — Add Outer Spacing Around Widgets

↕️ `gap` - Add Spacing Using Number Extensions

🧱 `row` / `column` — Instantly Wrap Widgets in Flex Layouts

🧭 `row` / `column` — Rapid Alignment Extensions for Flex Layouts

📚 Available `column` Methods

`columnMain`<choose alignment>`()`

`columnCross`<choose alignment>`()`

`column`<choose main alignment><choose cross alignment>`()`

📚 Available `row` Methods

`rowMain`<choose alignment>`()`

`rowCross`<choose alignment>`()`

`row`<choose main alignment><choose cross alignment>`()`

🧊 `stack` — Overlay Widgets with Full Stack Control

👁️ `visible` - Conditional Visibility for Widgets

🌫️ `opacity` - Control Widget Transparency

📱 `safeArea` — Add SafeArea Padding Declaratively

👆 `gesture` — Add Tap, Drag & Press Events Easily

🦸 `hero` — Add Seamless Shared Element Transitions

📦 `sizedBox` — Wrap Widgets in Fixed-Size Boxes

🎨 `decoratedBox` — Add Backgrounds, Borders, Gradients & Effects

🚧 `constrained` — Add Size Limits to Widgets

🟥 `coloredBox` — Add Background Color to Any Widget

🎨 `Material coloredBox` — Background Color with One Line

🎨 `Cupertino coloredBox` — Apply iOS-Themed Background Colors

🪞 `fit` — Control How Widgets Scale to Fit

📦 `container` — Wrap Any Widget in a Container

✂️ `clip` - Clip Widgets into Shapes

📝 `text` — Turn Any String into a Text Widget

🎛️ `styled text` - Modify and Style `Text` Widgets Easily

🔣 `icon` — Quickly Create and Style Icons

🧩 On `IconData`

🧩 On `Icon`

🍎 `cupertinoButton` — Turn Any Widget into an iOS Button

🖲️ `button` - Instantly Turn Any Widget into a Button