Widget - Chaining & Layout

Essential chaining extensions to flatten your widget tree. Instantly add padding, centering, alignment, flexible sizing, and mouse/tap interactivity to any widget.

1. 🖱️ Interaction & Input

   clickableMouse({VoidCallback? onTap, Function(PointerHoverEvent)? onHover, ...}) · Widget

   Show Parameters

   onTap · VoidCallback? · default: "null"

   The callback function to execute when the widget is tapped.

   onHover · Function(PointerHoverEvent)? · default: "null"

   The callback function when a pointer hovers over the widget.

   onEnter · Function(PointerEnterEvent)? · default: "null"

   The callback function when a pointer enters the region.

   onExit · Function(PointerExitEvent)? · default: "null"

   The callback function when a pointer exits the region.

   Makes the widget clickable, ensures the mouse cursor changes to a pointer (hand icon), and provides callbacks for hover events.

   Card(child: Text('Click Me'))
       .clickableMouse(
         onTap: () => print('Tapped!'),
          onHover: (event) => print('Mouse is over!'),
       );
   

   addSelectionArea() · Widget

   Wraps the widget in a SelectionArea, allowing the user to select and copy text within it. Useful for desktop/web.

   const Text('Copy Me').addSelectionArea();
   
2. 📏 Sizing & Positioning

   expanded({int flex}) · Widget

   Show Parameters

   flex · int · default: "1"

   The flex factor to control how much space the widget occupies.

   Wraps the widget in an Expanded widget, forcing it to fill the available space along the main axis of a Row or Column.

   Row(children: [
     Container(width: 50).expanded(), // Takes remaining space
     const Text('Fixed')
   ]);
   

   flexible({int flex, FlexFit fit}) · Widget

   Show Parameters

   flex · int · default: "1"

   The flex factor.

   fit · FlexFit · default: "FlexFit.loose"

   The fit of the flexible child (FlexFit.loose or FlexFit.tight).

   Wraps the widget in a Flexible widget, allowing it to grow or shrink, constrained by available space.

   Row(children: [
     Container(width: 200).flexible(fit: FlexFit.tight),
     const Text('Hello')
   ]);
   

   align({AlignmentGeometry alignment}) · Widget

   Show Parameters

   alignment · AlignmentGeometry · default: "Alignment.center"

   The alignment to use.

   Wraps the widget in an Align widget, positioning the child within its own bounds.

   Container(height: 100).align(alignment: Alignment.topCenter);
   
3. 🎨 Styling & Wrappers

   padding({EdgeInsetsGeometry padding}) · Widget

   Show Parameters

   padding · EdgeInsetsGeometry · default: "EdgeInsets.all(8)"

   The alignment to use.

   Wraps the widget in a Padding widget.

   Text('Title').padding() // Adds 8.0 padding all around
   

   clip({BorderRadiusGeometry borderRadius}) · Widget

   Show Parameters

   borderRadius · BorderRadiusGeometry · default: "BorderRadius.zero"

   The border radius to use for clipping.

   Wraps the widget in a ClipRRect widget to apply rounded corners.

   Image.network('url').clip(borderRadius: BorderRadius.circular(12.0));
   

   visibility({bool visible}) · Widget

   Show Parameters

   visible · bool · default: "true"

   If true, the widget is rendered; otherwise, it is hidden.

   Controls the visibility of the widget without removing it from the tree.

   const Icon(Icons.star).visibility(visible: userIsLoggedIn);
   

   visible() · Widget

   Ensures the widget is visible (convenience method).

   if (!isLoaded) Container().visible();
   
4. ⚙️ Scrollbar Control

   removeScrollbar(BuildContext context) · Widget

   Show Parameters

   context · BuildContext · required

   The BuildContext is required to obtain the current ScrollConfiguration.

   Removes the system scrollbar from a scrollable widget. Useful for clean desktop/web interfaces.

   ListView.builder(...).removeScrollbar(context);
   

   addScrollbar(BuildContext context) · Widget

   Show Parameters

   context · BuildContext · required

   The BuildContext is required to obtain the current ScrollConfiguration.

   Ensures a scrollbar is visible for a scrollable widget, overriding any parent scroll configuration settings.

   GridView.builder(...).addScrollbar(context);