Jaspr vs Flutter (Web)

Use-Cases

Jaspr

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

This includes (but is not limited to):

• Static Sites
• Server-Rendered Sites
• Single-Page Applications

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.

Flutter

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.

Conceptual Differences

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 Flutter's 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. Jaspr does not care about the styling of components. There are (currently) no pre-styled 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).

2. 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.

3. Jaspr does not have the same layout primitives like Flutter, such as Column, Row, or Stack. Instead, you use standard HTML elements like div, p and span in combination with CSS for layouting.

   Trade-Off: Implementing the same layout primitives as Flutter would hide the underlying web platform and make it harder to learn and use web-native technologies like CSS for layouting.

Flutter Web Embedding

A Flutter web app can be embedded in a normal website using Flutter's 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.

Using Flutter Plugins

Jaspr has the ability to use Flutter web plugins inside your website code. "Flutter web plugins" means Flutter plugins that have web support and are purely service based (i.e. do not render and Flutter widgets). Examples of these plugins are shared_preferences or firebase.

To enable Flutter plugin support, add the following to your pubspec.yaml:

jaspr:
  flutter: plugins

Read more about this in the Configuration page.