Skip to content
On this page

Reusable Style

You will find out that you've been re-applying the same style over and over again.

And sometime, it's quite long and a little bit too verbose to re-apply to every widget you've been using, and you wish they were shorter.

Worry not, with Niku you can extract the duplicated and redundant styling and be able to re-apply to it again.

The pattern is inspired by CSS, so it's called Style Sheet Pattern.

Stylesheet Pattern

class ButtonStyle {
  static final confirm = n.Button("".n)
    ..fontSize = 24
    ..splash = =
    ..px = 16 = 8
    ..rounded = 8;

// ✅ This will apply all the styling with 1 line
    ..apply = ButtonStyle.confirm;

The different between using Style Sheet and declaring new widget is that, with StyleSheet you can still modified its property while new widget can't.

    ..apply = StyleSheet.title
    // ✅ You can apply more styling here
    ..onPressed = log;

Or appling multiple styles at the same time.

// ✅ Multiple styling is ok
    ..apply = ButtonStyle.confirm
    ..apply = ButtonStyle.large;

// ✅ Or combine multiple style into 1 line with 'use'

And when you need it to be more dynamic, you can also accept a parameters to the styling it.

class TextStyle {
    static final title = (Color color) => n.Text("")
        ..fontSize = 24
        ..color = color;

"Applied with color".n
    ..apply = title(;

Derived Style

Applying multiple style might be convinent, but what if you wants to combined multiple style into 1 to reduce ..apply?

You can derived a style, or basically base a style from an old one.

class TextStyle {
    static final title = "".n
        ..fontSize = 24;

    // ✅ Copied, so no side-effect occurs
    static final headline = title
        .copied  // <--- Notice that we copied the style

    // ✅ This works, because you create a new widget not referencing to 'title'
    static final blue = "".n
        ..apply = title
        ..color =;

The copied method is important because Dart borrowing mechanism.

If you assign a class to new variable, it doesn’t get copied, it's a reference to the original class. So if you modified it, the old class will also be affected.

To prevent side-effect of deriving a styled, you would need to called .copied to create a new copy of the class instance.

With copy, your modification won’t affect to original style, thus side-effect free.

However, you can also use ..apply instead if you're creating a new widget instead of basing on them.

You would wants to create a new widget when combining multiple styles.

class MultipleStyles {
    static final title = "".n
        ..fontSize = 24

    static final roundedBox = "".n
        ..m = 24

    static final withBg = (Color bg) => "".n = bg;

    // Declare a new widget because you're applying
    // 3 styles instead of derived from one      
    static final titleWithRoundedBg = "".n