A declarative UI extension toolkit for Flutter, making your widget tree more expressive, readable, and concise.
- 🔹 Fluent widget extension methods:
.paddingAll()
,.rounded()
,.onTap()
, etc. - 🔹 String-based
Text()
creation:'Hello'.text(...)
- 🔹 Theme-aware text styles:
'Title'.titleMedium(context)
- 🔹 Conditional rendering:
.visible()
,.ifTrue()
,.ifFalse()
- 🔹 Declarative spacing:
Spacing.square(16)
,.gapBottom(12)
- 🔹 Designed to be chainable, intuitive, and Flutter-conventional
Add to your pubspec.yaml
:
dependencies:
flutter_dsl: ^0.1.2+2
Then import it in your Dart files:
import 'package:flutter_dsl/flutter_dsl.dart';
🔹 Widget DSL
Text('Login')
.paddingAll(16)
.rounded(12)
.backgroundColor(Colors.blue)
.center()
.onTap(() => print('Tapped'));
🔹 Iterable Widget DSL
[
Icon(Icons.star),
'Favorite'.text(),
].row(spacing: 8);
[
'Welcome'.headlineMedium(context),
'Please log in'.text(),
].column(crossAxisAlignment: CrossAxisAlignment.start, spacing: 16);
[
'A'.text().backgroundColor(Colors.red),
'B'.text().backgroundColor(Colors.green).expanded(),
'C'.text().backgroundColor(Colors.blue).flex(2),
].row();
🔹 String → Text DSL
'Welcome'
.text(fontSize: 18, fontWeight: FontWeight.bold);
'Title'.titleMedium(context);
'Body'.bodyMedium(context);
'Caption'.labelSmall(context);
🔹 Conditional Rendering
'Error occurred'
.text()
.visible(hasError);
'Edit'
.text()
.ifTrue(isEditable, orElse: () => Icon(Icons.lock));
🔹 Spacing DSL
Spacing(w: 12); // Horizontal spacing
Spacing(h: 16); // Vertical spacing
Spacing.square(24); // Equal width & height
Spacing.none(); // Empty SizedBox
Check out the full working demo in: 📄 example/lib/main.dart
Flutter UI can be expressive, but often verbose. This package aims to: Reduce nesting and boilerplate Make UI code more readable Provide reusable and declarative patterns Stay consistent with Flutter's philosophy
We welcome PRs and issues! Please open an issue or fork and create a PR.
MIT License © 2025 HARDY