Component System

Jaspr comes with a component system that is very similar to Flutters widgets. This is a core design decision of jaspr, in order to look and feel very familiar to developers coming from Flutter. You might think of it as just replacing the word 'Widget' with 'Component' (which actually was a small part of jasprs development process 😉), while keeping the same structure and behavior.

When building an app or website with jaspr you will mostly use these three basic components:

StatelessComponent

A custom component that does not require any mutable state and looks like this:

class MyComponent extends StatelessComponent {
  const MyComponent({Key? key}): super(key: key);

  @override
  Component build(BuildContext context) {
    return p([text('Hello World')]);
  }
}

Similar to Flutter, this component:

• extends the abstract StatelessComponent class,
• has a constructor receiving a Key and optionally some custom parameters,
• has a build() method receiving a BuildContext.

StatefulComponent

A custom component that has mutable state and looks like this:

class MyComponent extends StatefulComponent {
  const MyComponent({Key? key}): super(key: key);

  @override
  State createState() => MyComponentState();
}

class MyComponentState extends State<MyComponent> {

  @override
  Component build(BuildContext context) {
    return p([text('Hello World')]);
  }
}

Similar to Flutter, this component:

• extends the abstract StatefulComponent class,
• has a constructor receiving a Key and optionally some custom parameters,
• has a createState() method returning an instance of its custom state class

and has an associated state class that:

• extends the abstract State<T> class,
• has a build() method inside the state class receiving a BuildContext,
• can have optional initState(), didChangeDependencies(), and other lifecycle methods.

InheritedComponent

A base class for components that efficiently propagate information down the tree and looks like this:

class MyInheritedComponent extends InheritedComponent {
  const MyInheritedComponent({required super.child, super.key}) ;

  static MyInheritedComponent of(BuildContext context) {
    final MyInheritedComponent? result = context.dependOnInheritedComponentOfExactType<MyInheritedComponent>();
    assert(result != null, 'No MyInheritedComponent found in context');
    return result!;
  }

  @override
  bool updateShouldNotify(covariant MyInheritedComponent oldComponent) {
    return false;
  }
}

In every aspect, this component behaves the same as Flutters InheritedWidget.