feat: 2.1 (Ga1ahad)

[SaltyAom]

It's been a wild ride of Niku with you all.

Since Niku 2.0 has been released, Niku has been getting a lot of attention lately, and we really want to say thank you to all for joining us on how we could reimagine composing UI in the Flutter together.

For this release, 2.1 or ga1ahad have been working on for quite some time, drafted even before the release of 2.0 rc.
The name "Ga1ahad" comes from Ga1ahad and Scientific Witchery.

Without further ado, let's see what's new in Niku 2.1~

Proxy

Previously, with Niku, composing nested objects would required you an additional, for example composing n.Button.

n.Button(Text("Delete"))
  ..onPressed = log
  ..useTextStyle((v) => v..color = Colors.red)
  ..useButtonStyle((v) => v..splash = Colors.red.withOpacity(.15));

This is good for grouping the styling, easily indicating which style is for which part, but to be honest, it's slow and annoying to write.

That's why Proxy is created to fix this problem.

Proxy is an abstract class for mapping your setter and shortcut to a nested object property without using a hook.
It handles creating object if doesn't exist and just write the property, that's it, no magic or expensive calculation.

This allows you to write the direct setter without having useTextStyle or useButtonStyle hook.

n.Button(Text("Delete"))
  ..onPressed = log
  ..color = Colors.red
  ..splash = Colors.red.withOpacity(.15);

Not only that you can use Proxy to handle the style of nested objects, but you can also handle the parent property builder as well.

Proxy support Button and TextFormField with all properties, and shortcuts.

Parent Proxy

Same as Proxy but for parents.

Parent Proxy allows you to compose your parent with access to parent property without having to create useParent.

For the layout widget like Column and Row which usually required explicit set of width or other property like w100, bg, scrollable, rounded, border and etc.

Providing a shortcut proxy would be really convenient, so the parent proxy is here for the job.

With parent proxy, you can now compose some parent shortcut for some specific widget starting with Column and Row.

n.Row([])
  ..center
  ..wFull
  ..bg = Colors.red
  ..rounded = 8

Because some widgets might have conflict names with parent property and shortcuts like padding, only a specific selection of widgets are get to have Parent Proxy.

But every parent has limited access to some convenient Parent Proxy, starting with margin and m.

useThemeSelector

Dark theme has become an essential part of app development, with Niku you can use useDarkMode to handle the case.
But the handler is quite, imperative to say the least.

n.Box()
  ..useDarkMode((v, isDark) => v
    ..bg = isDark ? Colors.grey.shade800 : Colors.white);

You are provided with child and isDark as an indicator for dark mode but you still have to handle the logic yourself.
For a single property, it's quite simple but when there's more property it gets annoying.
Besides what about some property you might want to have in specific mode only? You have to handle the case yourself.

This is why useThemeSelector is introduced.
Basically, it provide you the same syntax as useScreen but for dark mode and handle the rest of for diffing and applyment for you.

n.Box()
  ..useThemeSelector(
    light: (v) => v..bg = Colors.white,
    dark: (v) => v..bg = Colors.grey.shade800,
  );

GridView and ListView

Gridview and ListView are now supported as Niku widgets, with all the factory property and utilities you can use.

It's recommended to use GridView and ListView for Style Sheet Pattern because of the redundant syntax provided.

Breaking Change

• flexible is now flex on Niku
• Deprecated required value of TextFormField in favor of hint.
  • To migrate, please add factory .hint or add it as named parameter

Minor Feature

• Add ConstraintsMacro to NikuInputDecoration
• Add useTextStyle to DropdownButton
• Add State Utility Hooks to NikuButton
• Add color setter to NikuButtonStyle
• Add of alias for apply

Change

• border is now baseBorder, and allBorder is now border
• margin property now uses Padding instead of Container because that's how native Flutter doing it. Yes, margin is actually padding in Flutter.
• • Remove function allocation from _init of MapTextStyleMacro
• Add center to NikuColumn, and NikuRow
• Replace childrenWithGap with $internalComposeGap in GapMacro
• Add gap property to AxisLayout
• gap can now be applied
• childrenWithGap now only composed on build
• borderWidth is now baseBorderWidth to follow the same convention with border, borderColor, and borderStyle on proxy
• AxisLayoutMacro is now AxisLayoutProxy

Fix

Bug fix:

• Remove print from PaddingMacro
• Fix 'owner!._debugCurrentBuildTarget == this': is not true. when using useDarkMode
• useDarkMode and useThemeSelector not switching context between

[SaltyAom]

LGTM 👍