Flumpose #

Flumpose is a Flutter package that brings declarative, chainable widget composition to your UI code. Say goodbye to deeply nested widget trees and hello to clean, readable, and maintainable Flutter UI.

Transform verbose code like this:

Container(
  color: Colors.blue,
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Align(
      alignment: Alignment.center,
      child: Text('Hello World'),
    ),
  ),
)

Into this:

Text('Hello World')
  .pad(16)
  .backgroundColor(Colors.blue)
  .alignCenter()

✨ Features #

🔗 Chainable Extensions: Fluent API for widget composition
🎨 Background & Decoration: Colors, gradients, images, and custom decorations
📐 Layout Control: Padding, margin, alignment, sizing, and constraints
🎭 Transform & Clip: Rotate, scale, translate, and clip with ease
👆 Gesture Support: Tap, long press, double tap, and ripple effects
✍️ Text Styling: Font size, color, weight, and style helpers
♿ Accessibility: Semantic label extensions for better a11y
🎬 Animations: Fade and other animation helpers
🔧 Parent Wrapping: Custom parent widget injection

📦 Installation #

Add flumpose to your pubspec.yaml:

dependencies:
  flumpose: ^0.0.1

Then run:

flutter pub get

🚀 Quick Start #

Import the package:

import 'package:flumpose/flumpose.dart';

Now you can chain extensions on any widget:

import 'package:flutter/material.dart';
import 'package:flumpose/flumpose.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, Flumpose!')
      .bold()
      .fontSize(24)
      .color(Colors.white)
      .pad(20)
      .backgroundColor(Colors.blue)
      .borderRadius(BorderRadius.circular(12))
      .onTap(() => print('Tapped!'))
      .alignCenter();
  }
}

📖 Usage Examples #

Layout & Spacing #

// Padding
Text('Padded').pad(16) // All sides
Text('Padded').pad(EdgeInsets.symmetric(horizontal: 20))

// Margin
Container().margin(12)
Container().margin(EdgeInsets.only(top: 8))

// Alignment
Text('Centered').alignCenter()
Text('Top Left').alignTopLeft()
Text('Bottom Right').alignBottomRight()
Text('Custom').align(Alignment.topCenter)

// Sizing
Container().width(200).height(100)
Text('Constrained').constrained(BoxConstraints(maxWidth: 300))

// Scrollable
Column(children: [...]).scrollable()
Row(children: [...]).scrollable(axis: Axis.horizontal)

Background & Decoration #

// Solid color background
Text('Blue BG').backgroundColor(Colors.blue)

// Linear gradient
Container()
  .backgroundLinearGradient(
    colors: [Colors.purple, Colors.blue],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  )

// Radial gradient
Container()
  .backgroundRadialGradient(
    colors: [Colors.yellow, Colors.orange],
    radius: 0.8,
  )

// Background image
Container()
  .backgroundImage(
    NetworkImage('https://example.com/image.png'),
    fit: BoxFit.cover,
  )

// Custom decoration
Container().decorated(
  BoxDecoration(
    color: Colors.white,
    boxShadow: [BoxShadow(color: Colors.black26, blurRadius: 8)],
  ),
)

Borders & Clipping #

// Border
Container()
  .border(Border.all(color: Colors.red, width: 2))

// Border radius with clip
Container()
  .borderRadius(BorderRadius.circular(16))

// Clip rounded rectangle
Image.network('url').clipRRect(BorderRadius.circular(12))

// Clip oval
Image.network('url').clipOval()

// Box shadow
Container().boxShadow(
  color: Colors.black26,
  blurRadius: 10,
  offset: Offset(0, 4),
)

// Elevation (Material)
Container().elevation(8, color: Colors.white, borderRadius: BorderRadius.circular(8))

Transform & Animation #

// Rotate (angle in radians)
Icon(Icons.refresh).rotate(0.5)

// Scale
Container().scaleWidget(1.5)

// Translate
Text('Shifted').translate(x: 10, y: 20)

// Custom transform
Container().transform(Matrix4.skewX(0.2))

// Fade animation
Container().fade(duration: Duration(milliseconds: 500))

Gestures & Interaction #

// Simple tap
Text('Click me').onTap(() => print('Tapped'))

// Double tap
Text('Double click').onDoubleTap(() => print('Double tapped'))

