Sometime, structuring Flutter widget is a bit too complex, and verbose.
Because Flutter treat almost everything as a widget, mixing between an actual representation component and styling property as a widget. Things get confusing very fast.
Take a look at this:
Padding( padding: EdgeInsets.all(20), child: Text( "Hello World", style: const TextStyle( color: Colors.blue, fontSize: 21, ), ), );
Textis the actual UI representation
Paddingis an property which applied to the descendant
Mixing UI components with and property looks very confusing as it leads to:
- Too much widget, knowns as "Nested Hell"
- Unable to focused main part of the UI
- Mixing business logic with UI Representation
Things get confusing very quick, adding more and more widgets and styling.
However, Niku proposed the new syntax:
import 'package:niku/namespace.dart' as n; n.Text("Hello Niku") ..color = Colors.blue ..fontSize = 21 ..m = 20; // margin
As you might have guessed, Niku treat property widget as property, chaining it to read from top-to-bottom style.
Putting you in the focus on the widget that actually matter to UI Representation. Making it more predictable and straightforward.
Parent property also supports all the 3rd party widget, ensure that Niku can goes along with any codebase.
What make Niku differs from others chaining styling library is that, Niku rewrite important widgets and make it accepts cascade notation instead of props but still accepts the same props.
So you can style all the widget in the same convention, instead of mixing props and chaining.
// ⚠️ Different convention might be confusing n.Text( "Mixed", style: TextStyle( fontSize: 21, color: Colors.blue, ) ) ..mt = 20 // Padding top ..mx = 8; // Padding x-axis // ✅ This is also fine n.Text("Mixed") ..fontSize = 21 ..color = Colors.blue ..mt = 20 ..mx = 8;
Niku also features some unique handy property property you might have always wanted.
useThemeSelector, which adapt the property to device's theme color:
"Theme awareness".n // String to Text shortcut ..useThemeSelector( light: (v) => v..color = Colors.black, dark: (v) => c..color = Colors.white, );
useTransition that auto animate transition between value:
n.Box() ..size = [100, 100] // Animate from simple state ..useTransition( value: value, builder: (widget, value) => widget..bg = value, );
Whether you find styling with cascade notation easy, or extra property comes in handy, Niku will always try to make your code base easier, returning power to your hand again.