declar_ui 1.0.9

declar_ui: ^1.0.9 copied to clipboard

This release introduces a comprehensive extension system for the Container widget, bringing it to feature parity with modern declarative UI frameworks and expanding Declar UI's modifier capabilities.

---

Highlights #

• Dramatically expanded Container modifier API
• Advanced decoration and styling primitives
• Gradient and image background support
• Transform and animation utilities
• Enhanced gesture and interaction modifiers

---

New Features #

Advanced Decoration System #

• .decoration(BoxDecoration) — Apply custom BoxDecoration with full control
• .foregroundDecoration(BoxDecoration) — Overlay decorations on top of content
• .shape(BoxShape) — Set container shape (rectangle/circle)
• .circle() — Quick circular shape shorthand
• .square(double) — Equal width and height for perfect squares

Example:

Container(Icon(Icons.star))
  .circle()
  .size(width: 60, height: 60)
  .backgroundColor(Colors.blue);

---

Shadow & Visual Effects #

• .shadow() — Single shadow with customizable blur, offset, spread, and color
• .shadows(List<BoxShadow>) — Multiple layered shadows for depth effects

Example:

Container(Text('Elevated Card'))
  .contentPadding(all: 16)
  .radius(all: 12)
  .shadow(
    color: Colors.black26,
    blurRadius: 8,
    offset: Offset(0, 4),
  );

---

Gradient Backgrounds #

Complete gradient support with three gradient types:

• .linearGradient() — Linear gradients with customizable direction
• .radialGradient() — Radial gradients from center point
• .sweepGradient() — Sweep/conical gradients for circular effects

Example:

Container(Text('Gradient Background'))
  .linearGradient(
    colors: [Colors.purple, Colors.blue],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  )
  .radius(all: 16);

---

Image Backgrounds #

• .backgroundImage() — Set background images with fit, alignment, and color filters

Example:

Container(Text('Overlay Text'))
  .backgroundImage(
    image: NetworkImage('https://example.com/bg.jpg'),
    fit: BoxFit.cover,
    colorFilter: ColorFilter.mode(
      Colors.black45,
      BlendMode.darken,
    ),
  )
  .size(width: 300, height: 200);

---

Enhanced Border System #

• .borderSides() — Individual border configuration per side (top, bottom, left, right)

Example:

Container(Text('Custom Borders'))
  .borderSides(
    top: BorderSide(color: Colors.red, width: 3),
    bottom: BorderSide(color: Colors.blue, width: 3),
  )
  .contentPadding(all: 12);

---

Transform & Animation Utilities #

Powerful transformation modifiers for dynamic UI:

• .rotate(double) — Rotate by angle in radians
• .scale(double) — Scale uniformly
• .translate() — Translate (move) in x, y, z directions
• .transform(Matrix4) — Apply custom transformation matrix
• .transformAlignment(AlignmentGeometry) — Set transform pivot point

Example:

Container(Icon(Icons.arrow_forward))
  .rotate(0.785) // 45 degrees
  .transformAlignment(Alignment.center)
  .contentPadding(all: 8);

---

Clipping & Opacity #

• .clip(Clip) — Control clipping behavior (hardEdge, antiAlias, etc.)
• .opacity(double) — Wrap in Opacity widget for fade effects

Example:

Container(Image.network('...'))
  .radius(all: 16)
  .clip(Clip.hardEdge)
  .opacity(0.8);

---

Layout & Interaction Utilities #

• .expand({int flex}) — Wrap in Expanded widget for flexible layouts
• .aspectRatio(double) — Maintain aspect ratio constraint
• .onTap(VoidCallback) — Quick GestureDetector wrapper
• .inkWell() — Material ripple effects with tap/long-press support

Example:

Container(Text('Tap Me'))
  .contentPadding(all: 16)
  .backgroundColor(Colors.blue)
  .radius(all: 8)
  .inkWell(
    onTap: () => print('Tapped!'),
    splashColor: Colors.white24,
  );

---

Improvements #

• Complete modifier parity with Flutter's Container widget
• Chainable API maintains immutability and composability
• Comprehensive documentation with inline examples
• Type-safe parameter validation throughout
• Performance optimized for production use

