Jolt

A powerful UI library for Flutter.

Everything you need to create beautiful interfaces that look great on any platform. Highly flexible, easy to theme and a breeze to create custom widgets.

Check out the examples below or flick through the example code (opens in a new tab).

Use JoltApp as an alternative to MaterialApp or CupertinoApp when building apps with Flutter.

Goals

Favour composition

We've all been told, everything is a widget.

By combining powerful basic widgets like Surface and Interaction, you can create maintainable custom widgets easily.

Some clickable text with padding that expands on hover
Interaction(
  onTap: () => print('Do something'),
  builder: (context, state) {
    return Surface(
      padding: EdgeInsets.all(
        state.isHovering ? context.spacing.md : context.spacing.sm
      ),
      child: Text('Click me'),
    );
  }
)

Stay flexible

Libraries like Material and Cupertino are fantastic tools but they can be very rigid by design.

With Jolt, anything that can be configurable, is configurable.

  • Every widget has a corresponding Style class. This class defines all the configurable properties available.
  • The system is designed to allow maximum maintainability, with a clearly defined hierarchy (opens in a new tab).
Theming example
 

Prioritise accessibility

When building quickly, we sometimes forget to put labels on buttons or to make sure the text has enough contrast.

You can save your users from squinting by making accessibility easy.

  • Semantic properties are readily available for all widgets including the new identifier property to make testing a breeze.
  • Jolt has a few tricks with colors to ensure text and backgrounds are always visible and clear.
Accessibility example
 

Look great everywhere

Flutter just about anywhere and between platform differences and screen sizes, responsive design is hard.

Jolt can ease the burden with clever layout widgets and helpful responsive utilities.

  • Set your breakpoints and use the Shell and Scaffold widgets to make use of the space available on each platform with ease.
  • When you need to make micro-adjustments, use the context.responsive method to make changes at any level of the widget tree.
Responsive example
 

Move quickly with precision

Building an MVP on the weekend?
Or maybe implementing a large scale app based on a strict design system?

You can now do both with the same library.

  • When you need to build quickly, Jolt uses sensible defaults that result in a great looking app with minimal effort.
  • When you need control over every shade and every pixel, you can do that too.
Quick vs thorough theming
 

Roadmap

This project is in an early alpha stage. Check the roadmap (opens in a new tab) to see what's coming next.

Business beware
This project is neither production ready nor a fully complete alternative to Material/Cupertino (yet).
Keep a close eye on the project and hope to see you soon!

Shout-outs