CustomPositioned

A reusable Flutter widget that wraps the standard Positioned widget with additional documentation and validation.

Features

  • Provides a clean, documented interface for positioning widgets in a Stack
  • Includes runtime validation to prevent common positioning mistakes
  • Supports all standard Positioned parameters (left, top, right, bottom, width, height)
  • Includes a demo widget showcasing different positioning examples

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_positioned: ^0.0.1

Usage

Basic Usage

Stack(
  children: [
    // Background content...
    CustomPositioned(
      left: 20,
      top: 20,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
  ],
)

Available Parameters

Parameter Type Description
left double Distance from left edge
top double Distance from top edge
right double Distance from right edge
bottom double Distance from bottom edge
width double Child width (mutually exclusive with left/right)
height double Child height (mutually exclusive with top/bottom)
child Widget The widget to position (required)

Validation Rules

The widget includes assertions to prevent invalid combinations:

  • Cannot specify both width and left/right
  • Cannot specify both height and top/bottom

Demo

The package includes a CustomPositionedWidget demo that shows three positioned boxes:

  1. Top-left positioned (red)
  2. Bottom-right positioned (green)
  3. Center positioned (purple)

To run the demo:

void main() {
  runApp(MaterialApp(
    home: CustomPositionedWidget(),
  ));
}

Best Practices

  1. Prefer using width/height OR left/right/top/bottom but not both
  2. For centered positioning, calculate positions relative to parent size using LayoutBuilder
  3. Use the helper method _buildPositionedBox as a template for consistent positioned widgets

Libraries

apptomate_custom_positioned