A function which will accept parameter and does something.
Hook will almost always have the use prefix, which indicate it as a function.
Hook is separated to 2 types:
- Property Hook
- Utility Hook
You can also think that property hook is property styling while utility hook is a parent styling.
|Certain Widget||All Widget|
|Property Styling||Parent Styling|
|Property Hook||Utility Hook|
A hook which only available for certain Niku widget.
These kind of hook is use for applying property to specific widget, purely for reducing boilerplate.
useBg for accepting parameters for each state.
// ✅ Available for NikuButton n.Button("".n) ..useBg( base: base, disabled: disabled, dragged: dragged, error: error, focused: focused, hovered: hovered, pressed: pressed, scrolledUnder: scrolledUnder, selected: selected, ); // ❌ Not available for NikuText "".n ..useBg( pressed: pressed, scrolledUnder: scrolledUnder, );
A hook for utility purpose, available for all widget.
This hook work almost the same as parent hook but for conditional checking, adapting property base on the situtation.
useThemeSelector which adapts the property base on light or dark theme:
n.Box() ..useThemeSelector( light: (v) => v..bg = Colors.white, dark: (v) => v..bg = Colors.black, );
Utility Hooks is consists of:
- useDarkMode (deprecated in favor of
When to pass contex
For Utility hooks is available for both Niku Widget and Parent Widget.
Adding target to Niku Widget would require a
BuildContext to be pass through. While adding it to parent doesn't require one.
"".n ..useQuery( context, (v, query) => v..color = Colors.red ); n.Box() ..useQuery((v, query) => ..bg = Colors.blue);
This is because, BuildContext on Niku widget is treat as property styling which need a
BuildContext for building correctly.