// Long press
Text('Hold me').onLongPress(() => print('Long pressed'))

// Material ripple effect
Container()
  .ripple(
    () => print('Ripple tapped'),
    borderRadius: BorderRadius.circular(8),
  )

// Multiple gestures
Container().gestures(
  onTap: () => print('Tap'),
  onLongPress: () => print('Long press'),
)

Text Styling #

Text('Styled Text')
  .fontSize(20)
  .color(Colors.blue)
  .bold()
  .italic()

// Chain multiple styles
Text('Hello')
  .fontSize(18)
  .textColor(Colors.red)
  .bold()

Accessibility #

// Add semantic label
Icon(Icons.home)
  .semanticsLabel('Home button')

// Exclude child semantics
Container()
  .semanticsLabel('Custom label', excludeSemantics: true)

Custom Parent Wrapping #

// Wrap with custom parent
Text('Child').parent((child) => 
  Card(child: Padding(padding: EdgeInsets.all(8), child: child))
)

📚 API Reference #

Layout Extensions #

pad(dynamic) - Add padding (double or EdgeInsets)
margin(dynamic) - Add margin (double or EdgeInsets)
alignCenter(), alignTopLeft(), alignBottomRight() - Quick alignments
align(Alignment) - Custom alignment
width(double), height(double) - Set dimensions
constrained(BoxConstraints) - Apply constraints
scrollable({Axis, ScrollController}) - Make scrollable
overflow({Clip}) - Clip overflow

Background Extensions #

backgroundColor(Color) - Solid color background
backgroundGradient(Gradient) - Custom gradient
backgroundLinearGradient({colors, begin, end, ...}) - Linear gradient
backgroundRadialGradient({colors, center, radius, ...}) - Radial gradient
backgroundImage(ImageProvider, {fit, alignment}) - Background image
decorated(BoxDecoration) - Custom decoration

Border & Clip Extensions #

border(Border) - Add border
borderRadius(BorderRadius) - Rounded corners with clip
clipRRect(BorderRadius) - Clip as rounded rectangle
clipOval() - Clip as oval
elevation(double, {color, borderRadius, ...}) - Material elevation
boxShadow({color, blurRadius, offset}) - Box shadow

Transform Extensions #

rotate(double, {alignment}) - Rotate (radians)
scaleWidget(double, {alignment}) - Scale
translate({x, y}) - Translate
transform(Matrix4, {alignment}) - Custom transform

Gesture Extensions #

onTap(VoidCallback) - Tap handler
onDoubleTap(VoidCallback) - Double tap handler
onLongPress(VoidCallback) - Long press handler
ripple(VoidCallback?, {borderRadius}) - Material ripple
gestures({onTap, onLongPress}) - Multiple gestures

Text Extensions #

fontSize(double) - Set font size
color(Color) - Set text color
textColor(Color) - Set text color (alias)
bold() - Make text bold
italic() - Make text italic

Animation Extensions #

fade({duration}) - Animated opacity

Semantics Extensions #

semanticsLabel(String, {excludeSemantics}) - Add semantic label

Parent Extensions #

parent(Widget Function(Widget)) - Wrap with custom parent

🗺️ Roadmap #

Version 0.1.0 (Upcoming) #

❌ Add convenience aliases (bg, bgGradient, etc.)
❌ Visibility extensions (visible(), hide(), opacity())
❌ Flex/Expanded helpers
❌ Hero animation support
❌ SafeArea and MediaQuery helpers

Version 0.2.0 (Planned) #

❌ Positioned and Stack helpers
❌ AnimatedContainer extensions
❌ Sliver extensions
❌ Theme-aware helpers
❌ Form and input extensions

Future Considerations #

❌ Custom animation builders
❌ Responsive layout helpers
❌ More gesture types (pan, drag, etc.)
❌ Integration with popular state management solutions
❌ Performance optimizations for const contexts

🤝 Contributing #

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License #

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments #

Inspired by SwiftUI's modifier pattern and other declarative UI frameworks. Built with ❤️ for the Flutter community.

📞 Support #

Issues: GitHub Issues
Discussions: GitHub Discussions
Documentation: pub.dev

Made with Flutter ��

flumpose 0.0.1 flumpose: ^0.0.1 copied to clipboard

Metadata