🥊 Jaspr vs Flutter Web

Jaspr is an alternative to Flutter Web, when you want to build any kind of website with Dart.

The Flutter team itself has stated on multiple occasions that

Flutter Web is for building Web-Apps, not Web-Sites.

That just means that while Flutter Web is a great technology for sharing your apps across multiple platforms including the web, it may not be suited for all types of websites that you want to build.

The flutter docs write in that regard:

Not every HTML scenario is ideally suited for Flutter at this time. For example, text-rich, flow-based, static content such as blog articles benefit from the document-centric model that the web is built around, rather than the app-centric services that a UI framework like Flutter can deliver.

Jaspr works by giving you the familiar look and feel of the Flutter framework, while using native web technologies, like HTML, the DOM and CSS to enable you building all kinds of websites using Dart.

Differences between Jaspr and Flutter#

As you might know Flutter renders Widgets by manually painting pixels to a canvas. However rendering web-pages with HTML & CSS works fundamentally different to Flutters painting approach. Also Flutter has a vast variety of widgets with different purposes and styling, whereas in html you can uniquely style each html element however you like.

Instead of trying to mirror every little thing from Flutter, jaspr tries to give a general Fluttery feeling by matching features where it makes sense without compromising on the unique properties of the web platform. Rather it embraces these differences to give the best of both worlds.

1. The build() method of a StatelessComponent or StatefulComponent returns an Iterable<Component> instead of a single component. This is because a HTML element can always have multiple child elements. The recommended way of using this is with a synchronous generator. Simply use the sync* keyword in the method definition and yield one or multiple components:

   Copy

   class MyComponent extends StatelessComponent {
     @override
     Iterable<Component> build(BuildContext context) sync* {
       yield ChildA();
       yield ChildB();
     } 
   }
   

   Trade-Off: Returning a single component and having an extra multi-child component would be superficial to how html works and thereby not a good practice.

2. Jaspr does not care about the styling of components. There are (currently) no prestyled components like in Flutters material or cupertino libraries.

   Trade-Off: Providing styled components would be a lot of extra work and is currently not feasible. Also there exist a lot of different, well established CSS frameworks for web that you can already integrate and use with jaspr (e.g. Bulma).

3. Text receives only a String and nothing else. As usual for web, styling is done through a combination of CSS attributes, either in a Stylesheet or though the style attribute of the parent elements.

   Trade-Off: Giving Text a style option would be superficial and not native to web, and thereby not a good practice.

Flutter Web Embedding#

A Flutter web app can be embedded in a normal website using Flutters element embedding feature. Jaspr has first-class support for this feature and allows the embedding of a flutter web app as part of a jaspr website.

For more details on this feature refer to the Flutter Embedding page.