---

API Consistency #

All new modifiers follow Declar UI's established patterns:

• Immutable widget modification
• Fluent chaining syntax
• SwiftUI-inspired naming conventions
• Null-safe parameter handling
• Proper BoxDecoration merging for complex compositions

---

Usage Examples #

Card with Multiple Effects #

Container(
  Column([
    Text('Premium Feature').fontSize(18).bold(),
    Space(height: 8),
    Text('Unlock advanced capabilities'),
  ]),
)
  .contentPadding(all: 20)
  .linearGradient(
    colors: [Color(0xFF667eea), Color(0xFF764ba2)],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  )
  .radius(all: 16)
  .shadows([
    BoxShadow(
      color: Colors.black12,
      blurRadius: 10,
      offset: Offset(0, 4),
    ),
    BoxShadow(
      color: Color(0xFF667eea).withOpacity(0.3),
      blurRadius: 20,
      offset: Offset(0, 8),
    ),
  ])
  .inkWell(onTap: () => print('Upgrade!'));

Circular Avatar with Border #

Container(Image.network('https://example.com/avatar.jpg'))
  .circle()
  .square(80)
  .border(color: Colors.white, width: 3)
  .shadow(
    color: Colors.black26,
    blurRadius: 8,
    offset: Offset(0, 2),
  )
  .clip(Clip.antiAlias);

Animated Transform Card #

Container(Icon(Icons.favorite, size: 32))
  .contentPadding(all: 16)
  .backgroundColor(Colors.red)
  .circle()
  .scale(isLiked ? 1.2 : 1.0)
  .transformAlignment(Alignment.center)
  .onTap(() => setState(() => isLiked = !isLiked));

---

Migration Notes #

All new features are additive — no breaking changes to existing Container API. Existing code continues to work without modification.

New modifiers seamlessly integrate with existing ones:

// Old style still works
Container(Text('Hello'))
  .backgroundColor(Colors.blue)
  .radius(all: 8);

// Can now be enhanced with new features
Container(Text('Hello'))
  .linearGradient(colors: [Colors.blue, Colors.purple])
  .radius(all: 8)
  .shadow(blurRadius: 4);

---

Complete Feature Set #

The Container widget now supports 50+ chainable modifiers covering:

✅ Size & constraints (width, height, size, square, constrain)
✅ Padding & margin (contentPadding, contentMargin)
✅ Colors & gradients (backgroundColor, linearGradient, radialGradient, sweepGradient)
✅ Borders & shapes (border, borderSides, radius, circle, shape)
✅ Shadows & effects (shadow, shadows)
✅ Images & overlays (backgroundImage, foregroundDecoration)
✅ Transforms (rotate, scale, translate, transform, transformAlignment)
✅ Clipping & opacity (clip, opacity)
✅ Alignment (center, topLeft, bottomRight, etc.)
✅ Layout utilities (expand, aspectRatio)
✅ Gestures (onTap, inkWell)

This release marks a major milestone for Declar UI. The framework has been validated in real-world production apps and introduces a refined, stable, and extensible foundation for declarative Flutter UI development.

---

Highlights #

• Production-tested API surface
• Stabilized fluent modifier system
• Expanded sliver & scroll architecture
• Advanced spacing & layout primitives
• Design-system-ready color and spacing utilities

This release contains breaking changes and is not backward-compatible with 1.x.

---

New Features #

Declarative CustomScrollView #

• SwiftUI-style immutable wrapper around Flutter’s CustomScrollView

• Full parity with native API

• Fluent modifiers:

  • Scroll direction, physics, controller, shrinkWrap
  • Keyboard dismiss behavior
  • Padding & SafeArea support

• Designed for expressive sliver-first layouts

---

Unified Sliver API #

• Declarative wrapper supporting:

  • SliverList, SliverGrid
  • SliverFixedExtentList, SliverPrototypeExtentList
  • SliverFillRemaining, SliverFillViewport
  • SliverToBoxAdapter

• Chainable modifiers for:

  • Padding & layout control
  • Grid configuration
  • Performance tuning
  • Child transformation

• Seamless integration with CustomScrollView

---

Advanced Spacing System #

