Here’s the updated README.md for Declar UI, including the new Screen and Constants utilities (screen.dart and constants.dart), while keeping the existing structure consistent and professional:

Declar UI #

Declar UI is a lightweight declarative UI framework for Flutter, developed by UpDown Interactive. It introduces a fluent, composable, and expressive syntax for Flutter widget construction — inspired by SwiftUI and Jetpack Compose — while maintaining full compatibility with Flutter’s existing widget ecosystem.

Built and maintained by Siva Sankar.

Overview #

Declar UI provides an elegant declarative interface for building Flutter UIs. It wraps core Flutter widgets such as Text, Container, Row, Column, SizedBox, and more into chainable, immutable components with modifier-style extensions.

This allows you to express layout, styling, and interaction in a clear, chainable, and functional way.

Installation #

flutter pub add declar_ui

Then import it:

import 'package:declar_ui/declar_ui.dart';

Comparison #

Traditional Flutter #

Container(
  padding: const EdgeInsets.all(12),
  color: Colors.blue,
  alignment: Alignment.center,
  child: Text(
    'Hello World',
    style: const TextStyle(
      color: Colors.white,
      fontSize: 20,
      fontWeight: FontWeight.bold,
    ),
  ),
);

With Declar UI #

Container(
  child: Text('Hello World')
      .color(Colors.white)
      .size(20)
      .weight(FontWeight.bold),
)
  .backgroundColor(Colors.blue)
  .contentPadding(all: 12)
  .center()
  .radius(all: 8);

Features #

✅ Declarative API — Build UI with composable and readable chains. ✅ Fluent Modifiers — Configure layout, style, and alignment with expressive methods. ✅ Immutable Widgets — Every modifier returns a new instance for safety and composability. ✅ Full Flutter Compatibility — Works seamlessly inside existing Flutter projects. ✅ Tested and Reliable — Core widgets and modifiers covered by widget tests. ✅ Utility Extensions — Includes responsive screen helpers and design constants.

Widgets #

Declar UI redefines core Flutter widgets with expressive, chainable APIs.

Text #

Text('Declar UI')
  .color(Colors.indigo)
  .size(22)
  .weight(FontWeight.w600)
  .italic()
  .underline()
  .align(TextAlign.center);

Container #

Container(child: Text('Welcome'))
  .backgroundColor(Colors.teal)
  .contentPadding(all: 16)
  .radius(all: 12)
  .border(color: Colors.black12, width: 1.5)
  .center();

Row and Column #

Row([
  Icon(Icons.home).color(Colors.blue),
  Text('Home').weight(FontWeight.bold)
])
  .spacing(10)
  .align(main: MainAxisAlignment.center);

Column([
  Text('Item 1'),
  Text('Item 2'),
])
  .spacing(8)
  .align(main: MainAxisAlignment.center);

SizedBox #

SizedBox(Text('Content')).size(width: 120, height: 80);
SizedBox(null).expanded(expandWidth: true, expandHeight: true);

Icon #

Icon(Icons.favorite)
  .color(Colors.red)
  .size(30)
  .shadow([
    Shadow(offset: Offset(2, 2), blurRadius: 4, color: Colors.black26)
  ])
  .align(Alignment.centerRight);

Image #

Image.network('https://picsum.photos/400')
  .fit(BoxFit.cover)
  .radius(all: 10)
  .color(Colors.black26, blend: BlendMode.darken)
  .size(width: 200, height: 150);

Stack #

Stack([
  Image.asset('assets/bg.jpg'),
  Text('Overlay').color(Colors.white).center(),
]).alignment(Alignment.center).fit(StackFit.expand);

Scaffold #

Scaffold(
  body:  Column([
      Text('Hello from Declar UI')
        .size(18)
        .color(Colors.black87)
        .center(),
    ]),
)
  .appBar(AppBar(title: Text('Declar UI')))
  .floatingActionButton(
    FloatingActionButton(onPressed: () {}, child: Icon(Icons.add)),
  );

🧩 The Declar version of Scaffold supports chainable methods for appBar, body, floatingActionButton, and more — enabling fluent page structure composition.

MaterialApp (Declarative) #

MaterialApp(
  home: HomePage()
)
  .title('Declar UI Demo')
  .theme(ThemeData(primarySwatch: Colors.indigo))
  .debugBanner(false);

Declar Widget #

Declar is a minimal, declarative StatefulWidget that provides inline lifecycle hooks similar to SwiftUI’s onAppear and onDisappear.

Declar(
  init: () => print('Initialized'),
  dispose: () => print('Disposed'),
  builder: (context) => Text('Declar UI is active!'),
);

Features:

• Inline lifecycle control (init, dispose, didUpdate)
• Stateless builder syntax
• Perfect for lightweight, declarative logic blocks

When Widget #

When is a declarative, composable conditional widget — similar to SwiftUI’s if view builder — that renders widgets based on a boolean condition.

Example #

When(condition: isLoggedIn)
  .then(
    Container(child: Text('Welcome back!'))
      .backgroundColor(Colors.green)
      .contentPadding(all: 12)
      .radius(all: 8),
  )
  .otherwise(
    Container(child: Text('Please log in'))
      .backgroundColor(Colors.red)
      .contentPadding(all: 12)
      .radius(all: 8),
  );

Screen Utilities (screen.dart) #

The Screen API provides responsive utilities, device info, and accessibility helpers directly on the BuildContext.

final height = context.maxHeight;
final isDark = context.isDarkMode;
final safePadding = context.safeAreaPadding.top;
final isTablet = context.isTabletSize;

Highlights #

Example #

if (context.isMobile) {
  return Column([
    Text('Mobile Layout'),
  ]);
} else {
  return Row([
    Text('Tablet/Desktop Layout'),
  ]);
}

Design Constants (constants.dart) #

Declar UI defines consistent, scalable design constants for spacing and corner radii.

Spacing — DSize #

padding: EdgeInsets.all(DSize.md); // 16.0
margin: EdgeInsets.symmetric(horizontal: DSize.lg); // 24.0

Radius — DRadius #

borderRadius: DRadius.mdRadius, // 12.0
shape: RoundedRectangleBorder(borderRadius: DRadius.cardRadius),

These constants help maintain visual consistency across UI components.

Widget Extensions #

Text('Hello')
  .padding(all: 16)
  .background(Colors.blueGrey)
  .cornerRadius(8)
  .opacity(0.9)
  .center()
  .onTap(() => print('Tapped'))
  .when(true, (widget) => widget.background(Colors.green))
  .visible(true);

Project Structure #

lib/
 ├─ declar_ui.dart
 ├─ widgets/
 │   ├─ text.dart
 │   ├─ container_extension.dart
 │   ├─ row.dart
 │   ├─ column.dart
 │   ├─ sizedbox.dart
 │   ├─ icon.dart
 │   ├─ scaffold.dart
 │   ├─ declar.dart
 │   ├─ when.dart
 │   ├─ screen.dart      ← NEW
 │   └─ constants.dart   ← NEW
 └─ extensions/
     └─ widget_extensions.dart

About #

Declar UI is developed and maintained by UpDown Interactive, founded by Siva Sankar, focused on building expressive, modern, and declarative developer tools for Flutter.

License #

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