auto_layout_frame

Flutter implementation of Figma's Auto Layout frames with support for alignment, padding, gap, resizing, and overflow behavior.

flutter pub add auto_layout_frame

💙 Use cases

• 🎨 Figma-like layouts: Replicate Figma's Auto Layout behavior in your Flutter apps
• 📱 Responsive UI: Build flexible, responsive layouts that adapt to different screen sizes
• 🚀 Rapid prototyping: Quickly create complex layouts with an intuitive, declarative syntax

✨ Features

• 🎯 Alignment: Control child alignment with alignChildren
• 📏 Padding & Gap: Set padding around children and gap between them (including auto-spacing with gap: double.infinity)
• 📐 Resizing: Choose from fixed, hugContents, or fillContainer for horizontal and vertical axes
• ↔️ Direction: Layout children horizontally, vertically, or with wrapping
• 🔄 Overflow handling: Choose from none, clip, visible, or scroll behaviors
• 🪆 Proper nesting: Automatically handles nested AutoLayoutFrames with correct constraint handling

Coming soon:

• 📚 More docs/examples
• 🧩 More layout options
• ⚡ Performance optimizations

---

🔮 Usage Guide

Getting Started

Add auto_layout_frame to your pubspec.yaml:

flutter pub add auto_layout_frame

Then import it in your Dart code:

import 'package:auto_layout_frame/auto_layout_frame.dart';

Basic Example

AutoLayoutFrame(
  direction: AutoLayoutDirection.vertical,
  gap: 16,
  padding: EdgeInsets.all(20),
  alignChildren: Alignment.centerLeft,
  children: [
    Text('Hello'),
    Text('World'),
    Text('Auto Layout!'),
  ],
)

Advanced Example

AutoLayoutFrame(
  direction: AutoLayoutDirection.horizontal,
  gap: double.infinity, // Auto-space children
  padding: EdgeInsets.symmetric(horizontal: 24, vertical: 16),
  alignChildren: Alignment.center,
  horizontalResizing: AutoLayoutResizing.fillContainer,
  verticalResizing: AutoLayoutResizing.hugContents,
  backgroundColor: Colors.blue.shade50,
  overflow: AutoLayoutOverflowBehavior.scroll,
  children: [
    Icon(Icons.star),
    Text('Featured Item'),
    Icon(Icons.arrow_forward),
  ],
)

Resizing

Like Figma, you can control how the frame resizes on both axes:

• AutoLayoutResizing.fixed: Fixed size (requires explicit width/height)
• AutoLayoutResizing.hugContents: Shrink-wrap to fit children
• AutoLayoutResizing.fillContainer: Expand to fill available space

Overflow

New!: Control how overflow is handled when children exceed frame bounds:

• AutoLayoutOverflowBehavior.none: Allow overflow errors (default)
• AutoLayoutOverflowBehavior.clip: Clip overflow to frame bounds
• AutoLayoutOverflowBehavior.visible: Allow overflow to be visible
• AutoLayoutOverflowBehavior.scroll: Make frame scrollable

---

📄 License

This project is licensed under the Mozilla Public License 2.0 - see the LICENSE file for details.

🔥 Contributing

Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes. Make sure to read the following guidelines before contributing:

• Code of Conduct
• CONTRIBUTING.md
• "Effective Dart" Style Guide
• pub.dev Package Publishing Guidelines

🙏 Credits & Acknowledgements

Contributors 🧑‍💻💙📝

This package is developed/maintained by the following rockstars! Your contributions make a difference! 💖

Sponsors 🫶✨🥳

Kind thanks to all our sponsors! Thank you for supporting the Dart/Flutter community, and keeping open source alive! 💙

---

Based on dart_package_template - a high-quality Dart package template with best practices, CI/CD, and more! 💙✨