• Introduced render-object–based spacing primitives

• New Spacing enum with semantic values

• Widgets:

  • Space
  • MaxSpace
  • SliverSpace
  • SliverFlexibleSpace

• Automatically adapts to:

  • Flex direction (Row / Column)
  • Scroll direction (vertical / horizontal)

• Optimized for performance and composability

---

Powerful Group Layout Container #

• Unified abstraction over:

  • Column
  • Row
  • Stack
  • Wrap

• Container-level modifiers:

  • Padding, decoration, spacing
  • Overlays & backgrounds
  • Gestures & animations

• Enables compact expression of complex layouts

---

Color Extension System #

• Comprehensive UI-focused Color extensions:

  • Brightness & saturation control
  • Opacity helpers
  • Color harmony utilities
  • WCAG contrast checks
  • Material color generation

• Includes factory helpers:

  • Hex, RGB, HSL, HSV creation

---

Improvements #

• Internal rendering architecture refined for performance and consistency
• API naming aligned across widgets and extensions
• Extensive documentation added across public APIs
• Reduced boilerplate and improved developer ergonomics

---

Breaking Changes #

• Public API reorganization to support long-term stability
• Introduction of sliver-first primitives may require layout migration
• Some legacy utilities and experimental APIs removed or renamed

---

Stability & Production Readiness #

• APIs validated in real-world Flutter applications
• Designed for scalability, performance, and maintainability
• Safe for use in production environments

---

• Minor hotfix to Group Widget

New Features #

• Group Widget (group.dart) Introduced a powerful layout utility widget that enables grouping multiple widgets under a unified configuration. Supports:

  • Vertical, horizontal, and stacked layouts

  • Shared modifiers across all children (padding, decoration, frame sizing, alignment, spacing)

  • Container-like wrapping with decoration, background, overlay, tap gestures, and animation support

  • Per-layout alignment

    • makeVertical(main:, cross:)
    • makeHorizontal(main:, cross:)
    • makeStack(alignment:)

  • Unified fluent-style modifier API

    • .padding(), .backgroundColor(), .cornerRadius(), .frame(), .spacing(), .overlayView(), .backgroundView(), .onTapGesture(), .animation(), and more.

This widget significantly enhances Declar UI’s composability by allowing complex layouts to be expressed in a compact and expressive manner.

Improvements #

• Internal utility cleanup and alignment updates for consistency with other Declar UI widgets.
• Documentation comments added to group.dart for clear API usage.

Updates #

New Features #

• Screen Utility (screen.dart): Introduced a comprehensive utility for responsive UI development, providing easy access to device dimensions, orientation, platform, safe area insets, keyboard visibility, and accessibility settings via BuildContext extensions.
• Constants Utility (constants.dart): Added a set of predefined, scalable design constants for consistent spacing (DSize) and corner radii (DRadius), promoting visual harmony across UI components.

Improvements #

• README Update: The README.md has been significantly updated to include detailed documentation and examples for the new Screen and Constants utilities, along with general enhancements for clarity and professionalism.
• Code Structure: Organized new utilities into dedicated files (screen.dart, constants.dart) within the lib/widgets directory for better modularity.

---

Widget Declar Retracted #

---

Material App update #

• MaterialApp now supports routerConfig for declarative routing.
• Added themeMode and darkTheme properties to MaterialApp for better theme management.

---

Initial Stable Release — Declar UI #

The first public release of Declar UI, a declarative and composable Flutter UI framework developed by UpDown Interactive.

Highlights #

• Introduced declarative Flutter widget wrappers:
  • Text, Container, Row, Column, SizedBox, Icon, Image, MaterialApp, and Stack
• Added extension modifiers for all widgets:
  • .padding(), .backgroundColor(), .radius(), .border(), .center(), .align(), .size(), .opacity(), .visible(), .onTap(), .rotate(), and more
• Implemented SwiftUI-like fluent syntax for expressive, chainable widget configuration
• Added comprehensive unit and widget test coverage
• Included developer-friendly documentation comments and structured code organization
• Fully compatible with Flutter 3.16+

Summary #

This release establishes the foundation of Declar UI — bringing clean, functional, and declarative design principles to Flutter development.