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, and SizedBox into chainable, immutable components with modifier-style extensions.

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

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(Text('Hello World'))
  .backgroundColor(Colors.blue)
  .contentPadding(all: 12)
  .center()
  .radius(all: 8);

Text('Hello World')
  .color(Colors.white)
  .size(20)
  .weight(FontWeight.bold);

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 directly inside Flutter projects.
• Comprehensive Tests — All core widgets and modifiers are verified via widget tests.

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(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);

MaterialApp (Declarative) #

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

Widget Extensions #

All widgets in Flutter can be enhanced with declarative modifiers.

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);

Available Extensions #

Testing #

Declar UI is built with a comprehensive test suite to ensure consistent behavior.

Each widget and modifier is validated through flutter_test.

Example (from test/declar_ui_test.dart):

testWidgets('.color() sets text color', (tester) async {
  await tester.pumpWidget(MaterialApp(home: const Text('Hello').color(Colors.red)));
  final text = tester.widget<Text>(find.text('Hello'));
  expect(text.style?.color, Colors.red);
});

To run the tests:

flutter test

Installation #

Add this to your pubspec.yaml:

dependencies:
  declar_ui:
    git:
      url: https://github.com/updowninteractive/declar_ui.git

Then import it:

import 'package:declar_ui/declar_ui.dart';

Project Structure #

lib/
 ├─ declar_ui.dart
 ├─ widgets/
 │   ├─ text.dart
 │   ├─ container_extension.dart
 │   ├─ row.dart
 │   ├─ column.dart
 │   ├─ sizedbox.dart
 │   ├─ icon.dart
 │   ├─ image.dart
 │   └─ material_app.dart
 └─ 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.